워드프레스 사이트 로딩 속도가 너무 느리다고 느껴지신가요? 사이트가 느리면 SEO 순위와 사용자 경험 모두에 악영향을 미친다는 사실, 알고 계셨나요?
플러그인 외에도 사이트 속도를 개선하는 방법은 여러 가지가 있습니다. 대표적인 방법으로는 브라우저 캐시 활용과 파일 압축이 있으며, 이 두 가지 모두 .htaccess 파일을 수정하고 최적화하는 것만으로 구현할 수 있습니다.
브라우저 캐시란 무엇인가?
방문자가 웹사이트에 접속하면 해당 페이지를 구성하는 다양한 파일들이 다운로드되어 임시 저장 공간에 보관됩니다. HTML 문서, 이미지, 자바스크립트, CSS 파일 등이 대표적이며, 이 임시 저장 공간을 바로 '브라우저 캐시'라고 부릅니다.
문제는 캐시가 가득 차면 방문자 컴퓨터의 저장 공간을 과도하게 차지하게 되어 브라우저가 느려지고, 결과적으로 웹사이트 로딩 시간마저 길어진다는 점입니다.
다행히 .htaccess 파일만 적절히 수정하면 이 문제를 해결할 수 있습니다.
작업 전 반드시 확인해야 할 사항
.htaccess 파일을 수정하기 전에 아래 주의사항을 꼭 지켜주세요:
- 백업 필수: 수정 전에 반드시 기존 .htaccess 파일의 백업본을 만들어 두세요.
- 플러그인 비활성화: 사용 중인 워드프레스 플러그인은 일시적으로 비활성화하는 것이 안전합니다.
- 기준 측정: 수정 전에 GTmetrix, Pingdom, Google PageSpeed Insights 같은 도구로 현재 사이트 속도를 측정해 두면 개선 효과를 비교할 수 있습니다.
준비가 끝났다면 .htaccess 파일을 통해 정적 파일을 재방문자에게 더 오래 캐싱하도록 설정할 수 있습니다. cPanel 또는 FTP 중 편한 방법을 선택하세요.
cPanel로 .htaccess 파일 접근하기
웹 브라우저 주소창에 yourdomain.com/cPanel을 입력해 cPanel에 접속합니다. 워드프레스 설치 당시 받은 사용자 이름과 비밀번호로 로그인한 후, 파일 관리자(File Manager)를 찾아 클릭합니다.
.htaccess 파일은 사이트의 루트 폴더에 위치해 있으며, 파일명 앞의 점(.)은 숨김 파일임을 의미합니다. 따라서 숨김 파일 표시(Show Hidden Files) 옵션에 체크해야 파일을 볼 수 있습니다.
수정 실수로 사이트가 다운될 수 있으므로, 편집 전에 반드시 사본을 만들어야 합니다. .htaccess 파일을 클릭해 선택한 후 상단 메뉴의 다운로드 버튼을 누르면 백업이 완료됩니다.
백업이 끝났다면 파일 관리자에서 .htaccess 파일을 마우스 오른쪽 버튼으로 클릭하고 편집(Edit)을 선택해 코드를 수정하면 됩니다.
FTP로 .htaccess 파일 접근하기
FTP 클라이언트를 통해서도 .htaccess 파일을 수정할 수 있습니다. 아래 예시에서는 가장 널리 쓰이는 FileZilla를 기준으로 설명합니다.
FTP 클라이언트를 실행하고 호스트 주소(일반적으로 도메인 주소)와 사용자 이름, 비밀번호를 입력하세요. 정보를 모르겠다면 웹 호스팅 업체에 문의하면 됩니다.
접속 후에는 다음 순서대로 진행하세요:
- 사이트의 루트 디렉터리로 이동합니다.
- .htaccess 파일을 찾아 복사한 뒤 데스크톱으로 드래그합니다.
- 원본은 그대로 보관하고, 사본을 편집합니다. 문제가 생기면 언제든 원본으로 복구할 수 있습니다.
- 메모장 같은 텍스트 에디터로 파일을 수정합니다.
- 편집이 끝나면 파일을 루트 디렉터리에 다시 업로드합니다.
수정 중 실수가 발생해 사이트가 작동하지 않으면, 백업해 둔 원본 파일을 다시 업로드하면 해결됩니다.
Gzip으로 파일 압축하기
Gzip 압축은 CSS, HTML, PHP 파일의 용량을 줄여 로딩 속도를 크게 향상시키는 방법입니다. 아래 코드를 .htaccess 파일의 기존 코드 아래에 추가하면 됩니다.
<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>
코드 추가 후에는 반드시 변경 사항 저장(Save changes)을 클릭하는 것을 잊지 마세요.
브라우저 캐싱 설정하기
방문자가 사이트에 접속하면 브라우저는 해당 페이지와 연관된 모든 파일을 다운로드합니다. 브라우저 캐시를 활용하면 불필요한 리소스의 반복 다운로드를 막고, 페이지 디자인·스타일·자바스크립트 함수 등 이미 받은 요소들을 재사용하도록 서버에 지시할 수 있습니다.
즉, 재방문자에게는 이전에 다운로드된 페이지 요소를 무시하도록 설정하는 것이 브라우저 캐싱의 핵심입니다.
.htaccess 파일을 찾아 앞서 설명한 방법(cPanel 또는 FTP)과 동일하게 두 개의 사본을 만듭니다. 원본은 문제 발생 시 복구용으로 보관하고, 나머지 사본에 아래 코드를 기존 내용 아래에 추가합니다.
<IfModule mod_expires.c> ExpiresActive On ExpiresDefault A0 <FilesMatch "\.(txt|xml|js)$"> ExpiresDefault A691200 </FilesMatch> <FilesMatch "\.(css)$"> ExpiresDefault A691200 </FilesMatch> <FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$"> ExpiresDefault A691200 </FilesMatch> <FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$"> ExpiresDefault A691200 </FilesMatch> </IfModule> <IfModule mod_headers.c> <FilesMatch "\.(txt|xml|js)$"> Header set Cache-Control "max-age=691200" </FilesMatch> <FilesMatch "\.(css)$"> Header set Cache-Control "max-age=691200" </FilesMatch> <FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$"> Header set Cache-Control "max-age=691200" </FilesMatch> <FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$"> Header set Cache-Control "max-age=691200" </FilesMatch> </IfModule>
코드를 추가한 뒤에는 반드시 저장(Save)을 클릭해 변경 사항을 반영하세요.
마무리: 속도 개선이 가져오는 효과
파일 압축과 브라우저 캐싱을 함께 적용하면 웹페이지 로딩 시간이 눈에 띄게 단축됩니다. 이는 검색 엔진 순위 상승으로 이어지고, 방문자에게도 쾌적한 사용자 경험을 제공합니다. 페이지 로딩에 몇 초 이상 기다려 주는 방문자는 거의 없다는 점을 기억하세요.