이번 서버를 새롭게 세팅해보면서 기존에 알고 있고, 적용해왔던 방식에 대해서 다시 한번 되돌아보는 계기가 되었습니다.

귀차니즘으로 더 나은 방법 찾는 것을 게을러하고 기존 방식을 고수했다는 반성을 했습니다.

사이트 속도 개선 방법으로 구글에서 제안해 방법인 구글 페이지 스피드(ngx_PageSpeed)도 그 중 하나입니다.

오늘은 구글 페이지 스피드(ngx_PageSpeed) 적용 방법에 대해서 고민했던 내용을 기록을 겸해서 정리해 보겠습니다.

Table of contents 목차 보이기

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/
Colored by Color Scripter

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
Colored by Color Scripter

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/
Colored by Color Scripter

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
wget http://nginx.org/download/nginx-${NGINX_VERSION}.tar.gz
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
Colored by Color Scripter

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/
Colored by Color Scripter

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
Colored by Color Scripter

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;
    
Colored by Color Scripter

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$” { }
Colored by Color Scripter

cs

새롭게 뉴스레터를 시작했습니다.

1️⃣ 주식 등 투자 정보 : 기업 분석, IB 투자의견 등 투자 관련 내용
..... 테슬라 실적 및 IB들의의 테슬라 투자의견
2️⃣ 사례 및 트렌드 : 사례연구와 트렌드 관련 괜찮은 내용
.....유튜브와 경쟁대신 구독 전환한 비디오 플래폼 비메오 사례

구글이 만든 자동 사이트 최적화 솔류션, 구글 페이지스피드(PageSpeed) 적용 방법 2가지