NGINX Plus용 Google PageSpeed Dynamic Module로 웹사이트 최적화

웹 페이지의 평균 크기가 계속해서 커짐에 따라, 어떤 기기를 사용하든 사용자에게 좋은 경험을 제공하기 위해 웹사이트의 디자인, 개발, 제공의 모든 측면을 최적화하는 것이 점점 더 중요해지고 있습니다. 페이지 로드 시간이 사용자 경험과 수익에 영향을 미친다는 것은 잘 알려진 사실 입니다.

Google PageSpeed 는 웹사이트 성능을 측정하고 최적화하기 위한 도구 모음으로, NGINX 오픈 소스로 컴파일할 수 있는 타사 모듈 로 수년 동안 제공되어 왔습니다. NGINX Plus R11에 동적 모듈이 도입되면서 이제 NGINX Plus 사용자도 PageSpeed의 이점을 활용할 수 있습니다.

NGINX Plus에 PageSpeed를 동적 모듈로 로드하면 웹사이트의 리소스가 자동으로 다시 작성되고 최적화됩니다. 이 블로그 게시물에서는 동적 모듈을 빌드하고 구성하는 방법을 설명합니다. (PageSpeed는 타사 모듈이므로 NGINX Plus 지원 계약의 적용을 받지 않습니다.)

NGINX Plus를 위한 동적 모듈로서 PageSpeed 빌드 및 로딩

다음 지침은 Google의 수동 설치 지침을 기반으로 하며 NGINX Plus와의 바이너리 호환성에 맞춰 조정되었습니다. (NGINX 오픈 소스에서 작동하는 동적 모듈을 빌드하기 위해 Google의 지침을 그대로 사용할 수 있습니다.)

0단계: 빌드 환경 준비

우리는 여러분이 별도의 시스템, 즉 "빌드 환경"에서 동적 모듈을 컴파일할 것을 강력히 권장합니다. 그렇게 하면 NGINX Plus를 PageSpeed 모듈과 함께 실행할 시스템의 위험과 복잡성이 최소화됩니다(이를 "프로덕션 환경"이라고 합니다). 빌드 환경은 프로덕션 환경과 동일한 운영 체제 및 버전을 가져야 합니다 . 또한 다음 구성 요소를 설치해야 합니다.

• 압축 해제 유틸리티
• 컴파일러와 유틸리티 만들기
• Perl 호환 정규 표현식 라이브러리(개발 파일)
• Zlib 압축 라이브러리(개발 파일)

빌드 환경에 이러한 필수 구성 요소가 설치되어 있는지 확인하려면 다음 명령을 실행하세요.

• Ubuntu/Debian의 경우:

  $ sudo apt-get install unzip gcc make libpcre3-dev zlib1g-dev

• CentOS/RHEL/Oracle Linux의 경우:

  $ sudo yum install unzip gcc make pcre-devel zlib-devel

1단계: NGINX 오픈소스 얻기

1. 프로덕션 환경에서 작업하는 경우 다음 명령을 실행하여 실행 중인 NGINX Plus 릴리스에 해당하는 NGINX 오픈 소스 버전을 식별합니다. 이 출력에서는 주황색으로 강조 표시됩니다. NGINX Plus R11에 해당하는 NGINX 1.11.5.

   $ nginx -v nginx 버전: nginx/1.11.5 (nginx-플러스-r11)

2. 빌드 환경에서 작업하여 적절한 NGINX 오픈 소스 버전에 대한 소스를 다운로드하세요.

   $ wget -qO - http://nginx.org/download/nginx-1.11.5 .tar.gz | tar zxfv -

2단계: PageSpeed 소스 다운로드 및 준비

빌드 환경에서 다음 단계를 수행합니다.

1. 릴리스 노트 에서 PageSpeed 모듈의 최신 버전 번호를 찾거나 이 명령을 실행하세요.

   $ curl -sS https://modpagespeed.com/doc/release_notes | grep release_ | head -1 | sed -e "s/^.*release_([0-9.]*)-beta.*/1/"

2. PageSpeed 버전 번호는 빌드 명령에서 여러 번 사용되므로 NPS_VERSION 이라는 환경 변수로 설정합니다. 버전 문자열에는 ‑stable 또는 ‑beta 접미사가 아닌 숫자 부분만 포함합니다.

   $ NPS_VERSION= 숫자-버전-문자열

3. 다음과 같이 소스를 다운로드하고 추출합니다. 이러한 명령은 스크립트처럼 순차적으로 실행되어야 합니다.

   wget https://github.com/pagespeed/ngx_pagespeed/archive/v${NPS_VERSION} -beta.zip 압축 해제 v${NPS_VERSION} -베타.zip cd ngx_pagespeed-${NPS_VERSION} -beta/ psol_url=https://dl.google.com/dl/page-speed/psol/${NPS_VERSION} .tar.gz [ -e 스크립트/포맷_바이너리_url.sh ] && psol_url=$(스크립트/포맷_바이너리_url.sh PSOL_바이너리_URL) wget${psol_url} tar -xzvf $(기본 이름${psol_url} ) # psol/에 추출

3단계: PageSpeed 동적 모듈 컴파일

1. 빌드 환경에서 작업하여 --with-compat 인수와 함께 NGINX 구성 스크립트를 먼저 실행하여 PageSpeed 동적 모듈을 컴파일합니다. 이렇게 하면 동적 모듈이 NGINX Plus와 바이너리 호환될 수 있습니다. 그런 다음 make modules를 실행하여 모듈만 컴파일합니다.

   $ cd ../nginx-1.11.5 $ ./configure --add-dynamic-module=../ngx_pagespeed-${NPS_VERSION} -beta --with-compat $ 모듈 만들기

2. 빌드 프로세스는 동적 모듈을 objs/ngx_pagespeed.so 로 생성합니다. 빌드 환경에서 .so 파일을 프로덕션 환경의 모듈 디렉토리, /etc/nginx/modules 로 복사합니다. 파일을 복사할 때 NGINX 오픈 소스 버전 번호를 포함하도록 파일 이름을 바꾸는 것이 좋습니다(예: ngx_pagespeed_1.11.5.so ). (다음 단계에서는 그렇게 가정합니다.)

3. 프로덕션 환경에서 작업하는 경우 버전 번호가 매겨진 파일 이름과 일반(원본) 파일 이름 사이에 심볼릭 링크를 만듭니다.

   $ cd /etc/nginx/modules $ sudo ln -s ngx_pagespeed_1.11.5.so ngx_pagespeed.so $ ls -gG -rw-r--r-- 1 11924784 2월 6일 오전 11시 52분 ngx_pagespeed_1.11.5.so lrwxrwxrwx 1 23 2월 6일 오전 11시 52분 ngx_pagespeed.so -> ngx_pagespeed_1.11.5.so

4단계: PageSpeed Dynamic 모듈 로딩

다음 단계는 프로덕션 환경에서 수행합니다.

1. PageSpeed를 동적 모듈로 로드하려면 load_module 지시문을 포함합니다. 지시문은 nginx.conf 구성 파일의 최상위("main") 컨텍스트에 나타나야 합니다(즉, http 또는 stream 컨텍스트에는 나타나지 않아야 함).

   로드_모듈 모듈/ngx_pagespeed.so;

2. PageSpeed 자체는 http 컨텍스트에서 구성되므로 이러한 지침을 /etc/nginx/conf.d 디렉토리의 pagespeed.conf 라는 새 구성 파일에 넣으세요. PageSpeed는 proxy_pass 지시문에 지정된 웹사이트(여기서는 http://www.example.com ) 에 대해 활성화됩니다.

   페이지 속도 메시지 버퍼 크기 10240;
   페이지 속도 파일 캐시 경로 /var/ngx_pagespeed_cache;
   
   서버 {
   수신 80;
   위치 / {
   프록시_패스 http://www.example.com; 
   }
   페이지 속도 켜짐;
   }

3. NGINX Plus를 다시 로드하여 실행 중인 인스턴스에 PageSpeed 모듈을 로드합니다.

   $ sudo nginx -s 다시 로드

PageSpeed Insights를 사용하여 NGINX Plus PageSpeed 모듈 테스트

PageSpeed Insights는 모바일 및 데스크톱 기기 모두에서 웹 페이지에 적용된 최적화 수준을 측정하기 위해 Google에서 제공하는 별도의 도구입니다. 두 기기에 대한 점수와 페이지 로드 속도를 높이는 방법에 대한 제안이 제공됩니다. 이는 사이트를 측정하고 PageSpeed 모듈의 효율성을 입증하는 데 유용한 도구입니다.

PageSpeed Insights를 사용하면 PageSpeed를 활성화한 경우와 비활성화한 경우 사이트 점수와 최적화 제안을 비교할 수 있습니다. 사이트에서 PageSpeed 모듈의 효율성을 측정하려면 pagespeed on; 및 pagespeed off; 지침을 바꿔보세요.

PageSpeed는 추가적인 구성이나 튜닝 없이 최적화를 적용합니다. 그러나 사이트에서 수행되는 최적화에 대해 더 많은 제어를 원하는 경우 PageSpeed 설명서를 참조하세요.

NGINX Plus와 함께 PageSpeed를 직접 사용해 보세요. 오늘 무료 30일 평가판을 시작하거나 사용 사례에 대해 논의하기 위해 저희에게 문의하세요 .