축소로 WordPress 사이트의 성능을 개선하는 방법

게시 됨: 2018-11-19

사이트 속도는 거의 모든 사이트 소유자의 영원한 관심사로 남아 있습니다. 사이트 속도를 향상시킬 수 있는 여러 가지 방법이 있지만 고려해야 할 자주 간과되는(그러나 매우 효과적인) 기술이 있습니다. 바로 축소입니다.

간단히 말해서 축소는 사이트의 코드를 최적화하여 크기를 줄이고 실행 효율성을 높입니다. 이것은 작은 관심사처럼 보일 수 있지만 실제로는 놀라울 정도로 효과적입니다.

이 기사에서는 축소의 개념과 작동 방식을 소개합니다. 또한 코드를 건드릴 필요 없이 이 방법을 직접 활용할 수 있는 몇 가지 방법을 보여 드리겠습니다. 시작하자!

'축소화' 소개(및 어떻게 도움이 되는지)

이 블로그는 이전에 여러 번 사이트를 빠르게 유지하는 것의 중요성에 대해 논의했습니다. 이 때문에 사이트 속도를 최적화할 수 있는 여러 가지 방법을 이미 알고 있을 것입니다. 오늘은 다른 방법에 대해 알아보겠습니다.

긴 로드 시간의 잠재적인 이유 중 하나는 비효율적으로 작성된 코드입니다. 오늘날 대부분의 사이트 소유자는 코드를 작성할 필요가 거의 없기 때문에 코드로 인해 사이트가 느려지는지 여부조차 알 수 없습니다. 그러나 축소라고 하는 프로세스를 사용하면 무시할 수 있습니다.

코더가 아닌 경우 이 작업이 겁나게 복잡해 보일 수 있지만 걱정하지 마십시오. 축소는 실제로 CSS, HTML 및 JavaScript 코드 최적화를 포함하는 간단한 프로세스입니다. 코딩 기술 없이도 이것을 달성할 수 있는 방법은 나중에 알려 드리겠습니다. 그러나 그 전에 다음 CSS 스니펫을 사용하여 실제로 어떻게 작동하는지 살펴보겠습니다.

h1 {
    background-color: blue;
}

h2 {
    background-color: red;
}

p {
    background-color: black;
}

CSS에 대해 어느 정도 익숙하더라도 이것은 해독하기가 매우 쉽습니다. 단순히 페이지의 다른 요소에 어떤 스타일을 할당해야 하는지 지정합니다. 이는 코드가 사람의 눈으로 읽을 수 있도록 작성되었기 때문입니다. 이를 위해 줄 바꿈과 추가 공백을 사용하여 코드의 각 부분을 명확하게 정의하고 스캔하기 쉽게 만듭니다.

그러나 이것은 실제로 컴퓨터가 코드를 이해하고 실행하는 데 필요한 것이 아닙니다. 실제로 추가 문자는 코드를 '무거워'지게 하므로 컴퓨터가 읽고 실행하는 데 시간이 더 오래 걸립니다. 따라서 축소를 인간 친화적인 코드를 기계 친화적인 코드로 바꾸는 프로세스로 생각할 수 있습니다.

이 코드를 축소하면 대신 다음과 같이 보일 것입니다.

h1{background-color:blue}h2{background-color:red}p{background-color:black}

이 코드는 실제로 위의 것과 똑같은 기능으로 구성되어 있지만 불필요한 부분은 모두 제거했습니다. 큰 차이가 없어 보일 수 있지만 축소된 코드는 실제로 원본보다 36% 더 가볍습니다. 이 동일한 원칙이 페이지의 모든 코드에 적용된다고 상상한다면 장기적으로 이것이 얼마나 효과적인지 알 수 있을 것입니다.

그래서, 실제로 어떻게 합니까? 사용할 수 있는 몇 가지 방법이 있으며 이 기사 전체에서 해당 방법을 살펴보겠습니다. 먼저 수동으로 코드를 축소하는 방법을 살펴보겠습니다.

수동으로 코드를 축소하는 방법

코드를 축소할 수 있는 한 가지 방법은 직접 수행하는 것입니다. 이것은 테마나 플러그인을 생성할 때와 같이 자신만의 코드를 작성하는 경우에 특히 유용합니다. 그러나 가는 빗으로 코드를 검토하는 것은 금액에 따라 불가능하지는 않더라도 부담이 될 수 있습니다.

다행히도 몇 초 만에 축소된 코드를 생성하는 데 도움이 되는 도구가 많이 있습니다. 그러한 예 중 하나는 CSS와 JavaScript 모두에서 작동하는 Minify입니다.

압축하려는 코드를 텍스트 상자에 붙여넣고 축소를 클릭하면 코드가 즉시 새 형식으로 반환됩니다. 새 버전이 원본에 비해 얼마나 가벼운지에 대한 요약도 볼 수 있습니다.

HTML 코드를 축소해야 하는 경우 작업에 HTML Minifier를 권장합니다.

특히 이 도구는 코드 압축 방법과 관련하여 다양한 옵션을 제공하고 Google에서 승인한 도구이기 때문에 마음에 듭니다. 오른쪽의 설정을 사용하여 원하는 대로 최종 출력을 조정할 수 있습니다.

수동으로 코드를 축소하는 것이 확실히 유용할 수 있지만 대부분의 경우 프로세스를 자동화하고 싶을 것입니다. 다음으로 정확히 어떻게 할 수 있는지 살펴보겠습니다.

프론트 엔드의 작은 세부 사항은 작업 속도를 저하시킬 수 있습니다. 많은 플러그인, 테마 및 기술이 함께 작동하기 때문에 어디서부터 시작해야 할지 모를 수 있습니다. Performance Insights 추가 기능은 사이트의 고성능 및 저성능 측면을 심층적으로 살펴봅니다. 거기에서 한 걸음 더 나아가 전문가 팀이 직접 권장하는 조치를 제공하므로 사이트 속도를 향상시킬 수 있는 위치와 방법을 정확히 알 수 있습니다! 여기에서 자세히 알아보세요.

코드를 자동으로 축소하는 데 도움이 되는 3가지 WordPress 플러그인

축소를 구현하는 가장 쉬운 방법은 WordPress 플러그인을 사용하여 작업을 수행하는 것입니다. 이러한 플러그인은 호출되는 즉시 코드를 자동으로 축소합니다.

즉, 코드를 직접 볼 필요 없이 코드를 축소할 수 있습니다. 이를 염두에 두고 최고의 축소 플러그인을 살펴보겠습니다!

1. 자동 최적화

축소가 복잡한 프로세스가 될까봐 걱정된다면 Autooptimize가 완벽한 대안입니다. 이것은 사용자가 입력할 필요 없이 사이트의 모든 스크립트를 자동으로 축소하는 '설정 후 잊어버리기' 솔루션입니다. 플러그인을 설치하고 활성화하기만 하면 나머지는 알아서 처리합니다. 그러나 기술적인 측면에 들어가고 싶다면 플러그인은 몇 가지 고급 구성 옵션도 제공합니다.

주요 특징들

구성이 필요 없이 사용이 간편합니다.
사이트의 모든 스크립트를 자동으로 축소하고 압축합니다.
최적의 성능을 위해 모든 스타일을 사이트 헤더로 이동합니다.

가격: 플러그인은 무료이며 Autooptimize는 €119 또는 대략 $138부터 시작하는 프리미엄 계층도 제공합니다.

2. 빠른 속도 축소

이 모든 플러그인의 실행 테마는 단순성입니다. 이전 제품과 마찬가지로 Fast Velocity Minify는 즉시 사용할 수 있습니다. 플러그인은 코드와 스크립트를 최소한의 파일로 압축하여 CSS와 JavaScript가 가능한 한 효율적으로 전달되도록 합니다. 또한 선택적 HTML 축소를 비롯한 여러 구성 설정이 포함되어 있습니다.

주요 특징들

HTTP 요청 수를 줄이기 위해 스크립트 파일을 축소합니다.
기본 설정으로 플러그 앤 플레이 기능을 제공합니다.
Google 글꼴을 병합하고 최적화합니다.

가격: 플러그인은 프리미엄 플랜이 필요 없이 완전히 무료입니다.

3. 병합 + 축소 + 새로 고침

Merge + Minify + Refresh는 기본적으로 작동하기 시작하는 또 다른 축소 플러그인입니다. 그 기능은 Autooptimize와 대체로 유사하지만 특히 가벼운 대안입니다. 축소 프로세스가 작동하는 방식으로 인해 플러그인은 속도 저하를 최소화하고 캐시를 수동으로 지울 필요가 없습니다(다른 솔루션과 달리).

주요 특징들

스크립트 파일을 자동으로 축소하고 결합합니다.
wp-cron을 사용하여 축소 중 속도 저하를 최소화합니다.
WordPress Multisite 설정과 호환됩니다.

가격: Merge + Minify + Refresh는 무료로 다운로드하여 사용할 수 있으며 프리미엄 플랜은 없습니다.

결론

사이트 최적화와 관련하여 모든 방법을 마음대로 사용하는 것이 중요합니다. 그 중 하나는 기능에 영향을 미치지 않으면서 코드를 더 효율적으로 압축할 수 있는 축소입니다.

이 기사에서는 내가 추천하는 플러그인 중 하나를 사용하여 자신의 사이트에서 축소를 활용하는 방법에 대해 논의했습니다.

자동 최적화. 강력하면서도 단순하며 숙련된 사용자를 위한 추가 설정이 있습니다.
빠른 속도 축소. 초보자와 개발자 모두에게 좋은 견고한 옵션입니다.
병합 + 축소 + 새로 고침. 빠르고 안정적이며 항상 우수한 성능을 보장합니다.

축소를 사용하여 사이트 속도를 높이는 방법에 대해 질문이 있습니까? 아래 의견 섹션에서 알려주십시오!

무료 가이드를 통해 사이트 성능을 한 단계 끌어올리십시오!

이 무료 가이드에는 현재 WordPress 사이트의 성능과 속도를 높이는 데 사용할 수 있는 8가지 간단한 단계가 있습니다. 이미지, JavaScript 및 CSS와 같은 웹 자산 최적화에서 포괄적인 플러그인 감사 수행에 이르기까지 모든 최고의 WordPress 성능 사례를 다룹니다.

지금 다운로드하세요!