워드프레스 속도를 최적화하는 방법 중 하나로 브라우저 캐싱(Browser Caching)을 설정할 수 있습니다. 브라우저 캐싱에 대해 Gtmetrix에서는 다음과 같이 설명하고 있습니다.
브라우저 캐싱이란?브라우저가 웹페이지를 로드할 때마다 페이지를 올바르게 표시하기 위해 모든 웹 파일을 다운로드해야 합니다. 여기에는 모든 HTML, CSS, JavaScript, 이미지가 포함됩니다.
일부 페이지는 몇 개 파일만으로 구성되어 크기가 작을 수 있습니다(예: 수 KB). 그러나 많은 파일로 구성되어 수 MB 크기까지 증가하는 웹페이지들이 있을 수 있습니다. 예를 들어 트위터는 3MB 이상입니다.
여기에서 두 가지 문제가 발생합니다.
- 이러한 큰 파일들은 로드하는 데 시간이 더 걸리고 특히 인터넷 속도가 느리거나 모바일 기기에서 웹페이지를 열면 고역이 아닐 수 있습니다.
- 각 파일은 서버에 별도로 요청을 합니다. 서버에서 동시에 요청을 더 많이 받을 수록 해야 할 일이 더 많아져서 페이지 속도를 늦출 뿐입니다.
브라우저 캐싱(Browser caching)은 이러한 파일을 사용자의 브라우저에 로컬로 저장하여 도움이 될 수 있습니다. 처음 방문할 때에는 로드 시간이 동일하지만, 사이트를 재방문하거나 페이지를 새로 고치거나, 사이트의 다른 페이지로 이동할 때 필요한 일부 파일이 이미 로컬에 저장되어 있게 됩니다.
따라서 사용자의 브라우저가 다운로드해야 할 데이터 양이 줄어들고, 서버에 대한 요청 수도 더 적어집니다. 결과는? 페이지 로딩 속도가 감소하게[즉, 더 빨라지게] 됩니다.
(출처: https://gtmetrix.com/leverage-browser-caching.html)
워드프레스에서 브라우저 캐싱을 활용하는 방법에는 크게 두 가지가 있습니다. 하나는 브라우저 캐싱을 지원하는 플러그인을 사용하는 것이고, 하나는 .htaccess 파일 등에 코드를 추가하는 것입니다.
W3 Total Cache, WP Super Cache 등 캐시 플러그인에는 일반적으로 브라우저 캐싱 옵션이 제공됩니다.
플러그인을 사용하지 않고 브라우저 캐싱 기능을 활용하려면 다음 코드를 .htaccess 파일에 추가할 수 있습니다.
<IfModule mod_expires.c>
FileETag MTime Size
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month "
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
</IfModule>
// 출처: https://www.collectiveray.com/wp/tips/leverage-browser-caching-wordpress
저는 캐시 플러그인에서 브라우저 캐싱 옵션을 활성화하니 문제가 발생하여 한 동안 브라우저 캐싱 기능을 사용하지 않다가 오늘 위의 코드를 추가했습니다. 위의 코드를 추가한 후에 사이트 성능을 체크해보니 Performance Grade가 증가한 것을 확인할 수 있었습니다.
Pingdom Speed Test 사이트에서 속도를 체크해보니 (속도를 체크하는 시점에 따라) 속도가 비슷하거나 약간 빨라진 것으로 측정되었고 Leverage browser caching(브라우저 캐싱 활용) 항목이 양호한 상태로 바뀌었습니다.
브라우저 캐시 기능을 활성화한 후에는 사이트에 문제가 발생하지 않는지 관찰하시기 바랍니다. 가끔 글을 발행해도 전면 페이지에 새 글이 표시되지 않는 문제가 발생할 수 있습니다. 그런 경우 플러그인보다는 코드를 사용하여 추가하는 방법을 고려해볼 수 있습니다.