티스토리가 지난 5월 31일 티스토리 공지사항을 통해 ‘상단 혹은 하단에 자체 광고를 6월 중 시작’한다는 내용이 알려지면서 많은 블로거들이 워드프레스로의 이전을 고민하고 계실 것입니다. 이 포스트는 필자가 티스토리에서 워드프레스로 블로그를 이전한 후 느낀 것을 글로 옮겨 적은 것입니다.
워드프레스는 복잡해!
필자가 이전에 사용하던 텍스트큐브(설치형)와 티스토리(서비스형)는 적당한 테마만 선택하면 그 즉시 글쓰기가 가능했지만, 워드프레스는 페이지 속도를 고려한 최적화가 이루어져야 합니다. 이런 부분을 대행해 주는 컨설팅도 존재하지만, 비용이 상당하기 때문에 대부분의 블로거들은 직접 진행해야하는데 인터넷에 있는 정보가 너무 방대하다 보니 더 복잡하게 느껴지는 것 같습니다. 필자는 이런 문제 때문에 티스토리에서 워드프레스로 전환한 것을 후회하기도 했습니다.
나에게 적합한 테마 찾기
워드프레스 테마(새창)
ThemeForest(envatomarket)(새창)
워드프레스는 전 세계적으로 유명한 CMS이기 때문에 테마의 종류가 다양하고 테마와 함께 제공되는 빌더를 이용해 페이지를 쉽고 빠르게 꾸밀 수 있습니다. 필자는 envatomarket에서 인기리에 판매되고 있는 Newspaper 테마(새창)를 사용 중이고 페이지 속도를 위해 대부분의 기능과 효과를 비활성화하였습니다. 참고로 Newspaper를 제작한 tagdiv는 tagDiv Standard Pack 플러그인과 tagDiv Cloud Library 플러그인을 함께 사용하지 않는 것이 좋다고 했지만, 필자의 블로그 디자인은 두 가지를 혼합하여 사용했을 때가 가장 이상적인 속도가 나왔습니다. 이렇듯 테마 제작사의 조언보다는 직접 적용해서 테스트하는 것이 가장 정확한 결과를 보여줍니다.
플러그인 설치
#1. 캐시 플러그인 설치
캐시 플러그인을 사용하면 접속자에게 기존보다 빠른 속도로 페이지를 보여줄 수 있습니다. 필자는 WP Super Cache(새창) 플러그인에 Newspaer Theme: How to use the Cache plugin(새창)에 소개된 내용을 설정하고 사용 중이며 Preload 기능을 페이지 영역에 추가로 활성화해 특정 시간(720분)마다 모든 페이지가 자동 갱신될 수 있도록 설정 하였습니다.
#2. 통계 플러그인 설치
통계 플러그인을 사용하면 접속자 수, 유입 경로, 페이지 뷰 등과 같은 정보를 확인할 수 있습니다. 필자는 WP Statistics(새창) 플러그인에 네이버와 다음 검색 엔진을 WP Statistics에 추가하는 방법(새창)에 소개된 내용을 참고해 네이버와 다음 검색 엔진을 따로 구분할 수 있도록 설정하고 사용 중입니다.
#3. 데이터베이스 최적화 플러그인 설치
데이터베이스 최적화 플러그인을 사용하면 불필요한 데이터베이스를 손쉽게 정리하고 최적화할 수 있습니다. 필자는 WP-Sweep(새창) 플러그인을 사용 중이며 비주기적으로 한 번씩 정리할 예정입니다.
#4. CSS, JavaScript 최적화 플러그인 설치
CSS, JavaScript 최적화 플러그인을 사용하면 데이터 로딩 속도가 빨라져 접속자에게 보다 빠른 페이지 속도를 제공할 수 있습니다. 필자는 Autoptimize(새창) 플러그인을 사용 중이며 파일을 하나로 합쳐주는 Aggregate 기능은 페이지 로딩 속도에 부정적인 영향을 미치는 듯하여 비활성화하고 사용 중입니다.
#5. 캐시 + CSS, JavaScript 최적화 플러그인(유료)
필자가 앞서 소개한 캐시 플러그인과 CSS, JavaScript 최적화 플러그인을 모두 포함하고 그에 따른 부가 기능을 제공하는 유료 플러그인입니다. 필자는 고민끝에 WP Rocket(새창)을 사용하게 되었는데 개인적으로 가격 빼고 대만족입니다.
서버 최적화
서비스형 블로그와 달리 설치형 블로그는 Apache(또는 Ngnix), PHP, MariaDB(또는 MySQL) 등의 최적화 수준에 따라 페이지 로딩 속도가 달라질 수 있습니다. 이 부분은 전문 컨설팅을 받는 것이 가장 확실하고 좋지만, 필자는 여건이 되지 않아 인터넷에서 알려진 정보를 바탕으로 해당 기능들을 최적화하였습니다.
Apache ‘.htaccess’ 커스텀하기
#1. Gzip 활성화
<ifmodule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </ifmodule>
페이지 로딩 속도를 향상시켜주는 Gzip은 현재 대부분의 브라우저에서 기본 기능으로 지원하기 때문에 선택이 아닌 필수라고 할 수 있는 설정입니다. Gzip의 작동 여부는 GZIP Compression Test – GiftOfSpeed(새창)을 통해 확인할 수 있습니다.
#2. 이미지 외부 링크 방지
# 그림 외부 참조 막기
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?jnstory.net [NC] #내 블로그 주소(1)
RewriteCond %{HTTP_REFERER} !^http(s)?://(blog.)?jnstory.net [NC] #내 블로그 주소(2)
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?google.com [NC] #구글
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?bing.com [NC] #빙
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?yahoo.com [NC] #야후
RewriteCond %{HTTP_REFERER} !search\.naver.com [NC] #네이버봇
RewriteCond %{HTTP_REFERER} !ws\.daum\.net [NC] #다음봇
RewriteCond %{HTTP_REFERER} !feedburner\. [NC] #피드버너
RewriteRule \.(jpg|jpeg|png|webp|gif|pdf|zip|rar|exe|apk)$ http://static.naver.net/w9/blank.gif [NC,R,L]
필자는 외부 링크로 인한 페이지 속도 저하를 예방하기 위해 그림 외부 무단 참조 막는 방법(새창)을 참고해 이미지가 외부로 링크되는 것을 차단하고 사용 중입니다. 필자는 대부분의 첨부 파일을 외부 링크 할 수 없도록 설정하였습니다.
#3. 브라우저 캐시 설정
# BEGIN Expire headers <ifModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 5 seconds" ExpiresByType image/x-icon "access plus 604800 seconds" ExpiresByType image/jpg "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 image/webp "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
블로그의 JS, CSS, 폰트 등을 접속자의 브라우저에 캐시화하여 트래픽 사용량을 낮추어 주는 이 설정은 대부분의 브라우저에서 기본 기능으로 지원하기 때문에 선택이 아닌 필수라고 할 수 있는 설정입니다. 참고로 너무 긴 설정값은 권장하지 않으며 필자 기준 tagdiv에서 권장하는 값으로 설정(새창)하고 사용 중입니다.