[워드프레스 Tips] 뉴스 매거진 테마 Newspaper 8 속도 최적화 방법

그 동안 가벼운 무료 테마를 사용하다가 보안 이슈등으로 newspaper 테마를 다시 검토했습니다. 이 과정에서 새롭게 얻은 정보를 기반으로 Newspaper 테마 최적화 방안에 대해 공유해 보고자 합니다.

Table of contents 목차 보이기

1. 다시 Newspaper 테마로 돌아오다.

최근 우여곡절끝에 newspaper 8.5 테마를 다시 사용하기로 했습니다. 그 동안 newspaper 테마의 TTFB(Time To First Byte)가 너무 좋지 않아 포기하고 다른 가볍다고 알려진 무료 테마를 사용했는데요..

가볍기 때문에 아쉬운대로 잘 사용하고 있었는데요. 그런데 이 무료 테마들이 가끔은 이상한 문제를 일으킵니다.
대표적인 게 일주일에 한번 정도 무슨 액션을 해도 특정 글로 이동해 버리는 현상이 발생하더군요. 어떤 특정 글이 이상하게 조화수가 폭증해 있길래 원인을 파악하니 어떤 선택을 하든(특정 글을 조회하든, 이미지를 선택하든..) 문서를 무조건 특정 페이지로 이동해 버립니다. 이리되면서 정상적인 사이트 운영이 어려운 지경에 이르게 되곤했습니다.
그런데 이런 문제가 발생시 테마를 newspaper로 변경하거나 그 특정 문서를 지워버리면 문제가 해결되곤 했습니다.

이런 현상을 몇번 겪다보니 규명할 수는 없지만 이 현상은 어떤 보안과 관련된 문제가 아닐까 싶었고 살짝 겁이 나기도 했습니다. 누가 내 사이트에 작난을 쳐 놓은 게 아니야? 라는 생가도 들고. 이렇게 불안하게 보내느니 꾸준히 업데이트를 해주는 유명 테마 즉 newspaper같은 테마가 (비록 속도가 불만족스럽기는 하지만)아무래도 보안에 유리하겠다는 생각을 했습니다.
그래서 보안을 감안해 조금 무겁드라도 newspaper 테마를 그냥 사용하자고 마음을 먹었습니다.

2. 다시 Newspaper 테마 적용 화면

Newspaper 테마를 적용하면서 홈화면 구성을 조금 손을 보았습니다.

예전과 크게 다른지 않게 2단 구성에 주제별 최신 포스팅이 나열되도록 구성했지만 디자인적으로 매칭을 조금 더 신경을 썼습니다.

홈페이지 전면에 많은 이미지와 글들을 배치하는 것이 속도에 영향을 주긴하지만 그 영향이 생각보다 크지 않기 때문에 가능하면 충분한 내용을 홈 전면에 담으려고 했습니다.

그러고보니 상당히 길게 아래로 늘어져 있네요,.아무래도 많은 주제별로 보여주다보니..어쩔 수 없는 선택이긴 합니다.

3 Newspaper 테마 속도를 최적화하기

그렇다고 무겁게 느껴지는 Newspaper 테마를 그대로 사용하기는 답답해서 몇일간 newspaper테마 최적화 방안이 더 없는지를 살펴보았습니다.

그 결과 아래와 같이 몇가지 사항을 적용해 나름 최적화를 할 수 있었습니다.

3.1. mod_pagespeed를 포기하다.

워드프레스를 시작하고 구글이 제안한 서버에서부터 사이트를 최적화 해준다는 mod-pagespeed를 사용해 왔습니다.
그 동안 이 설정이 오히려 속도에 악영향을 미칠거라고는 생각해 보지 않았습니다. 그 동안 모든 테스트는 이 mod-pagespee가 설치된 것을 기본으로 실험해 왔었는데요. 이번에는 혹시 여기도 문제가 있을지 모르니 완전 처음부터 시작해보자는 생각으로 이 mod_pagespeed를 적용하지 않고 대신 일반 cache 플러그인을 적용해 테스트해 보았습니다.

cache 풀러그인은 cache enabler와 WP Super Cache를 적용해 보았습니다. 많은 사람들의 테스트 결과를 보니 이 두가지가 가장 좋게 평가되고 있더군요.

mod_pagespeed 대신 일반 cache 플러그인을 사용하는 것에 큰 기대를 하지 않았습니다. 그만큼 mod-pagespee에 대한 믿음이 있었지요.
그런데 생각외로 여기서 문제가 해결될 조짐을 보였습니다. 즉 cache enabler와 WP Super Cache를 적용 시 TTFB(Time To First Byte)가 기존 1.3초대에서 0.3대로 1차가까지 줄었던 것입니다.

mod-pagespee가 구글에서 만들었다고 해서 무한 신뢰를 가지고 있었는데 이제는 구글도 믿을게 못된다는 생각을 하면서 mod-pagespee는 버리기로 했습니다.

물론 전체 loading 시간은 6초이상 나오므로 추가 개선이 필요했습니다.

3.2. Cache 플러그인 – WP Super Cache 적용

Cache 플러그인에는 여러가지가 있는데요. 이 프로그램들은 상당히 민감한 부분들을 조절하다보니 테마와 충돌이 나는 경우도 많이 있습니다. 유료이면서 가장 성능이 좋다고 (한때) 알려졌던 WP Rocket 플러그인도 이 newspaper 테마와는 잘 맞지 않는다는 지적이 많습니다. 저도 작년에 이 플러그인을 구매해 적용했다가 너무 문게가 많아서 환불 받았었죠.

Cache enabler와 WP Super Cache 두개다 설치해 테스트 해보았는데요. 둘 사이에 성능은 별 차이가 없었습니다. 다만 Cache enabler는 테마의 일부 기능에서 문제를 보였습니다. 예를들어 Infinite loading 같은 기능이 불완전하게 작동됩니다. 결국 newspaper 테마 회사에서 적극 추천하는 WP Super Cache로 최종 적용했습니다.

WP Super Cache 세팅은 아래 부분을 보시면 됩니다. Advanced에서만 변경하고 나머지는 그대로 두었습니다.

3.3. Browser Caching

브라우저 캐시는 브라우져가 방문한 사이트의 js, image등을 오프라인에 저장하고 있다가 다시 활용하는 것을 말하는데요. 이를 적용하면 불필요한 트래픽을 줄일 수 있고 속도를 향상시킬 수 있습니다.

무든 브라우저에서 이러한 브라우저 캐시 기능을 최대한 활용하려면 서버쪽에서 캐시 기간을 명확히 할필요가 있습니다.

이는 서버 종류에 따라 적용 방법이 다른데요.

아파치 서버 적용법

아파치 서버의 경우는 아래와 같은 코드를 .htaccess 파일에 추가합니다.

# BEGIN Expire headers
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 5 seconds"
ExpiresByType image/x-icon "access plus 604800 seconds"
ExpiresByType image/jpeg "access plus 604800 seconds"
ExpiresByType image/png "access plus 604800 seconds"
ExpiresByType image/gif "access plus 604800 seconds"
ExpiresByType application/x-shockwave-flash "access plus 604800 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType font/truetype "access plus 604800 seconds"
ExpiresByType font/opentype "access plus 604800 seconds"
ExpiresByType application/x-font-woff "access plus 604800 seconds"
ExpiresByType image/svg+xml "access plus 604800 seconds"
ExpiresByType application/vnd.ms-fontobject "access plus 604800 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers

<IfModule mod_deflate.c>
<filesMatch "\.(js|css|woff|html|php)$">
SetOutputFilter DEFLATE
</filesMatch>
</IfModule>

NGINX 서버의 경우

NGINX 서버의 경우는 site명.conf 파일에서 아래 코드를 삽입합니다.

    location ~* \.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods|odt|ogg|ogv|otf|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|t?gz|tif|tiff|ttf|wav|webm|wma|woff|wri|xla|xls|xlsx|xlt|xlw|zip)$ {
    expires 31536000s;
    add_header Pragma public;
    add_header Cache-Control "max-age=31536000, public";
    }

    location ~* \.(css|js)$ {
    expires 86400s; 
    access_log off;
    add_header Pragma public;
    add_header Cache-Control "max-age=86400, public";
    }

3.4. Lazy Load 플러그인 설치

이미지나 유튜브 동영상이 많은 경우 이 페이지를 띄우는데 많은 시간이 걸립니다. 그걸 방지하기 위해서 읽을 순서가 되었을 시 이미지나 동영상 플레이 준비토록하는 Lazy Load 기능이 유용합니다.

newspaper 테마에도 Lazy image Load 기능이 있습니다만 이 기능은 이미지만 작동되며 그 작동도 에니메이션 기능 정도를 부여하는 반쪽짜리라고 합니다.

그래서 제대로 작동하는 Lazy Load 플러그인을 설치하는게 좋다고 합니다.

저는 Speed Up – Lazy Load를 설치했는데요. 비록 많이 설치하지 않았지만 평가 점수가 높고 5k로 매우 가볍기 때문에 선택을 했습니다.

3.5. agDiv Speed Booster 플러그인 설치

자바스크립트나 CSS가 작동을 시작하면 그 작동이 끝날때까지 다른 모든 작업이 멈추어 버립니다. 그래서 자바스크립트나 CSS는 가능하는 한 맨 나중에 작동하도록 조정이 필요한데요.
newspaper 테마를 만든 tagDiv에서 배포한 플러그인으로 newspaper테마와 궁합이 잘 맞기때문에 이를 설치해 줍니다.

3.6. Font Awesome 제거

사이트를 화려하면서도 아기자기하게 보이기위해 다양한 아이콘들을 사용하는데요. 이러한 아이쿤 중 꼭 필요한것만 불러들이는 것이 좋습니다./
이는 테마의 functions.php 파일에 아래 내용을 추가합니다.

/*
Removing Font Awesome
*/

add_filter( 'happist_fontawesome_essentials', 'happist_fontawesome_essentials' );
function happist_fontawesome_essentials()
{
 return true;
}

3.7. 이모지(emoji) 제거

마찬가지로 감정을 표현하는 이모지(emoji)를 크게 사용하지 않는다면 과감히 빼는 것이 전체 서버 요청 건수를 줄이면서 속도를 올릴 수 있는 방법이죠.

이는 아래와 같은 코드를 functions.php 파일에 추가함으로써 가능합니다.

/*
Removing Emojis
*/

add_action( 'init', 'happist_disable_wp_emojicons' );
function happist_disable_wp_emojicons() 
{
 // all actions related to emojis
 remove_action( 'admin_print_styles', 'print_emoji_styles' );
 remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
 remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
 remove_action( 'wp_print_styles', 'print_emoji_styles' );
 remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
 remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
 remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
}

4. 도대체 어느 정도 속도가 나오나요?

이렇게 작업하면 어마어마한 속도가 나올까요? 솔직히 newspaper 테마는 많은 기능을 가지고 있어서 가볍다고 평가할 수 없습니다. 그렇기에 평균이상 속도가 나오면 불만없이 사용할 의향이 있습니다. 나름 기능들은 만족스럽기 때문이죠.

디자인은 호불호가 있기 때문에 평가하기가 그렇습니다만 평균이상은 된다는 생각입니다.

webpagetest.org에서 테스트해보면 first view로 4초, TTFB는 0.32초로 나쁘지 않은 점수가 나와서 그걸로 위안을 삼으려 합니다. 너무 욕심을 낸다고해서 쉽게 좋아지지 않는다는 것을 알기에..

5. newspaper 테마 관련 몇가지 포스팅

[워드프레스 Tips] 베스트 뉴스 매거진 테마인 Newspaper 7의 6개월 사용기

[워드프레스 속도 개선] newspaper 8 테마 로딩 속도를 2초까지 개선해 보자

[워드프레스 Tips] 워드프레스 Newspaper 테마에서 최근 업데이트 날짜 표시하기

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

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