WordPress 사이트 속도를 높이기 위해 GZIP 압축을 활성화하는 방법

WordPress 사이트의 속도를 높이는 가장 쉬운 방법은 원치 않는 리소스를 모두 제거하는 것입니다. 속도를 높이는 두 번째로 쉬운 방법은 원하는 모든 리소스를 압축하는 것입니다. 웹 서버에서 GZIP 압축을 활성화하는 것은 이를 달성하는 가장 간단하고 효율적인 방법 중 하나입니다.

모든 최신 브라우저에는 기본적으로 GZIP 압축 지원이 포함됩니다. 그러나 문제 없이 압축된 리소스를 사용자에게 제공하려면 서버를 올바르게 구성해야 합니다.

이 게시물에서는 웹에서 데이터 압축의 기본 사항, GZIP 압축이 무엇인지, 다양한 이점 및 이를 사용하여 다양한 서버 설정에서 WordPress 사이트 속도를 높이는 방법을 배웁니다.

흥분한? 압축을 풀자!

비디오 버전을 보고 싶으십니까?

웹에서 데이터 압축의 기초

웹에서 데이터 압축은 웹사이트에서 전송되는 데이터의 크기를 줄이는 프로세스입니다. 데이터 유형(텍스트, 이미지, 스타일시트, 스크립트, 글꼴)에 따라 데이터를 압축하는 다양한 방법이 있습니다.

예를 들어 HTML, CSS 및 JavaScript의 축소는 브라우저에서 보내는 데이터의 양을 줄이는 간단한 방법입니다. 여기서 minifier는 소스 코드에서 주석, 공백과 같은 불필요한 문자를 제거하여 텍스트를 압축합니다.

간단한 HTML 문서의 아래 예에는 HTML 마크업, CSS 스타일 및 JavaScript 코드의 세 가지 콘텐츠 유형이 있습니다.

각 콘텐츠 유형에는 고유한 구문과 의미가 있습니다. 전체적으로 이 HTML 문서는 총 357자입니다.

 < html > < head > < style > /* kinsta-banner is used on the homepage only */ .kinsta-banner { font-size: 150% } .kinsta-banner { width: 75% } </ style > </ head > < body > <!-- kinsta banner START --> < div >...</ div > <!-- kinsta banner END --> < script > kinstaScripts(); // random scripts used on the page </ script > </ body > </ html >

위의 코드는 읽기 쉽고 따르기 쉽습니다. 개발에 이상적입니다. 그러나 브라우저가 주석을 읽고 완벽하게 들여쓴 태그를 가질 필요는 없습니다. 스마트 압축기는 이 문서를 분석하고 문서에서 불필요한 비트를 모두 제거할 수 있습니다.

 < html >< head >< style >.kinsta-banner{font-size:150%;width:75%}</ style ></ head >< body >< div >...</ div >< script >kinstaScripts();</ script ></ body ></ html >

축소 후 HTML 문서는 141자로 줄어듭니다. 이는 문자 수가 60.50% 절약 된 것입니다. 눈에는 쉽지 않지만 브라우저에는 중요하지 않습니다. 여전히 동일한 페이지가 사용자에게 표시됩니다.

두 버전을 모두 활용하려면 원본 문서를 "개발 버전"으로 유지하되 라이브로 푸시하기 전에 모든 코드를 축소할 수 있습니다.

대부분의 WordPress 성능 플러그인은 이를 자동으로 처리합니다.

예를 들어 jQuery 3.5.1 라이브러리의 압축되지 않은 버전은 동일한 파일의 축소된 버전보다 3배 이상 큽니다.

마찬가지로 위에서 설명한 동일한 압축 기술을 사용하여 이미지, 비디오, 글꼴 등과 같은 다른 콘텐츠 유형을 최적화할 수 있습니다. 이와 같은 콘텐츠별 축소는 웹사이트의 텍스트 기반 자산 크기를 최적화하는 첫 번째 단계입니다.

그러나 데이터 압축에는 단순한 축소 이상의 것이 있습니다. 고급 수학 기술을 사용하여 데이터 압축 알고리즘은 데이터 크기를 더욱 줄일 수 있습니다.

이러한 데이터 압축 방법의 가장 인기 있는 예 중 하나는 GZIP 입니다. 효율적인 데이터 전송을 가능하게 하고 인터넷을 실행 가능한 글로벌 통신 매체로 만드는 데 크게 기여했습니다.

GZIP 압축이란 무엇입니까?

GNU Zip 의 줄임말인 GZIP은 웹에서 가장 널리 사용되는 무손실 데이터 압축 방법입니다. 사이트의 HTML 페이지, 스타일시트 및 스크립트의 크기를 줄일 수 있습니다.

데이터 압축 알고리즘 외에도 GZIP은 파일 확장자( .gz )이자 파일 압축/압축 해제에 사용되는 소프트웨어입니다.

LZ77 인코딩과 Huffman 코딩 알고리즘이 혼합된 DEFLATE 알고리즘을 기반으로 합니다.

GZIP 압축기는 원시 데이터 세트를 가져와 손실 없이 압축합니다. 원시 데이터는 모든 파일 유형에서 가져올 수 있지만 GZIP은 텍스트 기반 자산(예: HTML, CSS, JS)에서 가장 잘 작동합니다.

다음 섹션에서는 GZIP 압축이 어떻게 작동하는지 자세히 설명합니다.

GZIP이 데이터를 압축하는 방법

우선 GZIP 압축기는 원시 데이터에서 LZ77 압축 알고리즘을 실행하여 중복을 제거합니다. 이 알고리즘은 미리 정의된 슬라이딩 윈도우(원시 데이터의 작은 부분)에서 반복되는 패턴을 찾는 방식으로 작동합니다.

그런 다음 반복되는 모든 문자열을 튜플로 바꿔 원시 데이터를 압축합니다.

위의 예에서 슬라이딩 창 크기는 13자(13바이트)에 불과합니다. 그러나 GZIP 압축은 최대 32KB(32,768바이트)의 슬라이딩 창 크기를 사용할 수 있습니다. 슬라이딩 윈도우의 크기는 LZ77 압축 성능에 중요한 역할을 합니다.

LZ77 알고리즘으로 원시 데이터를 압축한 후 GZIP 압축기는 Huffman 코딩 알고리즘을 사용하여 더 압축합니다. 더 자주 발생하는 문자에는 가장 적은 수의 비트를 할당하고 희귀 문자에는 가장 높은 수의 비트를 할당하여 이를 수행합니다.

이 기술은 모스 부호에서 사용되는 것과 유사하며, 영어에서 더 자주 발생하는 문자가 가장 짧은 시퀀스를 얻습니다.

Huffman 코딩 알고리즘이 작동하는 방식을 이해하려면 BOOKKEEPER 라는 단어를 고려하십시오. 길이는 10자이지만 고유한 문자는 6개뿐입니다. 이 단어는 단일, 이중 및 삼중 문자가 잘 혼합되어 있습니다.

거의 모든 웹 사이트는 UTF-8 문자 인코딩을 사용하여 문자와 기호를 나타냅니다. 영어 알파벳도 포함하는 UTF-8의 모든 ASCII 문자는 1바이트(8비트)를 사용합니다.

BOOKKEEPER 와 같은 10자 문자열에는 10바이트(80비트)의 메모리가 필요합니다. 문자 B , P , R 의 인스턴스 1개, 문자 O 및 K 의 인스턴스 2개 및 문자 E 의 인스턴스 3개가 포함되어 있음을 알 수 있습니다.

Huffman 코딩 알고리즘은 이 지식을 사용하여 문자열을 무손실 압축합니다. 모든 고유 문자를 리프로 사용하는 이진 트리를 생성하여 이를 수행합니다.

빈도가 가장 낮은 문자(예: B , P , R )는 트리 맨 아래에 있는 반면 자주 나타나는 문자(예: E , O , K )는 이상적으로는 맨 위에 있습니다.

트리의 최상위 노드는 루트 이고 해당 값은 문자열의 총 문자 수와 같습니다.

Huffman 트리를 생성한 후 모든 왼쪽 분기 및 오른쪽 분기 화살표에는 각각 0 과 1 의 숫자가 부여됩니다. 그런 다음 루트에서 리프 경로를 추적하고 모든 0 과 1 을 결합하여 모든 문자에 대한 Huffman 코드를 생성할 수 있습니다.

빈도가 가장 높은 문자에는 비트 크기가 가장 작은 허프만 코드가 있음을 알 수 있습니다.

참고: Huffman 코딩 알고리즘은 빈도가 동일한 문자에 대해 다른 순서 지정 전략을 사용하여 대체 이진 코드를 생성할 수 있습니다. 그러나 인코딩된 문자열의 총 크기는 동일하게 유지됩니다.

이는 원래 단어를 저장하는 데 필요한 메모리가 68.75% 감소한 것입니다.

0/1 규칙으로 허프만 트리를 사용하면 접두사 속성을 만족하는 이진 코드가 생성됩니다. 특정 문자의 Huffman 코드가 다른 문자 코드의 접두어가 아님을 확인하여 Huffman 트리를 사용하여 인코딩된 문자열을 쉽게 디코딩할 수 있습니다. 이것은 GZIP 압축 해제 속도에서 주요 역할을 합니다.

위의 단어와 마찬가지로 GZIP 압축기는 Huffman 코딩 알고리즘을 사용하여 LZ77 알고리즘에 의해 생성된 튜플을 추가로 최적화합니다. 그 결과 확장자가 .gz인 고도로 압축된 파일이 생성됩니다.

GZIP 작동 방식에 대해 자세히 알아보려면 이 비디오에서 간략한 개요를 참조하세요.

GZIP 압축은 얼마나 좋은가요?

일반적으로 GZIP은 작은 파일의 경우 약 70%의 압축률을 달성하지만 더 큰 텍스트 기반 자산의 경우 최대 90%에 이를 수 있습니다.

위의 표에서 GZIP으로 압축된 파일을 압축하면 파일 크기를 더 줄일 수 있음을 알 수 있습니다.

참고: GZIP으로 모든 파일 유형을 압축할 수 있지만 이미 다른 방법(예: 이미지, 비디오)으로 압축된 자산의 경우 절약할 수 없습니다. 때로는 파일 크기를 늘릴 수도 있습니다.

압축 알고리즘의 강점은 압축률뿐만 아니라 데이터를 얼마나 빠르고 효율적으로 압축 및 압축 해제할 수 있는지에 달려 있습니다. GZIP이 대부분의 사용 사례에 탁월한 이유입니다.

GZIP은 스트리밍 알고리즘을 사용하여 신속하게 압축을 풀기 때문에 속도가 핵심인 웹 프로토콜에 매우 적합합니다. 또한 GZIP은 데이터를 압축 및 압축 해제하는 데 최소한의 리소스를 사용하므로 서버와 클라이언트 모두에 이상적입니다.

위의 차트는 brotli , bzip2 , gzip 및 xz 압축 알고리즘의 압축 성능을 비교합니다. GZIP은 압축률 테스트에서 약간의 차이로 지고 있지만 압축 및 압축 해제 속도에서는 경쟁자를 완전히 압도합니다.

압축 속도 그래프를 보면 GZIP이 웹의 HTTP 서버 및 기타 데이터 스트림의 실시간 압축에 이상적이라는 결론을 내릴 수 있습니다. 웹 발전의 모든 장점을 고려하여 IETF는 GZIP을 HTTP/1.1 압축을 위한 세 가지 표준 형식 중 하나로 승인했습니다.

참고: zlib 라고 하는 GZIP 압축 라이브러리의 추상화는 많은 인기 있는 운영 체제(Linux, macOS, iOS) 및 최신 게임 콘솔(PlayStation 4, Wii U, Xbox One)에서 사용됩니다. 이미지 압축을 위해 무손실 PNG 파일 형식으로도 사용됩니다.

GZIP 압축의 6가지 장점

GZIP 압축의 가장 중요한 장점을 자세히 살펴보겠습니다.

적절한 압축 비율 제공

앞서 논의한 바와 같이 GZIP은 경쟁 제품에 비해 최고의 압축률을 가지고 있지 않습니다. 그러나 그들에게서도 그리 멀지 않습니다. 일반적으로 텍스트 기반 리소스의 크기를 70-90% 줄이는 데 도움이 될 수 있습니다.

초고속 압축 및 압축 해제

데이터 압축 및 압축 해제 속도의 경우 GZIP이 확실한 승자입니다. HTTP 서버 및 기타 데이터 스트림의 즉석 압축에 매우 바람직합니다.

매우 적은 메모리 필요

GZIP은 메모리 공간을 최소화하므로 메모리 용량이 제한된 서버 및 시스템에 적합합니다. 따라서 가장 저렴한 웹 호스팅 제공 업체에서도 지원합니다.

최악의 경우에도 크게 확장되지 않음

GZIP과 같은 무손실 데이터 압축 알고리즘에는 데이터를 압축할 수 없는 엄격한 제한이 있습니다.

일반적으로 리소스가 이미 잘 압축된 경우 또는 리소스가 작고 GZIP 사전을 추가하는 오버헤드가 압축 절약보다 높은 경우에 발생합니다. 우리는 이 현상을 엔트로피 인코딩이라는 개념에 기인할 수 있습니다. GZIP은 이 효과에 매우 강합니다.

무료 사용 및 오픈 소스

GZIP은 주로 초기 Unix 시스템에서 사용된 특허 받은 압축 프로그램에 대한 무료 오픈 소스 대체품으로 만들어졌습니다. 따라서 특허에 대한 부담이 없으며 누구나 자유롭게 사용할 수 있습니다.

보편적인 지원을 즐김

W3Techs에 따르면 GZIP 압축은 추적하는 모든 웹 사이트의 82% 에서 사용되며 웹에서 가장 널리 사용되는 압축 알고리즘입니다.

GZIP은 거의 모든 서버와 클라이언트에서 지원됩니다. 사이트를 호스팅하는 서버에 관계없이 GZIP을 활성화하여 속도를 높일 수 있습니다.

웹사이트 속도 테스트 도구의 GZIP 경고

축소 다음으로 GZIP을 활성화하는 것은 웹사이트에서 구현할 수 있는 가장 간단하고 효과적인 속도 최적화 중 하나입니다.

또한 WordPress를 최적화하는 가장 쉬운 방법 중 하나입니다. 그럼에도 불구하고 많은 WordPress 사이트에서 여전히 이를 사용하지 않습니다.

웹 사이트를 방문할 때 브라우저는 content-encoding: gzip 응답 헤더를 확인하여 웹 서버에 GZIP이 활성화되어 있는지 확인합니다. 헤더가 존재하면 압축된 파일을 검색하고 압축을 풀고 더 작은 파일을 자동으로 제공합니다.

브라우저가 GZIP 응답 헤더를 감지하지 못하면 압축되지 않은 파일을 다운로드합니다. 대부분의 경우 페이지 로드 속도의 차이는 몇 초가 될 수 있습니다. 따라서 GZIP을 활성화하지 않은 경우 웹사이트 속도 테스트 도구에 경고가 표시됩니다.

Google PageSpeed ​​Insights / Lighthouse의 GZIP 경고

웹사이트에서 텍스트 압축이 활성화되어 있지 않으면 Google PageSpeed ​​Insights에서 경고를 표시합니다.

참고: Google PageSpeed ​​Insights와 Google Lighthouse는 별도의 웹사이트 성능 테스트 도구였습니다. Google이 Lighthouse를 분석 엔진으로 사용하기 위해 PageSpeed ​​Insights를 업그레이드한 2018년까지 그들은 서로 독립적으로 일했습니다. 따라서 PageSpeed ​​Insights와 Lighthouse는 이제 하나이며 동일합니다.

위의 예제 사이트에서 텍스트 기반 리소스를 압축하면 페이지 무게를 78% 이상 줄이고 페이지 로드 시간을 2.1초 단축 할 수 있습니다.

참고: PageSpeed ​​Insights는 서버에서 브라우저로 반환한 응답 헤더에 의존합니다. 때로는 GZIP 압축이 활성화된 경우에도 잘못된 경고가 표시될 수 있습니다. 중간 프록시 서버 또는 보안 소프트웨어를 사용하는 시스템에서 속도 테스트를 실행하기 때문일 수 있습니다. 외부 서버에서 압축 파일을 다운로드하는 데 방해가 될 수 있습니다.

GTmetrix의 GZIP 경고

GTmetrix는 웹사이트가 압축된 텍스트 기반 리소스를 제공하지 않는 경우 경고를 표시합니다. Google PageSpeed ​​Insights와 마찬가지로 얻을 수 있는 잠재적 절감 효과도 표시됩니다.

참고: GTmetrix는 이전 PageSpeed ​​Insights 및 YSlow 라이브러리를 최신 Google Lighthouse 측정항목으로 교체하기 위해 속도 테스트 알고리즘을 업그레이드하고 있습니다. Lighthouse에서 표시한 것과 유사한 GZIP 압축 경고를 기대할 수 있습니다.

Pingdom 도구의 GZIP 경고

Pingdom 도구는 웹사이트 구성요소를 GZIP으로 압축하라는 간단한 경고를 표시합니다.

설명 섹션에서 Pingdom 도구는 GZIP의 중요성에 대한 몇 가지 통계도 제공합니다. 시원한 콩!

WebPageTest의 GZIP 경고

WebPageTest는 압축 가능한 응답이 가장 최적화된 방식으로 제공되지 않는 것을 감지하면 성능 검토 탭에 경고를 표시합니다.

WebPageTest는 또한 경고가 얼마나 심각한지 보여주기 위해 등급 점수를 제공합니다. 예를 들어 위의 경고를 100점 만점에 23점으로 평가하므로 우선적으로 해결해야 합니다.

GZIP 압축이 활성화되어 있는지 확인하는 방법

Accept-Encoding: gzip, deflate HTTP 헤더는 모든 최신 브라우저에서 효과적으로 지원됩니다. 따라서 Kinsta를 포함한 대부분의 웹 호스트는 기본적으로 모든 서버에서 GZIP 압축을 활성화합니다.

웹 서버는 브라우저에서 보낸 이 헤더를 볼 때 브라우저의 GZIP 지원을 인식하고 content-encoding: gzip 헤더를 사용하여 압축된 HTTP 응답으로 응답합니다.

그러나 다른 WordPress 호스팅 제공업체를 사용 중이거나 웹사이트가 GZIP 압축 콘텐츠를 제대로 제공하는지 확인하려는 경우 항상 활성화되어 있는지 확인하십시오.

다음은 GZIP 압축을 확인하는 몇 가지 간단한 방법입니다.

1. 온라인 GZIP 압축 테스트 도구

온라인 도구를 사용하는 것이 웹사이트에서 GZIP 압축이 활성화되어 있는지 확인하는 가장 쉬운 방법입니다. 무료 GZIP 압축 확인 또는 HTTP 압축 테스트 도구를 사용하는 것이 좋습니다. 웹사이트 URL을 입력하고 확인 또는 테스트 버튼을 누르기만 하면 됩니다.

이 두 온라인 도구는 모두 GZIP 활성화 여부와 GZIP 압축이 활성화된 테스트 URL을 제공하여 저장한(또는 저장할 수 있는) 데이터 전송량에 대한 간략한 보고서를 표시합니다.

첫 번째 도구는 웹사이트의 서버 유형, 콘텐츠 유형 및 압축 시간과 같은 기타 관련 정보도 표시합니다.

GZIP 최적화는 웹페이지에서 그치지 않고 스타일시트, 스크립트 및 글꼴과 같은 정적 텍스트 기반 자산도 포함합니다. CDN을 사용하여 이러한 자산을 제공하는 경우 CDN에서도 GZIP 압축이 활성화된 상태로 자산을 제공하는지 확인해야 합니다.

Cloudflare, Kinsta CDN, KeyCDN 및 CloudFront와 같은 대부분의 최신 CDN은 GZIP 압축을 지원합니다. 자산에 직접 연결하여 GZIP 압축을 위해 CDN에서 제공하는 자산을 테스트할 수 있습니다.

위의 보고서를 보면 Kinsta CDN이 기존의 pull CDN인 KeyCDN 엔진을 사용하고 있음을 알 수 있습니다. Kinsta를 사용하여 WordPress 사이트를 호스팅하는 경우 기본적으로 활성화되어 있으므로 GZIP 압축에 대해 걱정할 필요가 없습니다.

2. "content-encoding: gzip" HTTP 응답 헤더

웹사이트가 GZIP 압축 콘텐츠를 제공하는지 확인하는 두 번째 방법은 content-encoding: gzip HTTP 응답 헤더를 확인하는 것입니다.

Chrome DevTools 또는 Firefox 개발자 도구를 열고 네트워크 섹션에서 이 응답 헤더를 찾을 수 있습니다.

이전에 Chrome DevTools에서 어떻게 보이는지 이미 보여드렸습니다. Firefox 개발자 도구에서 보이는 방법은 다음과 같습니다.

Chrome DevTools 설정 패널에서 "큰 요청 행 사용" 옵션을 활성화하여 페이지의 원본 크기와 압축된 크기를 모두 볼 수도 있습니다. 아래에서 볼 수 있듯이 원본 페이지의 크기는 GZIP으로 압축한 후 118KB 에서 22.9KB 로 줄었습니다.

3. 웹페이지 속도 테스트 도구

대부분의 웹사이트 속도 테스트 도구는 웹페이지를 제공하기 위해 GZIP과 같은 압축을 사용하지 않는 것에 대해 경고합니다. 이 기사에 도착하는 많은 독자들은 정확히 이러한 GZIP 경고 때문에 올 것입니다.

PageSpeed ​​Insights, GTmetrix, Pingdom 도구 및 WebPageTest와 같은 도구를 사용하여 WordPress 웹사이트에서 GZIP 압축이 활성화되어 있는지 확인할 수 있습니다.

GZIP 압축을 활성화하는 방법

웹 서버에서 GZIP 압축을 활성화하지 않은 경우 활성화하는 방법에는 여러 가지가 있습니다. 정확한 방법은 웹사이트를 호스팅하는 데 사용하는 웹 서버에 따라 다릅니다.

중요: 항상 그렇듯이 사이트 및 서버 구성 파일을 편집하기 전에 백업하십시오.

WordPress 플러그인으로 GZIP 활성화

WordPress 사이트에서 GZIP 압축을 활성화하는 가장 쉬운 방법은 캐싱 또는 성능 최적화 플러그인을 사용하는 것입니다.

예를 들어 Apache 웹 서버에서 WordPress 사이트를 호스팅하는 경우 W3 Total Cache에는 브라우저 캐시 설정 패널에서 GZIP 압축을 활성화하는 옵션이 있습니다.

마찬가지로 WP Rocket을 사용하면 GZIP 압축 규칙을 자동으로 추가할 수 있습니다. 이 플러그인은 Apache의 mod_deflate 모듈을 .htaccess 파일에 추가하여 GZIP 압축을 활성화합니다.

WordPress 플러그인에는 웹 서버의 파일을 수정할 수 있는 권한이 필요합니다. 올바른 권한이 없으면 실패하거나 오류가 표시됩니다.

이러한 경우 호스팅 제공업체에 문의하거나 아래 코드 조각을 사용하여 웹 서버의 구성 파일을 수동으로 수정해야 합니다.

참고: Kinsta는 고성능, 안정성 및 보안을 위해 플랫폼을 최적화했습니다. 여기에는 모든 호스팅 계획에 대해 기본적으로 GZIP 압축을 활성화하는 것도 포함됩니다.

타사 캐싱 플러그인은 Kinsta의 내부 성능 최적화와 충돌을 일으킬 수 있으므로 Kinsta는 대부분의 플러그인을 서버에서 허용하지 않습니다. 자세한 내용은 Kinsta의 금지된 플러그인 전체 목록을 참조하세요.

Apache 웹 서버에서 GZIP 활성화

Netcraft에 따르면 Apache는 오늘날 사용 중인 다른 웹 서버보다 더 많은 활성 사이트를 제공합니다. 또한 WordPress에서 권장하는 두 가지 웹 서버 중 하나입니다.

Apache 서버에서 GZIP 압축을 활성화하려면 mod_filter 및 mod_deflate 모듈을 사용하고 올바른 지시문으로 적절하게 구성해야 합니다. 네트워크를 통해 클라이언트에 보내기 전에 서버 출력을 압축하도록 Apache에 지시합니다.

액세스 수준에 따라 Apache의 서버 구성을 편집하는 두 가지 옵션이 있습니다.

1. 기본 서버 구성 파일(일반적으로 httpd.conf 라고 함)에 액세스할 수 있는 경우 .htaccess 파일이 Apache 속도를 늦출 수 있으므로 이를 사용하여 Apache를 구성하는 것이 좋습니다.
2. 일반적으로 대부분의 WordPress 공유 호스팅 공급자의 경우인 기본 서버 구성 파일에 액세스할 수 없으면 .htaccess 파일을 사용하여 Apache를 구성해야 합니다.

호스팅 공급자가 주 서버 구성 파일을 편집하는 것을 거의 허용하지 않기 때문에 첫 번째 옵션은 sysadmins만을 위한 것입니다. 이렇게 하는 방법을 설명하는 것은 이 문서의 범위를 벗어납니다. 시작하려면 HTML5 Boilerplate 프로젝트 및 Apache 설명서에서 공유하는 샘플 Apache 서버 구성을 참조할 수 있습니다.

두 번째 옵션은 대부분의 WordPress 사이트 소유자에게 이상적입니다. 많은 공유 호스팅 제공업체에서 .htaccess 파일을 편집할 수 있기 때문입니다.

시작하려면 SFTP 또는 호스트의 온라인 파일 관리자를 사용하여 WordPress 사이트의 루트 디렉토리에서 .htaccess 파일을 찾으십시오. 그런 다음 아래 코드 스니펫을 추가합니다.

중요: mod_filter 모듈이 서버에서 활성화되어 있는지 확인하십시오. 대부분의 웹 호스트는 기본적으로 활성화되어 있지만 그렇지 않은 경우 AddOutputFilterByType 지시문이 작동하지 않고 HTTP 500 오류가 발생할 수 있습니다. 아래 코드 스니펫을 추가한 후 문제가 있는 경우 서버의 오류 로그를 확인할 수 있습니다.

 <IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for ancient browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>

.htaccess 파일의 기존 지시문 뒤에만 위의 코드를 추가하십시오. 파일을 저장한 다음 서버에서 GZIP 압축을 활성화하는지 확인합니다.

이제 웹 서버에서 위에 나열된 모든 파일 확장자에 대한 압축 파일을 제공해야 합니다. 앞에서 언급한 방법 중 하나를 사용하여 이를 확인할 수 있습니다.

클라이언트 측의 프록시 및 보안 소프트웨어가 GZIP 압축을 방해하지 않도록 하려면 위의 코드 조각을 아래의 코드 조각으로 바꿀 수 있습니다.

 <IfModule mod_deflate.c> # force compression for clients that mangle 'Accept-Encoding' request headers <IfModule mod_setenvif.c> <IfModule mod_headers.c> SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding </IfModule> </IfModule> # compress all output with one of the following file extensions <IfModule mod_filter.c> AddOutputFilterByType DEFLATE "application/atom+xml" \ "application/javascript" \ "application/json" \ "application/ld+json" \ "application/manifest+json" \ "application/rdf+xml" \ "application/rss+xml" \ "application/schema+json" \ "application/geo+json" \ "application/vnd.ms-fontobject" \ "application/wasm" \ "application/x-font-ttf" \ "application/x-javascript" \ "application/x-web-app-manifest+json" \ "application/xhtml+xml" \ "application/xml" \ "font/eot" \ "font/opentype" \ "font/otf" \ "font/ttf" \ "image/bmp" \ "image/svg+xml" \ "image/vnd.microsoft.icon" \ "text/cache-manifest" \ "text/calendar" \ "text/css" \ "text/html" \ "text/javascript" \ "text/plain" \ "text/markdown" \ "text/vcard" \ "text/vnd.rim.location.xloc" \ "text/vtt" \ "text/x-component" \ "text/x-cross-domain-policy" \ "text/xml" </IfModule> # define and map media types to their appropriate encoding type # Using SVG format (Scalable Vector Graphics) is highly recommended to # load logos, icons, text, and simple images. You can compress .SVG files # further using GZIP to create .SVGZ files. However, most browsers don't # know that they need to decompress them first if they're not served # without an appropriate 'content-encoding' HTTP response header. Thus, # these images wouldn't show up in the browser. Hence, this module. <IfModule mod_mime.c> AddType image/svg+xml svg svgz AddEncoding gzip svgz </IfModule> </IfModule>

코드 리포지토리로 이동하고 거기에 연결된 모든 리소스를 따르면 여기에 사용된 모든 지시문에 대해 자세히 알아볼 수 있습니다.

Nginx 웹 서버에서 GZIP 활성화

Netcraft에 따르면 Nginx는 웹 연결 컴퓨터에서 가장 많이 사용되는 웹 서버입니다. 현재 추세가 계속된다면 곧 Apache를 추월하여 활성 사이트에서 가장 많이 사용되는 웹 서버가 될 것입니다. Kinsta조차도 Nginx를 사용하여 WordPress용 성능 최적화 호스팅 솔루션을 강화합니다.

ngx_http_gzip_module에 정의된 지시문을 사용하여 Nginx 웹 서버에서 GZIP 압축을 활성화할 수 있습니다.

시작하려면 아래에 제공된 지시문을 nginx.conf 파일에 추가하십시오. 일반적으로 이 파일은 서버의 /etc/nginx/nginx.conf 위치에서 찾을 수 있습니다.

 # enables GZIP compression gzip on; # compression level (1-9) # 6 is a good compromise between CPU usage and file size gzip_comp_level 6; # minimum file size limit in bytes to avoid negative compression outcomes gzip_min_length 256; # compress data for clients connecting via proxies gzip_proxied any; # directs proxies to cache both the regular and GZIP versions of an asset gzip_vary on; # disables GZIP compression for ancient browsers that don't support it gzip_disable "msie6"; # compress outputs labeled with the following file extensions or MIME-types # text/html MIME-type is enabled by default and need not be included gzip_types application/atom+xml application/geo+json application/javascript application/x-javascript application/json application/ld+json application/manifest+json application/rdf+xml application/rss+xml application/vnd.ms-fontobject application/wasm application/x-web-app-manifest+json application/xhtml+xml application/xml font/eot font/otf font/ttf image/bmp image/svg+xml text/cache-manifest text/calendar text/css text/javascript text/markdown text/plain text/xml text/vcard text/vnd.rim.location.xloc text/vtt text/x-component text/x-cross-domain-policy;

사이트에서 대용량 JS 및 CSS 파일을 제공하는 경우 nginx.conf 파일에 다음 지시문을 추가하여 압축에 사용되는 버퍼 크기를 늘릴 수 있습니다.

 # sets the 'number' and 'size' of buffers for GZIP compression # default buffer size is 4K or 8K depending on the platform gzip_buffers 16 8k;

nginx.conf 파일을 저장한 후 Nginx를 다시 로드하는 것을 잊지 마십시오.

 sudo service nginx reload

마지막으로 서버에 GZIP 압축이 활성화되어 있는지 테스트해야 합니다. 모든 ngx_http_gzip_module 지시문의 최신 목록은 Nginx 문서를 참조하십시오.

IIS 웹 서버에서 GZIP 활성화

Microsoft의 인터넷 정보 서비스(IIS)는 오늘날 사용되는 세 번째로 인기 있는 웹 서버입니다. IIS는 주로 Windows에서 실행되는 엔터프라이즈 환경, 특히 회사별 인트라넷 및 엑스트라넷 서버를 설정하기 위해 배포됩니다.

다양한 호환성 문제로 인해 WordPress 사이트를 호스팅하는 데 거의 사용되지 않습니다.

그러나 IIS에서 GZIP 압축을 활성화해야 하는 드문 상황에 처한 경우 Microsoft 설명서를 참조하여 시작할 수 있습니다. 이 스택 오버플로 스레드가 도움이 될 수도 있습니다.

GZIP 압축의 대안

웹에서 데이터 압축의 세계는 항상 발전하고 있습니다. 평균 페이지 무게 크기가 지속적으로 증가함에 따라 웹 기술은 웹을 통한 데이터 전송을 보다 효율적으로 만들기 위해 이를 따라잡기 위해 노력하고 있습니다.

새로운 압축 알고리즘인 Brotli는 지난 몇 년 동안 널리 보급되었습니다. WOFF2 웹 글꼴 압축은 원래 Brotli의 주요 초점이었지만 이후 모든 유형의 데이터에 대한 압축을 지원하도록 확장되었습니다.

Brotli는 GZIP보다 데이터를 더 잘 압축하지만 데이터를 압축하는 데 훨씬 더 많은 시간과 리소스가 필요합니다. 그러나 압축 해제 시간은 GZIP과 비슷하지만 여전히 약간 느립니다.

오늘날 대부분의 브라우저는 Brotli를 지원하지만 WordPress 사이트에서 사용하는 것은 여전히 ​​다소 복잡합니다. Brotli를 지원하거나 Brotli 라이브러리를 설치할 수 있는 호스팅 제공업체를 통해 사이트를 호스팅해야 합니다. 대부분의 관리형 WordPress 호스트는 아직 완전히 지원하지 않지만 Cloudflare 또는 KeyCDN과 같은 CDN을 사용하는 경우 쉽게 활성화할 수 있습니다.

Brotli는 압축 정적 자산에 대한 큰 가능성을 보여줍니다. Akamai는 Brotli와 GZIP을 비교하는 자세한 기사를 게시했습니다. Brotli에 대해 자세히 알아보려면 여기를 확인하세요.

요약

A well-optimized web is great for everyone. Users love snappier websites, website owners love the reduced hosting charges, and web hosts love the optimization achieved on their servers. Compression techniques like GZIP are one of the best ways to speed up page load times for your visitors.

WordPress site owners can speed up their sites instantly by enabling GZIP compression. Kinsta enables it by default on all its servers, but for others, this article covers multiple ways to enable GZIP compression on various web servers.

Speed is critical for any website. Just compress!