[워드프레스 속도 개선] Nginx에 페이지스피드(mod_PageSpeed)설치 방법 두번째

번에 mod_PageSpeed를 다시 설치하려고 기존에 적용했던 [워드프레스 속도 개선] NGINX에 구글 페이지스피드(mod_PageSpeed)로 속도 개선 방법 를 다시 꺼내서 시도를 했는데 조금 씩 문제가 있어서 다른 방법을 찾아 보았습니다.

우성군(사이트에서 우성군이라고 칭하고 있습니다.)이 제안한 방식이 괜찮아서 이를 참조했습니다.

Nginx PageSpeed 모듈 설치하기

mod_PageSpeed가 좋은 툴이긴 하지만 시스템 특성을 많이 타는 것 같긴 합니다. 패키지 설치가 아니라 모듈을 추출해야하다보니 쉬운 것은 아닌 듯..

이 방법을 간단히 정리해서 같이 공유해 봅니다.

1. 작업 폴더로 이동하기

자기가 작업할 폴더로 이동합니다. 저는 주로 root밑에서 작업을 했는데요. 그러다보니 권한 문제에 종종 봉착해서 /usr/local/src에서 작업했습니다.

cd /usr/local/src

2. ngx_pagespeed 소스 다운 받기

소스를 받으려면 최신 버젼 확인해야 합니다.

아래로 들어가서 최신 버젼 확인 합니다.

최신 버젼 확인 PageSpeed Release Notes

2017년 5월 25일 현재 최신 버젼은 1.12.34.2-beta를 알 수 있습니다.

앞으로 1.12.34.2버젼을 많이 사용할 것이므로 이를 연결하는 명령을 줍니다.
즉 아래와 같은 명령을 주면 NPS_VERSION이 들어간 곳은 1.12.34.2로 변환된다고 합니다.

알면 참 편한 명령어입니다.

NPS_VERSION=1.12.34.2

아래는 ngx_pagespeed 소스 받는 명령어입니다.

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 ../

3. Nginx 소스 컴파일 설치

이제는 Nginx모듈을 설치해야 합니다.
마찬가지로 Nginx를 설치가 편한 폴더로 이동해서 합니다.

이동한 다음 여기서 기본 필수 패키지를 설치합니다.

cd /usr/local/src 
apt-get install build-essential libpcre3 libpcre3-dev zlib1g-dev unzip git

Nginx 소스 파일을 다운받습니다.
당시 최신버젼은 1.13.0이었습니다. 버젼이 바뀌면 바뀐 버젼으로 변경하면 됩니다.

wget -c https://nginx.org/download/nginx-1.13.0.tar.gz

tar zxf nginx-1.13.0.tar.gz

rm -f nginx-1.13.0.tar.gz

이제 Nginx 컴파일을 설치합니다.

cd nginx-1.13.0

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

make
make install

여기서 제대로 설치가 안되는 경우는 아래에서 제안하는 모든 것으로 제대로 설치 후 아래 옵션을 진행해 보시기 바랍니다.

Nginx 소스 컴파일 설치 및 HTTPS 설정하기 우분투 16.04

• 클라우드 플레어 SSL 패치 설치 및 ChaCha20 / Poly1305 적용
• 인증서 투명성 모듈 설치
• headers-more-nginx-module 설치
• 브로틀리 압축(ngx_brotli) 설치
• ngx_brotli 소스 다운로드

cd nginx-1.13.0

./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}

make
make install

4. 최적화 세팅

nginx.conf에서 아래와 같은 옵션을 사용했습니다.

   # enable pagespeed module on this server block
    pagespeed on;              

    # let's speed up PageSpeed by storing it in the super duper fast memcached
    pagespeed MemcachedThreads 1;
    pagespeed MemcachedServers "localhost:11211";

    # This setting should be enabled when using HTTPS
    # Take care when using HTTP > HTTPS redirection to avoid loops
    pagespeed MapOriginDomain http://happist.com https://happist.com;


    # show half the users an optimized site, half the regular site
    pagespeed RunExperiment on;
    pagespeed AnalyticsID **-********-1;
    pagespeed ExperimentVariable 1;
    pagespeed ExperimentSpec "id=1;percent=50;level=CoreFilters;enabled=collapse_whitespace,remove_comments;";
    pagespeed ExperimentSpec "id=2;percent=50";

    pagespeed EnableFilters extend_cache;
    pagespeed JpegRecompressionQuality 65;

    # Filter settings
    pagespeed RewriteLevel CoreFilters;
    pagespeed EnableFilters collapse_whitespace,remove_comments;

    pagespeed EnableFilters prioritize_critical_css;
    pagespeed EnableFilters inline_javascript;
    pagespeed EnableFilters defer_javascript;
    pagespeed EnableFilters combine_css,combine_javascript;
    pagespeed EnableFilters collapse_whitespace;
    pagespeed EnableFilters insert_dns_prefetch;
    pagespeed EnableFilters collapse_whitespace,remove_comments;
    pagespeed EnableFilters make_google_analytics_async,make_show_ads_async;
    pagespeed EnableFilters rewrite_css,rewrite_javascript;  # enable CSS, Javascript optimization
    pagespeed EnableFilters sprite_images;
    pagespeed EnableFilters rewrite_images;  # enable image optimization
    pagespeed EnableFilters convert_png_to_jpeg,convert_jpeg_to_webp;
    pagespeed EnableFilters resize_mobile_images;
    pagespeed EnableFilters lazyload_images;

    # needs to exist and be writable by nginx  755로 되어 있음 
    # cache 비우는 방법 Flushing PageSpeed Sever-ide Cache
    # rm -rf /var/ngx_pagespeed_cache/* or touch /var/ngx_pagespeed_cache/cache.flush
    # ngxrestart
    pagespeed FileCachePath /var/ngx_pagespeed_cache;

    pagespeed FileCacheSizeKb            1024000000;  # cache를 적용 후 다 차면 비운다
    pagespeed FileCacheInodeLimit        50000000;
    pagespeed CssFlattenMaxBytes 5120;
    pagespeed LRUCacheKbPerProcess     8192;
    pagespeed LRUCacheByteLimit        16384;


    # onfiguring SSL Certificates
    pagespeed SslCertDirectory directory;
    pagespeed SslCertFile file;

    pagespeed RewriteLevel CoreFilters;

    pagespeed FetchWithGzip on;