이번 서버를 새롭게 세팅해보면서 기존에 알고 있고, 적용해왔던 방식에 대해서 다시 한번 되돌아보는 계기가 되었습니다.
귀차니즘으로 더 나은 방법 찾는 것을 게을러하고 기존 방식을 고수했다는 반성을 했습니다.
사이트 속도 개선 방법으로 구글에서 제안해 방법인 구글 페이지 스피드(ngx_PageSpeed)도 그 중 하나입니다.
오늘은 구글 페이지 스피드(ngx_PageSpeed) 적용 방법에 대해서 고민했던 내용을 기록을 겸해서 정리해 보겠습니다.
1. mod_pagespeed vs ngx_pagespeed
구글 페이지스피드를 적용하는 웹서버에 따라 모둘 이름이 다릅니다.
만약 아파치 웹서버에 적용하는 것을 mod_pagespeed라고 부릅니다. 웹서버가 NGINX라면 ngx_pagespeed라고 하죠.
구글 페이지스피드는 주고 아파치를 기준으로 개발되었습니다. 아파치가 웹서버에서 차지하는 비중이 높기 때문이죠.
그렇기에 아파치에서는 보다 쉽게 구글 페이지스피드 적용이 가능합니다. 그리고 쉽게 업데이트도 가능합니다.
이에 대해서는 공식 사이트 매뉴얼을 참고하시기 바랍니다.
Build mod_pagespeed From Source
반면에 Nginx에서는 좀 복잡한 과정을 거쳐야 합니다.
일반적인 방식이 컴파일한 Nginx 패키지를 만들고 이를 다시 페이지스피드와 컴피일을 하죠.
그리고 Nginx가 업데이트가 되면 다시 컴파일을 해야 합니다.
많이 붚편하죠.
마찬가지로 전반적인 내용은 아래 매유얼을 보시기 바랍니다.
Build ngx_pagespeed From Source
오늘 이야기는 아파치가 아닌 주로 소규모 사이트에서 널리 사용되는 Nginx에서 구글 페이지스피드를 적용하는 방법에 대해서 살펴 보겠습니다.
이 happist.com도 nginx를 적용하고 있거든요.
2. Nginx에서 구글 페이지스피드 모듈 적용 방법 2가지
Nginx에서 구글 페이지 스피드 적용 방법에는 두가지 있습니다. 하나는 일반적인 정적인 방식이고, 하나는 다이나믹 모듈이라고 불리우는 방식입니다.
2.1. 웹서버와 컴파일 방식
하나는 기존에 널리 알려진 방식대로 웹서버인 엔진엑스(Nginx)를 컴파일해서 Nginx 패미지를 만들고, 이를 다시 페이지스피드 모듈과 컴파일 시키는 방식입니다.
이는 기존에 소개한 [워드프레스 속도 개선] NGINX에 구글 페이지스피드(mod_PageSpeed)로 속도 개선 방법
에서 소개한 방식입니다.
이 방식은 새로운 nginx 버젼이 나오면 다시 설치를 해야합니다.
간단히 그 방법을 소개 하죠
2.1.1. ngx_pagespeed 소스 다운 → 컴파일
먼저 최신 ngx_pagespeed 소스를 확인합니다. 이는 아래 사이트에서 할 수 있습니다.
최신 버젼 확인, PageSpeed Release Notes
2018년 7월 25일 현재 최신 버젼은 1.13.35.2-stable입니다.
이를 아래와 같은 순서로 적용합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
apt–get install build–essential zlib1g–dev libpcre3 libpcre3–dev unzip uuid–dev
NPS_VERSION=1.13.35.2–stable
cd
wget https://github.com/apache/incubator–pagespeed–ngx/archive/v${NPS_VERSION}.zip
unzip v${NPS_VERSION}.zip
nps_dir=$(find . –name “*pagespeed-ngx-${NPS_VERSION}” –type d)
cd “$nps_dir”
NPS_RELEASE_NUMBER=${NPS_VERSION/beta/} # 베타 번젼 시 이를 사용
NPS_RELEASE_NUMBER=${NPS_VERSION/stable/} # stable 버젼 시 이를 사용
psol_url=https://dl.google.com/dl/page–speed/psol/${NPS_RELEASE_NUMBER}.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}) # extracts to psol/
|
cs |
2.1.2. Nginx 컴파일 및 페이지스피드와 컴파일
이제는 Nginx 모듈을 다운받아 컴파일 합니다.
마찬가지로 Nginx 버젼을 확입합니다. 2018년 7월 25일 현재 1.15.1이네요
|
1
2
3
4
5
6
7
8
9
10
|
NGINX_VERSION=1.15.1
cd
wget http://nginx.org/download/nginx–${NGINX_VERSION}.tar.gz
tar –xvzf nginx–${NGINX_VERSION}.tar.gz
cd nginx–${NGINX_VERSION}/
./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–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–threads ––with–stream ––with–stream_ssl_module ––with–stream_realip_module ––with–http_slice_module ––with–mail ––with–mail_ssl_module ––with–file–aio ––with–http_v2_module ––add–module=$HOME/$nps_dir ${PS_NGX_EXTRA_FLAGS}
make
make install
|
cs |
2.2. 다이나믹 모듈 방식
다이나믹 모듈 방식으로 페이지스피드를 컴파일해서 nginx에 적용하는 방식입니다.
이 경우 nginx 버젼이 업데이트트 되어도 그대로 적용할 수 있다고 합니다.
이에 대해서는 Optimize websites using Nginx PageSpeed Dynamic Module
에서 조금 자세하게 설명하고 있습니다.
이 방법은 다이나믹 모듈을 컴파일 한 후 /etc/nginx/modules에 복사 한 후 nginx.conf에서 반영시켜주는 순서로 진행됩니다.
2.2.1. 다이나믹 모듈을 컴파일
다이나믹 모듈을 컴파일 방법을 몇가지 소개해 봅니다.
구글 페이지스피드 설치 가이드
첫번째는 구글 페이지스피드 설치 가이드
에서 소개하는 방식입니다.
이는 위에서 소개한 일반 방식에서 일부 옵션만 변경한 것입니다.
먼저 ngx_pagespeed 소스 다운 → 컴파일해야죠.
ngx_pagespeed최신 버젼을 확인
합니다.
2018년 7월 25일 현재 최신 버젼은 1.13.35.2-stable인데요. 이를 아래와 같은 순서로 적용합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
apt–get install build–essential zlib1g–dev libpcre3 libpcre3–dev unzip uuid–dev
NPS_VERSION=1.13.35.2–stable
cd
wget https://github.com/apache/incubator–pagespeed–ngx/archive/v${NPS_VERSION}.zip
unzip v${NPS_VERSION}.zip
nps_dir=$(find . –name “*pagespeed-ngx-${NPS_VERSION}” –type d)
cd “$nps_dir”
NPS_RELEASE_NUMBER=${NPS_VERSION/beta/} # 베타 번젼 시 이를 사용
NPS_RELEASE_NUMBER=${NPS_VERSION/stable/} # stable 버젼 시 이를 사용
psol_url=https://dl.google.com/dl/page–speed/psol/${NPS_RELEASE_NUMBER}.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}) # extracts to psol/
|
cs |
다음으로는 Nginx 컴파일 및 페이지스피드와 컴파일 합니다.
마찬가지로 Nginx 버젼을 확입합니다. 2018년 7월 25일 현재 1.15.1이네요
|
1
2
3
4
5
6
7
8
|
NGINX_VERSION=[check nginx’s site for the latest version]
cd
tar -xvzf nginx-${NGINX_VERSION}.tar.gz
cd nginx-${NGINX_VERSION}/
./configure —add-dynamic-module=$HOME/$nps_dir ${PS_NGX_EXTRA_FLAGS}
make
make install
|
cs |
위 방식은 이상하게 우분투 18.04에서는 작용을 하지 않더군요.
NGIX 공식 사이트 설치 가이드
그래서 NGIX 공식 사이트에서 제공하는 방식을 응용했습니다.
Optimizing Your Website with the Google PageSpeed Dynamic Module for NGINX Plus
nginx 버젼을 확인 후 nginx를 다운 받습니다.
|
1
2
3
4
5
6
7
|
apt–get install unzip gcc make libpcre3–dev zlib1g–dev # 필요 모듈 설치
cd #루트로 이동
nginx –v # nginx 버젼 확인, nginx version: nginx/1.15.1
wget –qO – http://nginx.org/download/nginx–1.15.1.tar.gz | tar zxfv –
|
cs |
페이지스피드 모듈 준비
페이지스피드 버젼을 확인해 아래에 적용합니다. 2018년 7월 25일 현재 1.13.35.2-stable입니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
NPS_VERSION=1.13.35.2–stable
cd
wget https://github.com/apache/incubator–pagespeed–ngx/archive/v${NPS_VERSION}.zip
unzip v${NPS_VERSION}.zip
nps_dir=$(find . –name “*pagespeed-ngx-${NPS_VERSION}” –type d)
cd “$nps_dir”
NPS_RELEASE_NUMBER=${NPS_VERSION/stable/}
psol_url=https://dl.google.com/dl/page–speed/psol/${NPS_RELEASE_NUMBER}.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}) # extracts to psol/
|
cs |
페이지스피드 다이니믹 모듈 컴파일
다음으로 진행할 작업은 페이지스피드 다이니믹 모듈 컴파일입니다.
이를 위해서 먼저 다운 받았던 nginx 파일이 있는 곳으로 이동합니다.
|
1
2
3
|
cd /root/nginx–1.15.1
./configure ––add–dynamic–module=$HOME/$nps_dir ${PS_NGX_EXTRA_FLAGS} ––with–compat
make modules
|
cs |
2.2.2. 다이나믹 모듈 로딩
지금부터는 만들어진 페이지스피드 다이나믹 모듈을 로딩시키는 방법을 설명합니다.
먼저 만들어진 페이지스피드 모듈은 /root/nginx-1.15.1/objs 폴더에 ngx_pagespeed.so라는 이름으로 존재합니다.
이 페이지스피드 모듈을 /etc/nginx/modules로 복사합니다.
|
1
2
3
4
|
cd /root/nginx–1.15.1/objs
ls –l # ngx_pagespeed.so 파일이 제대로 생성되었는지 확인
cp /root/nginx–1.15.1/objs/ngx_pagespeed.so /etc/nginx/modules/ngx_pagespeed.so
|
cs |
다음으로는 nginx 환경 설정 파일인 nginx.conf의 맨위에 load_module modules/ngx_pagespeed.so; 를 추가 합니다.
|
1
2
3
4
|
load_module modules/ngx_pagespeed.so;
user www-data;
worker_processes auto;
|
cs |
그리고 제대로 작동하는지 테스트해 봅니다.
|
1
2
|
nginx -t # 사전 테스트를 해보고 문제가 있는지 확인
service nginx restart # 사전 테스트에서 문제가 없으면 nginx를 다시 시작
|
cs |
3. Nginx 구글 페이지스피드 세팅
여러 번 설명했듯 제가 적용한 구글 페이지스피드 세팅입니다.
기본적으로 nginx 기본 환경 설정하는 nginx.conf에서 옵션을 정의합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
## enable pagespeed module on this server block
pagespeed on;
## Cache setting
pagespeed FileCachePath /var/ngx_pagespeed_cache;
pagespeed FileCacheSizeKb 20096000; # cache를 적용 후 다 차면 비운다
pagespeed FileCacheInodeLimit 50000000;
pagespeed CssFlattenMaxBytes 102400;
pagespeed LRUCacheKbPerProcess 8192;
pagespeed LRUCacheByteLimit 16384;
pagespeed DefaultSharedMemoryCacheKB 75000;
## Speed up PageSpeed by storing it in the super duper fast memcached
#pagespeed MemcachedThreads 1;
#pagespeed MemcachedServers ”localhost:11211”;
## PageSpeed Cache Purge
pagespeed EnableCachePurge on;
pagespeed PurgeMethod PURGE;
pagespeed DownstreamCacheRewrittenPercentageThreshold 95;
# 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
# service nginx restart
## Filter settings
pagespeed EnableFilters responsive_images ;
pagespeed EnableFilters convert_to_webp_animated ;
pagespeed EnableFilters resize_mobile_images ;
#pagespeed EnableFilters lazyload_images; # 이는 트래픽 절감용으로 최근에는 트래픽절약용이 아니라면 사용하지 말라고 가이드 됨
#pagespeed EnableFilters move_css_above_scripts;
#pagespeed EnableFilters outline_css ;
pagespeed EnableFilters remove_quotes ;
pagespeed EnableFilters collapse_whitespace;
pagespeed EnableFilters in_place_optimize_for_browser ;
# 이미지관련 대부분이 Core에 기본으로 들어가 있음, 사용하지 않으려면 비활성화 해야 함 예를 들어 pagespeed DisableFilters convert_to_webp_animated; 기본 rewrite_images, convert_jpeg_to_progressive, convert_png_to_jpeg, convert_jpeg_to_webp, convert_to_webp_lossless, inline_images, recompress_images, recompress_jpeg, recompress_png, recompress_webp, convert_gif_to_png, strip_image_color_profile, strip_image_meta_data, jpeg_sampling, resize_images, resize_rendered_image_dimensions,
#JS
#pagespeed EnableFilters rewrite_javascript ; # rewrite_javascript is equivalent to #enabling both rewrite_javascript_inline and rewrite_javascript_external
#pagespeed EnableFilters combine_javascript;
#pagespeed UseExperimentalJsMinifier on; 미니 파이어는 기본 작동, 이 옵션은 이전 버젼용임
#pagespeed EnableFilters defer_javascript; # 페이지 로딩 완료 시까지 자바 실행 지연
pagespeed EnableFilters insert_dns_prefetch; # DNS resolution time 축소
pagespeed EnableFilters insert_ga; # pagespeed EnableFilters make_show_ads_async; 는 불필요 이미 동기 실행
pagespeed AnalyticsID UA––;
pagespeed EnableFilters make_google_analytics_async;
## Tuning the Filters
pagespeed CssImageInlineMaxBytes 0;
pagespeed CssInlineMaxBytes 2048;
pagespeed CssOutlineMinBytes 3000;
pagespeed ImageInlineMaxBytes 3072;
pagespeed ImageJpegNumProgressiveScans –1;
pagespeed ImageJpegNumProgressiveScansForSmallScreens –1;
pagespeed ImageLimitOptimizedPercent 100;
pagespeed ImageLimitResizeAreaPercent 100;
pagespeed ImageRecompressionQuality 80;
pagespeed ImageResolutionLimitBytes 32000000;
pagespeed JpegRecompressionQuality –1;
pagespeed JpegRecompressionQualityForSmallScreens 80;
pagespeed WebpRecompressionQuality 85;
pagespeed WebpAnimatedRecompressionQuality 80;
pagespeed WebpRecompressionQualityForSmallScreens 80;
pagespeed JsInlineMaxBytes 2048;
pagespeed JsOutlineMinBytes 3000;
pagespeed MaxInlinedPreviewImagesIndex –1;
pagespeed MinImageSizeLowResolutionBytes 3072;
pagespeed RewriteRandomDropPercentage 0;
|
cs |
추가적으로 사이트 서버 설정에는 server 다음과 같은 설정을 주었습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
## Ngx_pagespeed Console관련
pagespeed Statistics on;
pagespeed StatisticsLogging on;
pagespeed LogDir /var/log/pagespeed;
pagespeed AdminPath /pagespeed_admin;
location ~ ^/pagespeed_admin {
allow 104.156.238.129;
deny all;
}
# 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$” { }
|
cs |
