Nginx PageSpeed 모듈 설치하기

1. Pagespeed 모듈이란?

구글에서 적극적으로 지원하고 있는 PageSpeed 모듈은 

활성화만 해도 자동으로 사이트를 최적화해주는 모듈입니다.

장점은 현재 홈페이지 소스에 전혀 변화가 없이, 캐시 폴더에만 해당 최적화 파일을 

생성하여 자동으로 적용해주는데 있습니다.

저는 Nginx를 쓰고 있기 때문에 ngx_pagespeed 모듈을 넣었구요.

ngx_pagespeed를 적용하는 방법에 대해 적어보겠습니다.

2. 소스 다운받기

우분투에는 패키지가 없기 때문에 Nginx와 함께 소스 컴파일 설치를 해야 합니다.

기존에 패키지 설치만 해보신 분들은 어렵게 느껴질수도 있습니다. ㅠㅠ

cd /usr/local/src 

소스 저장소로 자주 쓰이는 폴더로 이동합니다. 

우선 소스를 받기 전에 현재 최신 베타버전을 알아야 합니다.

해당 버전을 지정해두고 진행하기 때문입니다.

https://developers.google.com/speed/pagespeed/module/release_notes

위 링크로 들어가보면, 2016년 12월 30일 현재 Release 1.12.34.2-beta 가 최신버전인 것을 볼 수 있습니다.

비교해보니 beta와 stable의 차이는 거의 없는 것 같습니다. 어짜피 새로운 버전이 곧 베타로 나오니

stable을 굳이 안써도 될 것 같습니다. 공식 매뉴얼에서도 stable의 존재는 언급을 안하더군요.

혹시나 나는 꼭 stable 버전을 쓰고 싶다 라고 하시는 분은

https://github.com/pagespeed/ngx_pagespeed/releases

위 링크에서 stable 버전을 받으면 됩니다.

다만 이 경우엔 밑의 형식에 맞게 파일 이름을 수정해주는게 진행하기에 편합니다.

저는 베타로 진행했습니다.

현재 버전이 1.12.34.2-beta 라는 것을 확인했습니다. 

이제 필요한 부분이 현재 버전입니다.

 1.12.34.2 <- 가 필요합니다.

이제 ssh 상에서 밑의 명령어를 넣어줍니다.

NPS_VERSION=1.12.34.2

위 명령어를 내리면 이제부터 NPS_VERSION이 들어가는 곳은 전부 자동으로 1.12.34.2 으로 변경됩니다.

혹시나 다음번에 소스 컴파일 설치를 한다면 다시 설정하면 되겠죠?

이제 본격적으로 ngx_pagespeed 소스를 받아봅시다.

https://developers.google.com/speed/pagespeed/module/build_ngx_pagespeed_from_source

매뉴얼로 설치하는 스크립트가 자주 바뀌므로 잘 안된다면 위 링크에서 바뀐 것이 있는 것입니다.

2016년 12월 30일 현재는 잘 됩니다.

wget https://github.com/pagespeed/ngx_pagespeed/archive/v${NPS_VERSION}-beta.zip

 

unzip v${NPS_VERSION}-beta.zip

 

rm -f v${NPS_VERSION}-beta.zip

 

cd ngx_pagespeed-${NPS_VERSION}-beta/

 

psol_url=https://dl.google.com/dl/page-speed/psol/${NPS_VERSION}.tar.gz

 

[ -e scripts/format_binary_url.sh ] && psol_url=$(scripts/format_binary_url.sh PSOL_BINARY_URL)

 

wget ${psol_url}

 

tar -xzvf $(basename ${psol_url})

 

cd ../

위와 같이 ngx_pagespeed와 해당 폴더 아래에 psol 소스도 같이 받습니다. 

pagespeed 쪽 소스 준비는 끝났습니다.

3. Nginx 소스 컴파일 설치

Nginx 소스 컴파일 옵션은 https://www.wsgvet.com/ubuntu/68 링크를 참조하시면 됩니다.

위 링크 기준으로 Nginx 컴파일 옵션에서 

--add-module=../ngx_pagespeed-${NPS_VERSION}-beta ${PS_NGX_EXTRA_FLAGS}

위 문구를 추가로 넣어주면 됩니다. 

./configure --with-cc-opt='-Wno-deprecated-declarations' --sbin-path=/usr/sbin/nginx --conf-path=/usr/local/nginx/nginx.conf --pid-path=/run/nginx.pid --with-openssl=../openssl-1.0.2j --with-http_ssl_module --with-http_realip_module --with-http_addition_module --with-http_sub_module --with-http_dav_module --with-http_flv_module --with-http_mp4_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_random_index_module --with-http_secure_link_module --with-http_stub_status_module --with-http_auth_request_module --with-http_xslt_module=dynamic --with-http_image_filter_module=dynamic --with-http_geoip_module=dynamic --with-http_perl_module=dynamic --with-threads --with-stream --with-stream_ssl_module --with-stream_realip_module --with-stream_geoip_module=dynamic --with-http_slice_module --with-mail --with-mail_ssl_module --with-file-aio --with-http_v2_module --add-module=../nginx-ct-master --add-module=../headers-more-nginx-module --add-module=../ngx_brotli 

--add-module=../ngx_pagespeed-${NPS_VERSION}-beta ${PS_NGX_EXTRA_FLAGS}

최종적으로 위와 같은 컴파일 옵션이 들어갑니다. 

4. 캐시폴더 생성하기

Nginx 컴파일 설치가 완료되면 캐시폴더를 생성해줍니다.

mkdir /usr/local/nginx/cache

위와 같은 형식으로 원하는 경로에 캐시 폴더를 생성합니다.

옵션 )

 

추천하는 경로는 여러군데가 있지만, 저는 해당 폴더를 램에 마운트 시켜줬습니다.

 

캐시 폴더를 생성 후 램에 마운트하면 램을 캐시폴더로 쓸 수 있습니다.

 

다만 램용량이 부족하다면 추천하지 않습니다. 생각보다 캐시 용량을 많이 차지하기 때문입니다.

 

저는 8GB 램인데 대략 2GB 정도로 셋팅하고 있습니다.

 

 

nano /etc/fstab

 

위 명령어로 들어가서

 

 

tmpfs /usr/local/nginx/cache tmpfs size=1000M,mode=0755 0 0

 

위와 같은 형식으로 캐시폴더 경로를 지정하면 됩니다. 

 

size=1000M 는 1GB 메모리를 잡는 것인데, 서버 사양에 맞춰서 수정해야 합니다.

 

그리고 홈페이지 전체 용량도 고려해봐야 합니다.

 

제 홈페이지 용량이 5GB 정도 되는데, 대부분이 gif 파일입니다.

 

따라서 gif를 컨버팅하는 옵션을 제외하니 대략 1GB를 캐시용량으로 쓰더군요.

 

이건 램용량에 맞게 설정 후 모니터링 해본 후 변경하는 것이 좋을 것 같습니다.

 

 

컨트롤 + O, 엔터, 컨트롤 + X 로 저장 후 

 

mount -a

 

위 명령어로 마운트시킬 수 있습니다.

 

마운트 해제하려면 

 

umount /usr/local/nginx/cache

 

위 명령어를 넣으면 마운트가 해제됩니다.

 

 

만약 램용량이 부족하다면 PASS 해주세요.

이제 Nginx가 이용할 수 있도록 캐시폴더에 권한을 줍니다. 

chown www-data:www-data /usr/local/nginx/cache

5. Nginx 옵션 설정하기

이제 pagespeed를 활성화 시켜봅시다.

기본적으로 nginx.conf 에 옵션을 넣습니다만, 독립적으로 server{ 에만 넣어도 정상 작동합니다.

nginx.conf의 http{ 블록에서

##

# Pagespeed Configs

##

 

pagespeed on;

pagespeed FileCachePath "/usr/local/nginx/cache/pagespeed";

pagespeed MessageBufferSize 100000;

pagespeed XHeaderValue "Powered By Pagespeed";

위와 같은 옵션을 넣어줬습니다. 

pagespeed on; 는 서버 전체에 pagespeed를 활성화시킨다는 말입니다.

이 옵션은 해당 server{ 에서 pagespeed off; 옵션을 넣어주면 비활성화됩니다.

pagespeed FileCachePath "/usr/local/nginx/cache/pagespeed"; 는 해당 폴더에 캐시파일을 저장한다는 뜻입니다.

pagespeed MessageBufferSize 100000; 는 메세지 로그의 버퍼사이즈를 지정하는 것입니다.

admin 콘솔에서 메세지를 바로 확인할 수 있습니다.

pagespeed XHeaderValue "Powered By Pagespeed"; 는 http 헤더에 해당 값을 넣어줍니다.

이것을 넣는 이유는, 기본적으로 pagespeed가 활성화되면 pagespeed의 버전이 출력됩니다.

그럴 경우 보안에 문제가 될 수 있기 때문에 버전을 삭제하는 효과가 있습니다.

service nginx restart

위와 같이 nginx를 재시작하면, 자동으로 pagespeed 모듈이 작동합니다. 

6. 필터 옵션

모든 옵션은 Core Filters 로 작동합니다.

https://developers.google.com/speed/pagespeed/module/config_filters

위 링크에 모든 필터에 대한 자세한 설명이 적혀있습니다.

add_head 

combine_css

combine_javascript

convert_meta_tags

extend_cache

fallback_rewrite_css_urls

flatten_css_imports

inline_css

inline_import_to_link

inline_javascript

rewrite_css

rewrite_images

rewrite_javascript

rewrite_style_attributes_with_url

위와 같은 옵션들이 자동으로 들어갑니다. 

해당 필터들은 구글에서 안전하다고 판단하는 것들이며, 

실제로 홈페이지 상의 표현되는 변화는 거의 없다고 보면 됩니다.

7. 코어필터에서 필요하지 않는 필터 비활성화 하기

pagespeed DisableFilters convert_to_webp_animated;

저는 위 옵션을 넣었습니다. 그 이유는 gif 움짤을 webp로 변화된 캐시파일을 생성하는데 

gif 용량이 많다보니 캐시파일의 대부분을 차지하게 되었습니다.

램에 마운트를 포기하고 해당 필터를 활성화하는게 좋을 것 같긴 하지만

램의 속도를 포기하고 싶지 않아서 비활성화했습니다. 이건 옵션이니 선택하시면 됩니다.

8. 코어필터가 아닌 필터 활성화 하기

pagespeed EnableFilters defer_javascript,insert_dns_prefetch,lazyload_images;

위 내용을 넣어 해당 필터들을 활성화해줬습니다. 

defer_javascript 필터는 페이지 로딩이 완료 될 때까지 HTML에서 자바 스크립트의 실행을 지연합니다.

insert_dns_prefetch 필터는 DNS resolution time을 줄여줍니다.

lazyload_images 필터는 스크롤을 해야 나타나는 이미지들을 로딩하지 않고, 스크롤하여 해당 이미지가 표시되면 로딩하는 것입니다.

하지만 그누보드에서는 잘 안되는 것 같네요. ㅠㅠ

해당 필터를 코어필터에 포함되지 않는데요. 추가적으로 제가 필요하다고 생각되어 넣어줬습니다.

https://developers.google.com/speed/pagespeed/module/config_filters#enabling

위 링크에 보시면 코어필터에 No라고 체크되어 있는 부분에서 필요한 필터를 활성화 시킬 수 있습니다.

9. 추가적으로 사이트 서버설정 server{ 에서 넣어줄 내용들

#Ensure requests for pagespeed optimized resources go to the pagespeed handler and no extraneous headers get set.

location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {

  add_header "" "";

}

location ~ "^/pagespeed_static/" { }

location ~ "^/ngx_pagespeed_beacon$" { }

위와 같은 내용을 넣어 pagespeed 모듈이 제대로 작동하게 해줍니다. 

pagespeed RespectVary on;

pagespeed FileCacheSizeKb            102400;

pagespeed FileCacheCleanIntervalMs   3600000;

pagespeed FileCacheInodeLimit        500000;

pagespeed LRUCacheKbPerProcess     8192;

pagespeed LRUCacheByteLimit        16384;

그리고 위와 같은 옵션을 추가로 넣어줬습니다. (이건 거의 기본값입니다.) 

pagespeed FileCacheSizeKb 102400; 이 부분이 중요한데, 나중에 나올 콘솔에서 

초반이 아닌 후반에 Cache misses가 높게 나오면 해당 숫자를 5배 가까이 높여달라고 합니다.

https://developers.google.com/speed/pagespeed/module/system#file_cache

나머지 부분들은 위 링크에 자세히 설명되어 있습니다.

10. 그누보드 관련 설정

location /plugin {

        pagespeed off;

   }

   location /adm {

        pagespeed off;

   }

저는 위와 같이 넣어서 플러그인, 관리자 폴더를 pagespeed 적용이 되지 않게 했습니다. 

그 이유는 에디터쪽 js도 작업이 되는데.. 작동이 안되더군요..

adm은 굳이 할 필요가 없다고 생각해서 넣어놨구요.

11. 콘솔 활성화하기

위와 같은 스샷들을 볼 수 있습니다.

#Pagespeed Admin configuration

pagespeed EnableCachePurge on;

location /ngx_pagespeed_statistics { allow 127.0.0.1; deny all; }

location /ngx_pagespeed_global_statistics { allow 127.0.0.1; deny all; }

location /ngx_pagespeed_message { allow 127.0.0.1; deny all; }

location /pagespeed_console { allow 127.0.0.1; deny all; }

location ~ ^/pagespeed_admin { allow 127.0.0.1; deny all; }

location ~ ^/pagespeed_global_admin { allow 127.0.0.1; deny all; }

pagespeed StatisticsPath /ngx_pagespeed_statistics;

pagespeed MessagesPath /ngx_pagespeed_message;

pagespeed ConsolePath /pagespeed_console;

pagespeed AdminPath /pagespeed_admin;

pagespeed Statistics on;

pagespeed StatisticsLogging on;

pagespeed LogDir /var/log/pagespeed;

pagespeed StatisticsLoggingIntervalMs 60000;

pagespeed StatisticsLoggingMaxFileSizeKb 1024;

위 내용들을 server{ 안에 넣으면 됩니다. 

주소/pagespeed_admin

위와 같은 형식으로 브라우저에 넣으면 해당 콘솔을 볼 수 있습니다.

allow 127.0.0.1; deny all; 옵션은 해당 IP로 접근하면 허용, 그 이외에는 거부합니다.

Cache purge 옵션으로 전체 캐시를 삭제할 수도 있으니 아무나 접근하면 안되겠죠?

IP는 현재 접속자의 IP를 넣으면 됩니다.

그 이외에 각 경로를 통하면 볼 수 있지만, 개인적으론 /pagespeed_admin 만 남기고

나머지는 전부 비활성화 해줬습니다.

그래서 제 옵션은

#Pagespeed Admin configuration

pagespeed EnableCachePurge on;

#location /ngx_pagespeed_statistics { allow 127.0.0.1; deny all; }

#location /ngx_pagespeed_global_statistics { allow 127.0.0.1; deny all; }

#location /ngx_pagespeed_message { allow 127.0.0.1; deny all; }

#location /pagespeed_console { allow 127.0.0.1; deny all; }

location ~ ^/pagespeed_admin { allow 127.0.0.1; deny all; }

#location ~ ^/pagespeed_global_admin { allow 127.0.0.1; deny all; }

#pagespeed StatisticsPath /ngx_pagespeed_statistics;

#pagespeed MessagesPath /ngx_pagespeed_message;

#pagespeed ConsolePath /pagespeed_console;

pagespeed AdminPath /pagespeed_admin;

pagespeed Statistics on;

pagespeed StatisticsLogging on;

pagespeed LogDir /var/log/pagespeed;

pagespeed StatisticsLoggingIntervalMs 60000;

pagespeed StatisticsLoggingMaxFileSizeKb 1024;

위와 같습니다. 

nginx를 재실행하여 해당 옵션들이 활성화되도록 한 후

주소/pagespeed_admin

위 주소로 들어가서 해당 콘솔들을 구경하면 됩니다.

개인적으로 console에 자주 들어가는데요.

그래프를 보면 어떤 부분이 문제가 있고, 해당 문제를 해결하려면 어떻게 해야하는지

doc 링크를 통해 나와있어서 좋습니다.

그리고 캐시폴더 용량을 주목하여 램에 캐시폴더를 생성하였다면 수정을 해야할 수도 있습니다.

12. 구글 pagespeed insights 점수 향상

pagespeed 모듈을 적용하기 전에는 60점대였는데, 적용 후 70~90점대로 향상되었습니다.

https://developers.google.com/speed/pagespeed/insights/ 

13. 후기

예전에 FastCgi_Cache를 적용(링크)했을 때와 또다른 속도 향상이 체감이 됩니다.

js, css, 이미지들을 자동으로 최적화해주니, PC에서는 사실 큰 체감은 없지만

모바일에서는 확실히 느껴지네요.

예를 들어 제 홈페이지의 경우 모바일에서 이동시 약간 버벅거리는 느낌이었다면

지금은 상당히 부드러워졌다는 것을 느낄 수 있습니다.

Nginx 소스 설치가 쉽진 않지만 한번 도전해보시면 아무것도 아닌 것을 깨달을 수 있습니다.

도전해보세요!!!

14. 참조 사이트

https://blog.outsider.ne.kr/1091 

https://github.com/pagespeed/ngx_pagespeed 

http://serverfault.com/questions/545136/remove-x-page-speed-version-from-headers-in-ngx-pagespeed 

https://www.digitalocean.com/community/tutorials/how-to-add-ngx_pagespeed-to-nginx-on-ubuntu-14-04