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

| Updated

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

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

Nginx PageSpeed 모듈 설치하기

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

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

구글 페이지 스피드 pagespeed2

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

Featured_컴퓨터 구글 어낼리틱스 PC Notebook computer-767776

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;

서울에 생긴 Vultr 서버 100$ 프로모션 안내

안녕하세요?
새로운 사이트 구축을 위한 신규 서버를 고민하신다면 , 서울 리젼이 생겨 더욱 빨라진 Vultr 서버를 Vultr 100$ 프로모션으로 이용해 보세요.

아래 프로모션 코드 링크를 통해 Vultr에서 서버 구축 후 1달 이상 사용 및 $25이상 결제 時 추가 100$을 주는 프로모션을 진행 中입니다.

아래 이미지를 클릭해 등록할 수 있습니다.

Vultr는 서울에도 리젼이 있어 매우 빠르고, 아마존 웹 서비스(AWS)보다 성능이 높으며 가장 가성비가 뛰어납니다.

거기다 사용자 UI도 좋고, 15개까지 스냅샷을 무료로 제공하기 때문에 관리하기 좋습니다. 그리고 지금 100$ 프로모션처럼 가격적인 메리트도 있습니다.

저는 2016년부터 Vultr 서버를 사용했는데요. 지금까지 잘 사용해 오고 있습니다. 아래 사용기도 참고해 보세요.

도쿄 리젼과 비교해 본 Vultr 서울 리젼 사용기

가성비가 뛰어난 Vultr 가상서버호스팅(클라우드호스팅,VPS) 사용기

Vultr 가상서버호스팅의 새상품 High Frequency 사용기

가상 서버를 운영하고픈 勇者에게 전하는 가상 서버 운영 입문 노하우 – Vultr 가상서버호스팅(VPS)를 중심으로

해외 가상서버호스팅(VPS)이 국내 호스팅보다 빠르다? – 아이비호스팅과 해외 가상서버호스팅 VULTR간 비교

사이트 운영을 위한 안내 – 웹서버 세팅에서 워드프레스 설치까지(우분투 17.10, NGINX 1.13.6, Marian DB 10.2, PHP7.2)

워드프레스 최적화를 위한 18개월간의 고민, 그 노하우를 담다.

Subscribe
Notify of
guest
19 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Word

themeisle 테마로 바꾸셨네요.

나름 깔끔하고 괜찮은 것 같습니다.

개별 블로그 글에서 날짜 부분의 “월” 표시가 깨져 나오네요.

comment image

인코딩을 변경해주시거나, 테마의 한글 파일(.po, .mo 파일)을 삭제하면 될 것 같습니다.

Word

정말 대단하십니다^^

참고로 첫 페이지에서 컨텐츠가 무한 로딩이 되도록 설정되어 있는데요,
저는 초기에 애드센스 광고와 관련하여 무한 로딩과 Pagination 중에서 고민한 적이 있습니다.
이 문제를 다른 분께 물어보니까 애드센스 광고는 페이지당 3개만 표시가 가능하므로
무한 로딩(Infinite Loading) 방식보다는 페이지네이션 방식이 더 유리하다는 답변을 들었습니다.
Pagination 방식으로 하면 광고 노출 횟수가 많아져서 애드센스 수익이 올라갈 것으로 기대됩니다(실제로 그런지는 정확히 모르겠습니다).

전 시간이 날 때마다 가벼운 테마를 찾곤 합니다.
오늘 최근에 나온 테마 중에서 매거진 테마로 가볍고 빠른 테마(판매자 주장에 의하면 빠르다고 하고 사용자 평가에서도 빠르다는 평가가 있네요)를 하나 찾았습니다.

Newspread( https://themeforest.net/item/newspread-magazine-blog-newspaper-and-review-wordpress-theme/19769829?ref=elohimguy )라는 테마인데요, 만약 다시 테마를 선택할 수 있다면 이 테마를 가지고 한 번 테스트해보고 싶은 생각이 드네요.
(제 사이트에 적용해도 속도가 빠를지 궁금하네요.)

하지만 지금 테마를 바꾸기에는 부담이 크기 때문에 다음에 기회가 되면 가볍고 빠른 테마 중에서 하나를 선택해보고 싶습니다.

Word

앞 댓글에서 “무한 로딩”이라는 용어보다는 “무한 스크롤”이라는 용어가 더 정확한 것 같습니다.
수정하려고 하니 수정이 안 되네요ㅎㅎ

Word

이제 보니까 1단 구성(Full-Width)으로 되어 있네요.

Full-width는 사용자가 글에 집중할 수 있는 레이아웃이라서 저도 full-width로 바꾸어볼까하고 이전부터 생각하고 있지만 아무래도 애드센스 광고 때문에 사이드바를 유지하고 있습니다. (바로 앞에 사용했던 Enfold 테마( http://themeforest.net/item/enfold-responsive-multipurpose-theme/4519990&ref=elohimguy )에서는 Full-width로 사용했습니다.ㅎㅎ)

happist 사이트의 경우 좋은 컨텐츠가 많아서 고정적으로 방문하는 사용자가 많을 것이라 생각되네요^^
요즘 사람들은 긴 글을 읽지 않는다고 합니다.
그래서 짧게 글을 작성하는 것도 한 방법 같습니다.

그리고 이 블로그가 Full-width로 되어 있어 가로 폭이 조금 넓어서 독자들이 글을 읽는 데 약간 부담을 느낄 수도 있을 것 같습니다. 가로 폭을 조금 좁혀보는 것을 고려해보시면 어떨까요? (Matthew님 사이트의 글도 Full-width로 되어 있습니다만, 가로 폭을 일부러 좁게 만들어서 가독성이 향상되는 것 같습니다.)

Word

굳이 폭을 좁게 하고 싶다면 비교적 간단한 CSS로 조정이 가능할 것입니다.
잘 안 되면 테마 Support를 요청해보셔도 되고요.

글이 길어질 경우 Part 1, Part 2로 나누는 것은 어떨지 모르겠습니다. 저는 이전에는 긴 글을 몇 개 올렸지만, 그렇게 긴 글을 사람들이 다 읽는지도 확신이 서지 않고 해서 최근에는 글이 길어지면 Part 1, Part 2로 나누어서 올리고 있습니다.ㅎㅎ

Word

참고로 제 블로그에는 조금 무거운 보안 플러그인이 설치되어 있어 예전보다는 속도가 느려졌을 것입니다.
가끔 해킹이나 멀웨어를 당한 사이트를 간혹 접하면서 사이트가 느려져도 보안이 중요하다는 생각이 들었습니다.
서버단에서 적절한 조치를 취하면 좋겠지만 저는 그냥 간단히 플러그인을 설치했습니다.ㅎㅎ

Word

한 페이지에 광고를 3개까지 노출할 수 있으므로 1단(Full-width)일 경우에도 광고를 잘 만 배치하면 노출을 유지할 수도 있을 것 같습니다.

가령 메뉴 부분(우측)에 하나를 배치하고 글 시작 부분에 하나, 글 중간 부분에 하나… 이런 식으로 배치하면 사이드가 있을 때와 비교하여 그리 많이 차이는 안 날 수도 있을 것입니다. (추측입니다.ㅎㅎ)

Word

검색해보니 작년에 광고 개수 제한이 없어진 것 같네요.
감사합니다~
Happist님 아니었으면 계속 3개까지만 가능한 것으로 알고 있을 뻔 했습니다.ㅎㅎ

Matthew

“참고로 첫 페이지에서 컨텐츠가 무한 로딩이 되도록 설정되어 있는데요,
저는 초기에 애드센스 광고와 관련하여 무한 로딩과 Pagination 중에서 고민한 적이 있습니다.”

워드님 정말 위험한 선택을 하실뻔 했네요. ㅋㅋㅋ

제가 예전에도 이 infinite scrolling 과 SEO 에 관해 댓글로 몇번 말씀드린적이 있었는데… 코프레스 답글에도 여러번 설명했었고… 그런데 아마 잊어버리셨나봅니다.

Ajax 로 컨텐츠가 불려오는 형태의 페이지는 검색봇이 제대로 index 를 못해줍니다.

https://www.seroundtable.com/google-hidden-tab-content-seo-19489.html

(예: Wix)

그래서 무한로딩 하는 사이트들은 SEO 측면에서 보면 그냥 자살행위나 다름 없습니다.

SEO 가 아닌 광고 때문에 무한로딩/스크롤링을 선택하시지 않으셨다니 참 다행입니다. ㅎㅎㅎㅎ

Sometimes you make a right decision for wrong reasons. ㅎㅎㅎ

SEO 뿐만 아니라 심리적으로도 사람들은 시작과 끝이 존재하는 컨텐츠를 선호합니다. 결말없는 영화를 보신적이 있으신가요?

결말을 확인하려는 이유는 어떤 확정성? certainty 를 거의 모든 사람들이 선호하기 때문입니다.

사람들은 불확실한 걸 싫어합니다.

끝이 없는 책이 만약 존재한다고 가정하면, 그러니까 읽어도 읽어도 읽는만큼 계속 페이지 수가 늘어나는 책을 보고 싶으신가요?

웹사이트도 똑같습니다. 스크롤을 내려도 내려도 계속 컨텐츠가 로딩 되는 사이트를 사람들이 선호하지 않는 이유 입니다.

[…] [워드프레스 속도 개선] Nginx에 페이지스피드(mod_PageSpeed)설치 방법 두번째에서 mod_PageSpeed 설치하는 방법을 설명해 놓았습니다. […]

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