Nginx 및 Gzip 모듈을 사용하여 웹 사이트 속도를 높이는 방법 알아보기
전 세계적으로 상당한 인터넷 속도를 사용할 수 있는 시대에도 웹 사이트 로드 시간을 최적화하려는 모든 노력은 두 팔 벌려 환영합니다.
이 기사에서는 압축을 통해 파일 크기를 줄여 전송 속도를 높이는 방법에 대해 설명합니다. 이 접근 방식은 프로세스에 사용되는 대역폭의 양을 줄이고 비용을 지불하는 웹 사이트 소유자의 비용을 저렴하게 한다는 점에서 추가적인 이점을 제공합니다.
위 단락에 명시된 목표를 달성하기 위해 이 기사에서는 Nginx 및 내장 gzip 모듈을 사용합니다. 공식 문서에 명시되어 있듯이 이 모듈은 잘 알려진 gzip 압축 방법을 사용하여 응답을 압축하는 필터입니다. 이렇게 하면 전송된 데이터의 크기가 절반 이상 압축됩니다.
권장 읽기: Nginx 웹사이트의 보안, 강화 및 성능 향상을 위한 궁극적인 가이드
이 게시물의 하단에 도달할 때쯤에는 Nginx를 사용하여 웹사이트와 애플리케이션을 제공하는 것을 고려해야 할 또 다른 이유를 갖게 될 것입니다.
Nginx 웹 서버 설치
Nginx는 모든 주요 최신 배포판에서 사용할 수 있습니다. 이 기사에서는 CentOS 7 가상 머신(IP 192.168.0.29)을 사용합니다.
아래 제공된 지침은 다른 배포판에서도 거의 수정하지 않고도 작동합니다. VM이 새로 설치되었다고 가정합니다. 그렇지 않으면 컴퓨터에서 실행 중인 다른 웹 서버(예: Apache)가 없는지 확인해야 합니다.
필수 종속 항목과 함께 Nginx를 설치하려면 다음 명령을 사용하세요.
----------- On CentOS/RHEL 7 and Fedora 22-24 -----------
yum update && yum install nginx
----------- On Debian and Ubuntu Distributions -----------
apt update && apt install nginx
설치가 성공적으로 완료되었는지, Nginx가 파일을 제공할 수 있는지 확인하려면 웹 서버를 시작하세요.
systemctl start nginx
systemctl enable nginx
그런 다음 웹 브라우저를 열고 http://192.168.0.29로 이동합니다(192.168.0.29를 서버의 IP 주소 또는 호스트 이름으로 바꾸는 것을 잊지 마세요). . 환영 페이지가 표시됩니다.
일부 파일 형식은 다른 파일 형식보다 더 잘 압축될 수 있다는 점을 명심해야 합니다. 일반 텍스트 파일(예: HTML, CSS 및 JavaScript 파일)은 매우 잘 압축되는 반면 다른 파일(.iso 파일, 타르볼, 이미지 등)은 본질적으로 이미 압축되어 있으므로 압축되지 않습니다.
따라서 Nginx와 gzip을 결합하면 전자의 전송 속도를 높일 수 있는 반면 후자는 성능 향상이 거의 또는 전혀 없을 것으로 예상됩니다. 모두.
gzip 모듈이 활성화되면 HTML 파일은 항상 압축되지만 다른 파일 형식은 일반적으로 웹사이트와 애플리케이션(즉, CSS 및 JavaScript)은 그렇지 않습니다.
gzip 모듈 없이 Nginx 웹사이트 속도 테스트
시작하려면 HTML, CSS 및 JavaScript 파일이 훌륭하게 조합된 완전한 Bootstrap 템플릿을 다운로드해 보겠습니다.
압축 파일을 다운로드한 후 서버 블록의 루트 디렉터리에 압축을 푼다(이것은 Apache 가상 호스트 선언의 DocumentRoot 지시문과 동일한 Nginx라는 점을 기억하세요). ):
cd /var/www/html
wget https://github.com/BlackrockDigital/startbootstrap-creative/archive/gh-pages.zip
unzip -a gh-pages.zip
mv startbootstrap-creative-gh-pages tecmint
/var/www/html/tecmint 내에 다음 디렉토리 구조가 있어야 합니다.
ls -l /var/www/html/tecmint
이제 http://192.168.0.29/tecmint로 이동하여 페이지가 올바르게 로드되는지 확인하세요. 대부분의 최신 브라우저에는 일련의 개발자 도구가 포함되어 있습니다. Firefox에서는 도구 → 웹 개발자 메뉴를 통해 열 수 있습니다.
우리는 특히 컴퓨터와 로컬 네트워크 및 인터넷 사이에서 진행되는 모든 네트워크 요청을 모니터링할 수 있는 네트워크 하위 메뉴에 관심이 있습니다.
권장 읽기: Nginx 성능을 최대 10배까지 높이려면 Mod_Pagespeed를 설치하세요.
개발자 도구에서 네트워크 메뉴를 여는 단축키는 Ctrl + Shift + Q입니다. 해당 키 조합을 누르거나 메뉴 표시줄을 사용하여 엽니다.
HTML, CSS, JavaScript 파일의 전송을 검사하는 데 관심이 있으므로 하단에 있는 버튼을 클릭하고 페이지를 새로 고치세요. 기본 화면에는 모든 HTML, CSS 및 JavaScript 파일 전송에 대한 세부정보가 표시됩니다.
크기 열(개별 파일 크기 표시) 오른쪽에 개별 전송 타이밍이 표시됩니다. 특정 파일을 두 번 클릭하면 타이밍 탭에서 자세한 내용을 볼 수도 있습니다.
gzip 모듈을 활성화한 후 동일한 전송과 비교할 수 있도록 위 이미지에 표시된 타이밍을 기록해 두십시오.
Nginx에서 gzip 모듈 활성화 및 구성
gzip 모듈을 활성화하고 구성하려면 /etc/nginx/nginx.conf를 열고 아래 이미지에 표시된 대로 기본 서버 블록을 찾은 후 다음을 추가하거나 수정합니다. 줄(끝에 세미콜론을 잊지 마세요. 그렇지 않으면 Nginx가 나중에 다시 시작할 때 오류 메시지를 반환합니다!)
root /var/www/html;
gzip on;
gzip_types text/plain image/jpeg image/png text/css text/javascript;
gzip 지시문은 gzip 모듈을 on 또는 off하는 반면, gzip_types는 모듈이 처리해야 하는 모든 MIME 유형을 나열하는 데 사용됩니다.
MIME 유형에 대해 자세히 알아보고 사용 가능한 유형을 보려면 Basics_of_HTTP_MIME_types로 이동하세요.
Gzip 압축 모듈을 사용하여 Nginx 웹사이트 속도 테스트
위 단계를 완료한 후 Nginx를 다시 시작하고 Ctrl + F5를 눌러 페이지를 다시 로드합니다(이 역시 Firefox에서 작동하므로 다른 브라우저를 사용하는 경우 먼저 해당 문서를 참조하여 캐시를 무시하고 전송 시간을 관찰해 보겠습니다.
systemctl restart nginx
네트워크 요청 탭에는 몇 가지 중요한 개선 사항이 표시됩니다. 우리 컴퓨터와 192.168.0.29 사이의 전송이라는 점을 염두에 두고 직접 확인하려면 타이밍을 비교해 보세요. (Google 서버와 CDN 사이의 전송은 우리가 이해할 수 없습니다.)
예를 들어, gzip을 활성화하기 전/후에 다음과 같은 파일 전송 예시를 살펴보겠습니다. 타이밍은 밀리초 단위로 제공됩니다.
index.html(목록 상단의/tecmint/로 표시): 15/4Creative.min.css: 18/8jquery.min.js: 17/7
이것이 Nginx를 더욱 사랑하게 만들지 않나요? 제가 아는 한 그렇습니다!
권장 읽기: Apache 웹 서버 성능을 향상시키는 5가지 팁
요약
이 기사에서는 Nginx gzip 모듈을 사용하여 파일 전송 속도를 높일 수 있음을 시연했습니다. gzip 모듈의 공식 문서에는 살펴볼 수 있는 다른 구성 지시문이 나열되어 있습니다.
또한 Mozilla 개발자 네트워크 웹사이트에는 네트워크 요청에서 뒤에서 무슨 일이 일어나고 있는지 이해하기 위해 이 도구를 사용하는 방법을 설명하는 네트워크 모니터에 대한 항목이 있습니다.
언제나 그렇듯이, 이 기사에 대해 궁금한 점이 있으면 아래 의견 양식을 자유롭게 사용하십시오. 우리는 항상 여러분의 의견을 기다리고 있습니다!