기존 아이비호스팅에서 VULTR이라는 해외 VPS(가상서버호스팅)로 이전하면서 어떻게하면 더 속도를 높일 수 있을까 고민하다 찾아낸 게 구글 페이지스피드모듈을 적용하자는 것이었습니다.

어떤 사이트에서는 10배까지 성능이 좋아진다고하는데 과연 어느 정도 성능을 뽑아줄지 기대가 되지 않을 수 없습니다.

1. 구글 모드 페이지스피드’(mod_pagespeed) 소개

잘 알다시피 Google PageSpeed는 웹사이트의 성능을 분석하고 최적화 방법을 알려주는 분석도구로 이와 관련 툴로는 가장 대중적이라 할 수 있습니다.
PageSpeed Insights는 PageSpeed Insights Rules에 따라서 웹 사이트를 분석해주고 점수로 보여주는데 이를 잘 이용하면 어떻게 이트의 성능을 개선해야 하는지를 알 수 있습니다.

이러한 웹사이트에서 사이트를 분석하는 서비스 외 구글은 2010년에 발표한 모드 페이지스피드라는 프로젝트를 토대로 2014년 2월 ‘모드 페이지스피드’(mod_pagespeed)’라는 웹페이지 가속 기술을 발표했습니다.

구글의 설명에 의하면 서버단에서 사이트의 속도를 높이기 위해 페이지 로드 시간을 줄이고 웹 페이지 호출시간과 대역폭 사용을 효율화하는 방식을 적용했다고 합니다. 그것은 캐싱 극대화, 검색 최소화, 단위 요청 오버헤드 최소화, 데이터 크기 최소화 및 브라우저 렌더링 최적화라는 5가지 카테고리로 나누어 구현되었다고 하는데요.

그간 shared hosting 시절에는 생각도 못한 방법인데 이제는 서버를 마음대로 조정할 수 있으니 이러한 기술을 적용해 사이트 속도를 높여보고자 합니다.

2. NGGINX 서버에 모드 페이지스피드’(mod_pagespeed) 설치하기

NGINX 서버에 모드 페이지스피드’(mod_pagespeed)를 설치하는 방법은 주로 아래 내용을 참조하였습니다.

How to Install nginx and google PageSpeed on Ubuntu 16.04 (Xenial Xerus)

Compile Nginx with ngx_pagespeed Module on Ubuntu 16.04

2.1. Nginx 설정 파일 백업 (Back up Nginx Configuration Files)

작업하다보면 무슨 문제가 있을지 모르므로 Nginx 설정 파일을 백업받아 놓습니다.

저는 FTP로 관련 파일을 내려받아 놓았습니다. 백업 받을 파일은 /etc/nginx/nginx.conf과 /etc/nginx/conf.n/default.conf의 파일 2개입니다.

그리고 서버 자체를 백업받아 놓는게 좋을 것 같네요. vultr에서는 Snapshot 기능을 제공하고 있으므로 본격적인 작업에 들어가기 전에 서버 자체를 백업받아 놓을 수 있었습니다.

2.2. Installing nginx with ngx_pagespeed

리눅스에서는 새로운 모듈을 설치하면 연관된 프로그램도 다시 설치하도록 가이드 하는 것 같습니다.
여기에서도 구글 모드 페이지스피드를 설치하기위해 Nginx 최신 버젼을 같이 설치하고 있습니다.

2.2.1. Add the nginx repository

이 단계는 Nginx 최신버젼을 받을 수 있도록 Nginx 최신 버젼이 있는 위치를 등록하는 것입니다.

여기에서는 아마 앞서 nginx를 설치하면서 설치 위치를 등록했을 것인데(저는 라엘님의 가이드에 따라 Nginx와 maria db 위치를 /etc/apt/sources.list에 업데이트 했는데요.) 이 페이지 스피드 설치 시는 조금 위치에 등록하라고 가이드하고 있습니다.
추가로 nginx repository를 만들어 등록합니다.

• 이 등록은 nginx.list 파일을 만들고 nginx repository를 등록하는 것입니다.

vi /etc/apt/sources.list.d/nginx.list  
# 위 명령은 vi  편집기로 nginx.lst 파일을 편집하라는 명령입니다.

nginx.list에 아래 내용 추가합니다.

deb http://nginx.org/packages/ubuntu/ xenial nginx
deb-src http://nginx.org/packages/ubuntu/ xenial nginx

• 파일을 내려받을 수 있는 키를 등록하고 업데이트 진행합니다.

apt-key adv --keyserver keyserver.ubuntu.com --recv-keys ABF5BD827BD9BF62  # 저장소 키를 등록
apt-get update  # 저장소 위치를 업데이트

2.2.2. Nginx 최신 버젼을 다운로드, Download nginx 1.10 from ubuntu repository

이번에는 Nginx 최신 버젼을 다운로드 받을 수 있는 폴더를 만들고 여기에 최신 버젼을 다운로드 받습니다.

cd ~   # 루트 디렉토리로 이동
mkdir -p ~/home/nginx/   # 다운받을 디렉토리 생성

chmod -R 744  ~/home/nginx/  # 뒷부분에서 권한 문제로 안되는 경우가 발생하므로 일정 권한

cd ~/home/nginx/   # 디렉토리로 이동
apt-get source nginx   # Nginx 최신버젼을  다운받음

tar -xzvf nginx_1.13.0.orig.tar.gz # Nginx 최신버젼 수치를 확인 필요, 압축을 풀어 준다

• Nginx 패키지를 만들기 위해서 모든 관련 프로그램을 설치합니다.

apt-get build-dep nginx

2.2.3. 페이지스피드 다운로드, Download Pagespeed

여기에서는 페이지스피드를 다운받을 폴더를 만들고, 최신 페이지스피드 파일을 다운 받습니다.

github에서 ngx_pagespeed 최신 버젼 확인 하기

또는

PageSpeed에서 ngx_pagespeed 최신 버젼 확인 하기

으로 이동해서 최신 버젼을 확인하고 링크 주소를 받습니다.
그런데 제가 해본 경험으로는 최신 베타버젼은 PSOL libraries를 구할 방법이 없더군요(제가 못 찾을 수 도 있습니다) 따라서 최신 안정 버젼만 가능했습니다.

github에서는 버젼명에 상관없이 가장 최신 안정 버젼의 pagespeed 주소는https://github.com/pagespeed/ngx_pagespeed/archive/latest-stable.zip로 항상 일정합니다.

이 안정 버젼의 주소를 사용해 진행하면 됩니다.

mkdir -p ~/home/ngx_pagespeed/  #  페이지스피드를 다운받을 디렉토리 생성
chmod -R 744  ~/home/ngx_pagespeed/  # 뒷부분에서 권한 문제로 안되는 경우가 발생하므로 일정 권한 줌

cd ~/home/ngx_pagespeed/   # 생성한 디렉토리로 이동

wget https://github.com/pagespeed/ngx_pagespeed/archive/latest-stable.zip 
# 최신 버젼의 링크 주소로 최신 안정 버젼을 다운 받음

unzip latest-stable.zip  # 압축을 풀어줍니다.

cd ~/home/ngx_pagespeed/ngx_pagespeed-latest-stable  
# 압축을 풀고 생성된 디렉토리로 이동, 이 디렉토리 주소는 조금씩 바뀌니 ls 명력어로 확인이 필요합니다.

wget https://dl.google.com/dl/page-speed/psol/1.11.33.4.tar.gz 
#  latest-stable 버젼이 1.11.33.4.라서 PSOL libraries 파일을 받았습니다.

tar -xzvf  1.11.33.4.tar.gz
ls

2.2.4. 페이지스피드를 생성하기 위한 Nginx 환경 설정

페이지스피드를 생성하기 위헤서 Nginx 환경 설정을 합니다. 이는 Nginx가 다운 받아진 디렉토리로 이동해 debian 폴더의 rules라는 파일 내용을 수정합니다.

cd ~/home/nginx/nginx-1.13.0/debian/   # debian 디렉토리로 이동
vi rules   # vi라는 편집기로 rules 파일을 수정

rules에 아래 내용을 추가하고 저장합니다.
내용 중 config.status.nginx and config.status.nginx_debug 부분에 각각 이 파라메터를 추가합니다.

--add-module=~/ngx_pagespeed/ngx_pagespeed-latest-stable\

2.2.5. Nginx Ubuntu 패키지를 만들고 설치, Build the nginx Ubuntu package and install it

Nginx를 받아 놓은 디렉토리(/root/nginx/nginx-1.13.0)로 이동합니다.

• 그리고 Nginx Ubuntu 패키지를 만듭니다.

cd ~/home/nginx/nginx-1.13.0/   # Nginx를 받아 놓은 디렉토리로 이동


servicr nginx stop  # 서버 가동중이라면 nginx를 중단시킨다.  서버 세팅 초기에 설치한다면 문제가 없다.

dpkg-buildpackage -b     # 패키지를 만듭니다.

이때 만들어진 Nginx Ubuntu 패키지는 /root/nginx/ 디렉토리에 저장됩니다.
이 디렉토리에 가보면 관련 여러가지의 파일이 형성되어 있음을 볼 수 있습니다.

• 다음으로 dpkg 명령어를 사용해 nginx와 페이지스피드 모듈을 설치합니다.

cd ~/home/nginx/   # 앞에서 수행한 dpkg-buildpackage -b 로 만들어진 파일은 ~/home/nginx 폴더에 만들어지므로 이 폴더로 이동한다.

dpkg -i *.deb

여기서 deb 확장자를 가진 전체를 실행시키지 읺고 dpkg -i nginx_1.11.10-1~xenial_amd64.deb(또는 dpkg -i nginx_1.11.10-1~xenial_i386.deb)라는 파일만 실행 시키라는 가이드도 있네요.

저는 그냥 *.deb 명령어를 사용했습니다.

3. 페이지스피드 환경 설정 및 테스트

위 단계가 무사히 끝나면 설치는 완료된 것입니다.
이후는 nginx 환경 설정에 페이지스피드 모듈 부분을 반영하고 테스트 해주는 것입니다.

3.1. Nginx 환경 설정에 반영

환경에 설정에 반영은 두곳에서 설정해야 합니다.

첫째는 Nginx관 관련된 환경을 설정해주는 nginx.conf 에 반영해주는 것인데 여기서는 사용자, HTTP, Module 등을 정의해 줍니다.
둘째는 서버 전체 환경을 제어해주는 default.conf 에서 적용하는 것으로 여기서는 Server, location 등의 정보를 정의해줍니다.

아래는 Nginx 환경 설정에 반영된 내용입니다.

3.1.1. nginx.conf 반영

여기서는 페이지스피드를 작동시키고 (pagespeed on;), 파일 캐시 경로를 지정합니다. 이 캐시 파일 경로 FileCachePath도 필수값으로 반드시 이를 저장할 위치를 반영해야 합니다.

페이지스피드에는 많은 필터가 기본으로 작동하지만 이중에서 성능에 영향을 미찬다고 여겨지는 자바스크립트 지연 실행(pagespeed EnableFilters defer_javascript;) 등을 추가하였습니다.

자바스크립트 지연실행은 자바스크립트가 헤더나 본문 등에 섞여 있는 경우 자바스크립트가 렌더링을 막기 때문에 렌더링 후에 자바 스크립트를 실행토록 명령을 주는 것입니다.

pagespeed on;               # enable pagespeed module on this server block
pagespeed RespectVary on;   # Respecting Vary Headers
pagespeed CreateSharedMemoryMetadataCache "/var/cache/pagespeed/" 51200;
 pagespeed FileCachePath /var/ngx_pagespeed_cache;  # Needs to exist and be writable by nginx.  Use tmpfs for best performance.

pagespeed FileCacheSizeKb            102400000;  # 이 용량만큼 cache를 적용 후 다 차면 비운다
pagespeed FileCacheCleanIntervalMs   3600000;    # 이 시간마다 체크 아마 허용 용량을 따르는 듯
pagespeed FileCacheInodeLimit        50000000;

pagespeed CssFlattenMaxBytes 5120;

pagespeed LRUCacheKbPerProcess     8192;
pagespeed LRUCacheByteLimit        16384;

pagespeed JpegRecompressionQuality 70;

pagespeed RewriteLevel CoreFilters;

# enable additional filters selectively
pagespeed EnableFilters prioritize_critical_css;
pagespeed EnableFilters defer_javascript;
pagespeed EnableFilters combine_css,combine_javascript;
pagespeed EnableFilters add_head,combine_heads;
pagespeed EnableFilters collapse_whitespace;
pagespeed EnableFilters insert_dns_prefetch;
pagespeed EnableFilters move_css_above_scripts;
pagespeed EnableFilters move_css_to_head;

pagespeed EnableFilters sprite_images;
pagespeed EnableFilters recompress_png;
pagespeed EnableFilters convert_png_to_jpeg,convert_jpeg_to_webp;
pagespeed EnableFilters inline_preview_images;
pagespeed EnableFilters collapse_whitespace,remove_comments;

pagespeed EnableFilters make_google_analytics_async,make_show_ads_async;
pagespeed EnableFilters rewrite_images,rewrite_css,rewrite_javascript;  # enable image optimization
pagespeed EnableFilters responsive_images;   # defer the loading of images which are not visible to the client
pagespeed EnableFilters resize_mobile_images;
pagespeed EnableFilters lazyload_images;

pagespeed EnableFilters defer_iframe;
pagespeed EnableFilters defer_javascript;

pagespeed EnableFilters collapse_whitespace;  # enable collapse whitespace filter
pagespeed EnableFilters canonicalize_javascript_libraries;   # enable JavaScript library offload
pagespeed EnableFilters elide_attributes;   # remove tags with default attributes
pagespeed EnableFilters extend_cache;   # improve resource cacheability
pagespeed EnableFilters flatten_css_imports;    # flatten CSS files by replacing @import with the imported file
pagespeed EnableFilters prioritize_critical_css;   # rewrite CSS to load page-rendering CSS rules first.

pagespeed MapOriginDomain "http://localhost" "https://www.happist.com"; # Map the origin domain

pagespeed LoadFromFile "https://www.happist.com" "/home/happist/static/"; # Load static files(Image, CSS, Script파일과 같이 그 내용이 고정되어 응답을 할 때 별도의 처리 없이 파일 내용을 그대로 보내주면 되는 파일을 의미) from disk

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

3.1.2. default.conf 반영

여기에서는 PageSpeed 관련 위치 정보를 설정해 줍니다.
어던 경우는 이 위치 정보도 nginx.conf에 반영해도 무리가 없었는데 먹히지 않은 경우도 있습니다.

location 정보는 default.conf에서 정의해주고 있으므로 여기에 반영해 줍니다.

# 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$" { }

3.2. Nginx 페이지스피드 테스트

Nginx 환경 설정에 적용된 항목들이 문제는 없는지 테스트 점검해 보고 문제가 없으면 nginx를 재실행 시킵니다.
마지막으로 curl 명령어로 웹서버 상태를 점검해 봅니다.

nginx -t    
# Nginx를 테스트 해봅니다.  환경 설정에 문제가 있으면 문제점을 출력해주고 없으면 아무 메세지없이 다음 명령을 기다리는 명령 프롬프트로 이동합니다.
systemctl restart nginx  # 시스템을 재시작
curl -I 192.168.1.6

4. 페이지스피드 설치과정에서 만난 오류 및 대처

이 페이지스피드를 설치하면서 몇가지 오류을 만났는데요.
이 오류 및 해결 내용을 간략히 소개합니다.

4.1. internal compiler error

설치중 internal compiler error랄 만났습니다.
이 문제에 봉착하고나서 인터넷을 뒤지다보니 메모리의 문제가 아니냐는 지적이 있었습니다. 거기에서는 4GB 메모리로 업그레이드했다는이야기가 있어서 768MB 메모리를 쓴 저로서는 감당이 안되겠다는 생각에 절망에 빠졌는데요..

혹시 일반 PC처럼 서버를 다시 가동시키면 필요한 메모리가 확보되지 않을까하는 생각이 들어서 서버를 restart시켰습니다.

그랬더니 (필요한 메모리가 확보되었는지) 제대로 작동을 하더군요.

결론 – internal compiler error시 메모리확보를 위해 서버를 재가동해보자.

{standard input}: Error: open CFI at the end of file; missing .cfi_endproc directive
cc: internal compiler error: Killed (program cc1plus)
Please submit a full bug report,
with preprocessed source if appropriate.
See <file:///usr/share/doc/gcc-5/README.Bugs> for instructions.

4.2. 테스트는 루트사용자로 해보자

설정이 제대로 이루어졌는지 계속 체크하고 있는데 환경 설정 문구를 조금만 바꾸어도 게속 에러가 나더군요.

인터넷등에서 확실한 옵션이라고 주장을 해도 제 사이트에서 적용 후 테스트를 해보면 바로 에러가 뜹니다.

아래 그 생생한 예입니다.

nginx: [alert] could not open error log file: open() "/var/log/nginx/error.log" failed (13: Permission denied)
2016/09/16 02:55:29 [warn] 14896#14896: the "user" directive makes sense only if the master process runs with super-user privileges, ignored in /etc/nginx/nginx.conf:2
2016/09/16 02:55:29 [info] 14896#14896: [ngx_pagespeed 1.11.33.3-0] No threading detected. Own threads: 1 Rewrite, 1 Expensive Rewrite.
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
2016/09/16 02:55:29 [emerg] 14896#14896: open() "/var/run/nginx.pid" failed (13: Permission denied)
nginx: configuration file /etc/nginx/nginx.conf test failed

여러번 삽질을 하다가 일반 사용자가 sudo 명령으로 점검하지말고 그냥 루트사용자로 테스트해보자고 루트 권한으로 들어와 테스트를 해보니 아무 문제없이 통과되더군요..

결론 – 환경 설정 시는 가능하면 루트사용자로 테스트 하자

5. 모드 페이지스피드(mode PageSpeed) 적용 결말

마찬가지로 많은 삽질을 거쳐 페이지스피드를 적용했습니다.
어디에선가 적용하기 전후 차이가 거의 10배나 차이가 난다는 글을 본적이 있는데 저의 경우는 로딩 스피드가 2초이상 빨리진것 같습니다.

유감스럽게 로딩스피드가 5초~6초대로 상당히 늦은 편이었는데 모드 페이지스피드를 설치하고는 3~4초대로 빨라졌습니다. 이러한 속도 개선에는 매우 만족스러웠고 현재 사용하고 있는 WP Rocket 플러그인을 사용하지 않아도 되지 않을까하는 생각이 들었습니다. WP Rocket을 적용하는 것과 비적용하는것의 차이가 크진 않았습니다.