여기에서는 구글 페이지 스피드를 활용해 가장 효율이 좋은 이미지 포맷이라는 WebP를 활용하는 방법에 대해 알아 봅니다.

여기서 말하는 구글 페이지 스피드는 사이트 성능 평가하는 것이 아닌 구글 프로젝트 하나로 진행되었던 서버 최적화 프로젝트의 이름입니다.

아파치 웹서버에 적용하는 것을 mod_pagespeed라고 부릅니다. 웹서버가 NGINX라면 ngx_pagespeed라고 하죠. 제가 웹서버로 NGINX를 사용하고 있기 때문에 ngx_pagespeed 중심으로 설명드립니다.

그리고 구글 페이지스피드를 설치하지 않고도 WebP를 사용할 수 있는 방법에 대해서는 아래 글을 참조해 보세요.

1. 속도와 트래픽 절약을 위한 이미지 압축에 대한 고민

사이트 운영 시 속도와 트래픽에 대해서 많은 고민을 하게 되는데요.

사이트 속도를 빠르게 한다는 것은 방문자들의 만족도를 높여서 사이트가 활성화되는 기본 요건에 해달되겠죠. 그리고 트래픽이 늘어날수록 서버 처리에 부담을 주니 속도에 영향을 주고 트래픽 비용이 발생합니다.

그래서 이미지를 올릴 시 최대한 압축을 하고 어떤 경우는 보기에 싫을 정도로 압축을 하기도 합니다. 이는 압축이 지나처 컨텐츠의 질을 떨어뜨리는 일이죠.

저는 이미지를 주로 jpg를 사용하고 70%까지 압축을 하고 있습니다. 그러면 대부분의 이미지가 100k이로 줄어들기 때문입니다. 대부분의 아미지 프로그램들은 70%를 하한선으로 잡고 있더군요.

저는 그 하한선까지 압축을 하는 셈이지요. 이 정도 이미지 압축은 일반 사진은 큰 문제가 없는데 글씨가 있는 이미지의 경우는 글자가 많이 흐려집니다.

그래서 적당히 이미지 압축을 해도 충분히 크기를 줄일 수 있는 방법이 있다면 좋겠다는 생각을 했습니다.

그래서 방법을 찾아보니 저의 희망을 어느 정도 채워질 수 있는 방법이 있긴는 하더군요. 바로 webP 이미지 포맷을 이용하는 방법인데요.

이 webP는 기존 jpg에 비해서 30%까지 용량을 줄여 준다고 합니다. 다만 적용되는 브라우저가 제한적이라는 게 약점이죠.

2. webP 이미지 포맷에 대해서

위키는 webP 파일 포맷에 대해 아래와 같이 설명하고 있습니다.

webP(웹피, weppy)는 무손실 및 손실 압축 이미지 파일을 위한 이미지 포맷이다. On2 테크놀러지스의 기술을 구매하여, 그것을 기반으로 구글이 개발하여, 2010년 9월 30일 공개하였다. 영상 포맷인 VP8의 파생으로, 멀티미디어를 담는 포맷인 WebM의 자매 프로젝트이다.
JPEG 파일 포맷은 너무 오래 되어서 구글에서 새롭게 개발 발표한 포맷으로 기존 jpeg보다 30% 더 크기를 줄 수 있다고 한다.

아래는 구글에서 운영하는 webP 설명 사이트에서 jpg 이미지 변환 예를 가저온 것인데요. 43.84KB의 jpg 파일이 29.61KB로 줄었고(32% 사이즈 감소), 86.25KB는 59.18KB(31% 사이즈 감소)로 줄었습니다.
WebP Gallery 참조

▽ webP와 jpg 이미지 변화 비교

이러한 webP 이미지 포맷은 아쉽게도 모든 브라우저에서 지원하는 것은 아닙니다.

2017년 12월 현재 크롬, 오페라, 안드로이드 브라우저, 삼성 인터넷, QQ, 바이두 등이 지원하고 있는데요.

2020년 2월 1일 기준으로 크롬, 엣지, 파이어폭스, 오페라 등등 대부분이 지원하고 IE와 사파리 등 일부만 지원하지 않고 있습니다.

커버리지는 글로벌 전체 브라우저 79% 정도 커버하고 있네요(데스크탑 84%, 모바일 77%)

데스크탑 중심 브라우져보다는 속도를 중요시하는 모바일 브라우저에서 지원이 활발합니다. 모바일을 위해서라도 사용해야겠다는 생각이 듭니다.

애플 사파리는 지원을 검토중이라고 합니다만 가능성이 낮다는 이야기가 있네요. 구글과 경쟁하는 애플이니깐요.

3. WebP를 이용하는 방법 – 구글 페이지스피드 사용

그러면 워드프레스에서 어떻게 webP 이미지 포맷을 이용할 수 있을까요?

3.1. 플러그인 사용

워드프레스 플럭인중에서는 webP 이미지 포맷을 지원하는 다양한 플러그인들이 많이 있습니다.
여기서는 간략하게 webP를 지원하는 플러그인을 살펴보겠습니다.

3.1.1. Optimus – WordPress Image Optimizer 플러그인 사용

가장 간단한 방법은 플러그인을 사용하는 방법입니다. 대표적인 플러그인으로 Optimus – WordPress Image Optimizer 를 사용할 수 있습니다. 여기에서 Creation of WebP files에 체크를 하면 이미지가 업로드되면 webP 이미지 포맷으로 변환해 줍니다.

그리고 Optimus – WordPress Image Optimizer 플러그인은WordPress Cache Enabler 에서 Cache 플러그인으로서 webP를 지원하고 있어서 같이 사용하면 좋다고 합니다.

3.1.2. Jetpack에서 Photon 사용

만약 Jetpack을 사용한다면 번들 프로그램중의 Photon service에서 무료로 webP 서비스를 사용할 수 있습니다.
단지 jetpack의 설정 중 Performance & Security에서 Photon을 상요하도록 설정만 하면 됩니다.

3.1.3. ShortPixel + Cache Enabler

ShortPixel Image Optimizer 은 일종의 Freemium 플러그입니다. JPG, PNG, GIF를 압축하는 기능과 JPEG, PNG or GIF 파일을 WebP로 변환해주는 기능을 가지고 있습니다.
다만 월 100장까지는 무료지만 그 이상부터는 5,000 이미지 당 $4,99를 내야합니다.

마찬가지로 이 플러그인도 Cache Enabler와 결합해서 최적으로 사용할 수 있습니다.

3.1.4. EWWW Image Optimizer

EWWW Image Optimizer 도 webP 파일을 지원하는 이미지 압축 플러그인인데요. 스피드 제한이나 파일 사이즈 제한이 없는 플러그인으로 60만명이상이 사용하고 있습니다.

webP를 사용하기위해서는 Conversion Setting에서 jpg/png to webP와 Alternative webP Rewritung에 체크를 해서 사용할 수 있습니다.

3.2. 구글 페이지스피드(ngx_pagespeed) 사용

앞에서 소개한 것처럼 플러그인을 사용할 수 도 있지만 서버단에서 webP 이미지 포맷을 자동으로 만들고 브라우져에 뿌려줄 수 있는 방법이 있습니다.

바로 구글 페이지스피드(ngx_pagespeed) 사용하는 방법이죠. 구글 페이지스피드(ngx_pagespeed)에서는 오래전부터 webP를 지원해왔습니다. 그런데 일부 브라우져에서 일부 파일이 제대로 보여지지 않은 버그가 있었습니다. 저도 이 문제로 사용을 중단했었죠.

그런데 구글 페이지스피드 1.13.35.1-beta 버젼에서 이런 문제를 해결해 배포되었기 때문에 다시 사용하고 있습니다.
여기서는 구글 페이지스피드 1.13.35.1-beta를 어떻게 nginx 서버에 설치하는지를 중심으로 설명드리겟습니다.

우분투 uuid-dev 설치

먼저 uuid-dev를 설치합니다. 갑자기 uuid-dev 설치 이야기가 나오는 것은 이전 페이지스피드 버젼에서는 이게 없이도 설치에 문제가 없었는데요. 구글 페이지스피드 1.13.35.1-beta부터는 설치가 안되더군요.
다른 사람들이 구글에 문의한 내용을 토대로 정리해보면 바로 uuid-dev 설치가 필요하다고 합니다.

uuid-dev 설치는 간단합니다. 아래 명령어만 주면 됩니다.

apt-get install uuid-dev
Code language: PHP (php)

ngx_pagespeed 소스 다운받기

그 다음으로 할일은 ngx_pagespeed 소스를 다운 받습니다.
먼저 최신버젼의 ngx_pagespeed가 무엇인지를 확인합니다.

최신 버젼 확인하기, PageSpeed Release Notes

이에 따르면 201년 12월 30일 현재 1.13.35.1-beta가 최신버젼임을 알 수 있습니다.

그러면 아래와 같은 명령을 순차적으로 입력해 ngx_pagespeed 소스를 받습니다.

NPS_VERSION=1.13.35.1-beta
cd
wget https://github.com/pagespeed/ngx_pagespeed/archive/v${NPS_VERSION}.zip
unzip v${NPS_VERSION}.zip
cd ngx_pagespeed-${NPS_VERSION}/
NPS_RELEASE_NUMBER=${NPS_VERSION/beta/}
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/
Code language: PHP (php)

Nginx 소스 컴파일 설치

다음으로는 Nginx 최신버젼을 받아 컴파일하는 단계입니다.
여기서도 Nginx 최신버젼이 무엇인지 확인해야 합니다.

최신 버젼 확인하기, nginx Release Notes

2017년 12워 30일 현재, nginx는 1.13.8이 최신 버젼이네요. 아래와 같이 진행합니다.

NGINX_VERSION=1.13.8
cd
wget http://nginx.org/download/nginx-${NGINX_VERSION}.tar.gz
tar -xvzf nginx-${NGINX_VERSION}.tar.gz
cd nginx-${NGINX_VERSION}/
./configure --add-module=$HOME/ngx_pagespeed-${NPS_VERSION} ${PS_NGX_EXTRA_FLAGS}

./configure --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib/nginx/modules --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-compat --with-file-aio --with-threads --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_flv_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-mail --with-mail_ssl_module --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module --with-cc-opt='-g -O2 -fstack-protector-strong -Wformat -Werror=format-security -Wp,-D_FORTIFY_SOURCE=2 -fPIC' --with-ld-opt='-Wl,-Bsymbolic-functions -Wl,-z,relro -Wl,-z,now -Wl,--as-needed -pie' --add-module=$HOME/ngx_pagespeed-${NPS_VERSION} ${PS_NGX_EXTRA_FLAGS} --with-openssl=../openssl-1.1.0.g  

make
make install
Code language: PHP (php)

webP관련 최적화 세팅

이렇게 ngx_pagespeed 설치가 완료되면 최적화 세팅을 합니다. ngx_pagespeed 최적화 관련해서는 여러 참고 자료들이 있으므로 넘어가기로 하고 webP관련 내용만 추가해 보겠습니다.

webP는 pagespeed가 작동하면 자동으로 사용할 수 있게 됩니다. pagespeed는 대부분의 이미지관련 필수 기능들이 기본 코어에 들어가 있기 때문에 별도 세팅하지 않아도 제대로 작동합니다.
ngx_pagespeed에서 이미지 관련 필터는 아래와 같은 것이 있습니다.

• 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 ; 기본
• extend_cache_images ; 기본
• convert_to_webp_animated ; 옵션
• inline_preview_images ; 옵션
• resize_mobile_images ; 옵션
• sprite_images ; 옵션

위에서 보는 것처럼 이미지 최적화 관련 필터 대부분은 기본으로 core에 포함되어 있으므로 추가로 옵션으로 추가할 게 거의 없습니다. 저는 convert_to_webp_animated와 resize_mobile_images 정도만 추가해 주었습니다.

다음으로은 이러한 최적화한 옵션 값을 지정해 줍니다.
저는 구글에서 제안하는 값에서 크게 변동 시키지는 않았습니다. 이미지 압축을을 조금 더 높였죠.

    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      70;
    pagespeed WebpRecompressionQuality                     75;
    pagespeed WebpAnimatedRecompressionQuality             70;
    pagespeed WebpRecompressionQualityForSmallScreens      70;
    pagespeed JsInlineMaxBytes                           2048;
    pagespeed JsOutlineMinBytes                          3000;
    pagespeed MaxInlinedPreviewImagesIndex                 -1;
    pagespeed MinImageSizeLowResolutionBytes             3072;
    pagespeed RewriteRandomDropPercentage                   0;
Code language: PHP (php)

아래는 최종으로 ngx_pagespeed 관련 세팅한 값이니 참고하세요.

## enable pagespeed module on this server block
    pagespeed on;              

    ## Cache setting
    pagespeed FileCachePath /var/ngx_pagespeed_cache;
    pagespeed FileCacheSizeKb            1024000000;  # cache를 적용 후 다 차면 비운다
    pagespeed FileCacheInodeLimit        50000000;
    pagespeed CssFlattenMaxBytes       102400;
    pagespeed LRUCacheKbPerProcess 8192;
    pagespeed LRUCacheByteLimit 16384;

    pagespeed DefaultSharedMemoryCacheKB 50000;

    ## 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 outline_javascript ;
    pagespeed EnableFilters defer_javascript;  # 페이지 로딩 완료 시까지 자바 실행 지연    
    pagespeed EnableFilters remove_quotes ;
    pagespeed EnableFilters collapse_whitespace;
    pagespeed EnableFilters insert_dns_prefetch; # DNS resolution time 축소
    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, 

    pagespeed AnalyticsID UA-64766674-1;
    pagespeed EnableFilters make_google_analytics_async,make_show_ads_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      70;
    pagespeed WebpRecompressionQuality                     75;
    pagespeed WebpAnimatedRecompressionQuality             70;
    pagespeed WebpRecompressionQualityForSmallScreens      70;
    pagespeed JsInlineMaxBytes                           2048;
    pagespeed JsOutlineMinBytes                          3000;
    pagespeed MaxInlinedPreviewImagesIndex                 -1;
    pagespeed MinImageSizeLowResolutionBytes             3072;
    pagespeed RewriteRandomDropPercentage                   0;
Code language: PHP (php)

참고

이미지 최적화 관련 괜찮은 솔류션들은 대부분 유료로 제공되고 있습니다.

서버를 운영한다면 무료로 어느 정도 성능이 좋은 임지 최적화 시스템을 구축하는 것이 가능합니다. 아래는 그 방법에 대해서 간략 정리한 내용이니 참고하시기 바랍니다.

혹시 서버를 고민하신가요?

안녕하세요?

저는 Vultr를 사용하고 있는데요. 혹 신규로 서버 구축을 고민하신다면 Vultr도 검토해 보시라고 권해드립니다.

저는 2016년부터 Vultr을 사용했는데 큰 불만없이 잘 사용하고 있습니다. 아래 사용기도 한번 보시구요.

한국과 일본 서버 중에서 리노드나 AWS도 좋은 대안이지요. Vultr도 장점이 많은 VPS이고 대안으로 검토해볼만합니다. 성능면에서 괜찮다고 생각합니다.

혹시 Vultr에 관심이 있다면 아래 리퍼럴 링크를 이용해 보세요. 신규 계정을 등록 시 10$을 받을 수 있는 제휴 링크입니다.