축소로 WordPress 사이트의 성능을 향상시키는 방법

사이트 속도는 거의 모든 사이트 소유자에게 영원한 관심사로 남아 있습니다. 사이트 속도를 개선할 수 있는 여러 가지 방법이 있지만 자주 간과되는(그러나 매우 효과적인) 기술인 최소화가 있습니다.

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

이 기사에서는 축소의 개념과 작동 방식을 소개합니다. 또한 코드를 사용하지 않고 이 방법을 직접 활용할 수 있는 몇 가지 방법을 보여줍니다. 시작하자!

축소 소개(및 도움이 되는 방법)

사이트 속도를 최적화할 수 있는 몇 가지 방법을 이미 알고 계실 것입니다. 오늘은 축소와 관련된 세부 사항에 초점을 맞추겠습니다.

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

당신이 코더가 아니라면 이것은 매우 복잡해 보일 수 있지만 걱정하지 마십시오. 축소는 실제로 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 축소기를 권장합니다.

이 도구는 코드를 압축하는 방법과 관련하여 많은 옵션을 제공하고 Google 승인도 받았기 때문에 특히 흥미롭습니다. 오른쪽의 설정을 사용하여 원하는 대로 최종 출력을 조정할 수 있습니다.

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

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

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

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

1. 자동 최적화

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

주요 특징들

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

가격: 플러그인은 무료이며 Autooptimize는 프리미엄 등급도 제공합니다.

2. 빠른 속도 축소

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

주요 특징들

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

가격: 플러그인은 완전히 무료이며 프리미엄 플랜이 필요하지 않습니다.

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

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

주요 특징들

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

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

결론

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

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

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

더 알고 싶으세요? WP Engine의 리소스 센터에서 이와 같은 수많은 유용한 콘텐츠를 찾거나 지금 WP Engine 담당자에게 질문에 대한 답변을 문의하십시오.