온라인 비즈니스의 성공에는 보안만큼이나 사이트 속도가 중요합니다. 페이지 로딩 시간은 사용자 경험을 좌우하는 핵심 요소일 뿐만 아니라, 검색 엔진 최적화(SEO)에도 직접적인 영향을 미칩니다. 실제로 사이트 속도가 1초 늦어질 때마다 전환율은 약 7%씩 하락하는 것으로 알려져 있습니다. 이를 역산하면 7초 지연 시 전환율이 절반 가까이 줄어든다는 의미입니다.
PageSpeed Insights로 사이트 속도 진단하기
사이트 로딩 속도에 영향을 주는 요소는 매우 다양합니다. 감으로 최적화 작업을 시작하기보다는 구글이 제공하는 PageSpeed Insights 도구를 활용해 어떤 부분을 수정해야 하는지 정확히 파악하는 것이 좋습니다.
1. PageSpeed Insights 웹사이트에 접속합니다.
2. '웹페이지 URL 입력' 텍스트 박스에 분석할 자신의 웹사이트 주소를 입력합니다. 여기서는 MakeTechEasier.com을 예로 들겠습니다.
3. '분석(Analyze)' 버튼을 클릭하고 결과가 로딩될 때까지 기다립니다.
4. 분석이 완료되면 웹사이트 성능에 대한 리포트 페이지가 표시됩니다. 이 리포트는 현재 잘 되고 있는 부분과 개선이 필요한 부분을 모두 알려주므로, 제시된 권장 사항을 하나씩 적용해 나가면 됩니다.
리포트는 모바일과 데스크톱 화면별 속도 보고서를 각각 제공합니다. 각 보고서는 '개선 가능한 항목(Possible Optimizations)'과 '적용된 최적화(Optimizations Found)'로 나뉘며, 전자는 앞으로 해야 할 최적화 작업을, 후자는 이미 완료된 개선 사항을 보여줍니다.
Make Tech Easier(MTE)의 경우 개선 가능한 항목은 다음과 같습니다.
- 첫 화면 콘텐츠에서 렌더링을 차단하는 JavaScript와 CSS 제거
- 브라우저 캐싱 활용
- 이미지 최적화
이 목록은 어디까지나 MTE 기준이며, 아래 이미지에서 볼 수 있듯이 구글의 기준으로 MTE는 충분히 빠른 편입니다. 속도 최적화가 덜 된 웹사이트라면 더 많은 개선 제안 목록을 받게 됩니다.
한 가지 유의할 점은 PageSpeed Insights가 개별 페이지 단위로 분석한다는 것입니다. 사이트 전체를 대략적으로 평가하는 것이 아니라 각 페이지별 로딩 속도를 정확하게 확인할 수 있다는 점에서 매우 유용한 도구입니다.
참고로 MTE의 '적용된 최적화' 항목은 다음과 같습니다.
워드프레스 사이트 속도 최적화 방법
PageSpeed Insights가 제안하는 최적화 항목을 바탕으로 워드프레스 사이트 속도를 개선하는 구체적인 방법을 살펴보겠습니다.
1. 첫 화면 콘텐츠의 렌더링 차단 JavaScript·CSS 제거
간단히 말해 PageSpeed는 특정 CSS가 화면에 렌더링되는 속도를 개선할 것을 권장합니다. 문제는 제안된 해결 방법이 상당히 기술적이라 개발자가 아니라면 따라 하기 어렵다는 점입니다. 코드를 직접 건드리지 않고 워드프레스 사이트 속도를 높이려면 Autoptimize 플러그인을 활용하는 것이 좋습니다.
Autoptimize는 스크립트와 스타일시트를 통합·압축(minify)·캐싱하고, 기본적으로 CSS를 페이지 헤드에 삽입하며 스크립트를 푸터로 이동시켜 지연 로딩(defer) 처리합니다. HTML 코드 자체도 압축해 주기 때문에 페이지를 확실하게 가볍게 만들어 줍니다.
2. 브라우저 캐싱 활용
워드프레스 캐싱 플러그인을 사용해 사이트 콘텐츠를 캐시하세요. 캐싱은 웹 콘텐츠를 정적 HTML 파일 형태로 제공함으로써 로딩 속도를 크게 향상시킵니다. 대표적인 워드프레스 캐싱 플러그인으로는 WP Super Cache, W3 Total Cache, WP-Rocket, WP Fastest Cache 등이 있습니다.
3. 이미지 최적화
이미지 최적화 방법은 다양합니다. 업로드 전에 미리 용량을 줄여두는 것이 기본이며, 여기에 플러그인을 더해 추가 최적화를 할 수도 있습니다.
Fireworks나 포토샵으로 이미지를 제작했다면 'Save for Web(웹용으로 저장)' 옵션을 활용해 파일 크기를 줄이세요. 그래픽 프로그램이 없다면 ImageOptim(맥 전용), Compressor.io(웹 기반), TinyPNG(웹 기반) 같은 무료 온라인 최적화 도구를 이용하면 됩니다.
최적화 과정을 자동화하고 싶다면 WP Smush, PixPie 같은 이미지 최적화 플러그인을 사용하는 것도 좋은 방법입니다.
LazyLoad 플러그인도 사이트 속도 개선에 효과적입니다. 사용자가 페이지를 아래로 스크롤할 때 이미지를 그때그때 불러오는 방식으로 동작해 전송 대역폭을 크게 절약할 수 있습니다.
추가적인 사이트 속도 최적화 방법
눈치챘겠지만 대부분의 최적화 작업은 플러그인만으로 처리할 수 있어 코드를 직접 수정할 필요가 없습니다. 하지만 일부 최적화는 플러그인을 넘어서는 영역입니다. 사이트 속도에 영향을 주는 또 다른 두 가지 핵심 요소는 바로 호스팅 업체와 호스팅 플랜 선택, 그리고 CDN(콘텐츠 전송 네트워크) 활용입니다.
호스팅 업체와 호스팅 플랜
'무제한 페이지뷰'를 내세우는 공유 호스팅이 좋은 조건처럼 보일 수 있지만, 숨겨진 비용이 따릅니다. 사이트 속도가 느려져 평판, SEO, 사용자 경험이 모두 악화되고, 잦은 다운타임까지 겪게 됩니다.
호스팅이 사이트 속도에 미치는 영향은 얼마나 클까요? Colocation America에 따르면 VPS 호스팅으로 전환 시 사이트 속도가 62% 향상되었습니다. SEJ의 조사에서도 공유 호스팅 서버의 웹페이지는 로딩에 약 8초가 걸린 반면, VPS 호스팅에서는 2초 조금 넘게 걸렸습니다.
가능하다면 공유 호스팅이 아닌 VPS 또는 전용 호스팅으로 전환하세요. 저렴한 호스팅이 처음에는 비용을 절약해 주는 것처럼 보이지만, 결국 비즈니스를 망칠 수 있습니다.
또한 GZIP 압축을 지원하는 호스팅 업체를 선택하세요. GZIP은 동영상, 오디오, 이미지 파일을 포함한 파일 크기를 최대 70%까지 줄여주면서도 품질 저하 없이 사이트 속도를 눈에 띄게 끌어올릴 수 있습니다. GD Network에서 제공하는 도구로 자신의 사이트가 GZIP 압축을 사용 중인지 확인할 수 있습니다.
CDN으로 트래픽 부담 나누기
사이트 트래픽이 계속 증가하고 있다면 Amazon CloudFront 같은 CDN(Content Delivery Network) 사용을 고려하세요. CDN은 이미지, CSS, JavaScript 등 사이트의 정적 파일들을 전 세계 여러 지역의 서버에 분산 배치합니다. 방문자는 자신과 지리적으로 가까운 CDN 서버에서 콘텐츠를 받아오기 때문에 더 빠른 속도를 경험하게 됩니다.
CDN Enabler 플러그인을 사용하면 원하는 CDN 서비스를 워드프레스 사이트에 손쉽게 연동할 수 있습니다.
마무리
사이트 보안에 타협하지 않듯이, 워드프레스 사이트 속도 역시 마찬가지로 여겨야 합니다. 구글은 명확하게 사이트 속도를 설계 단계부터 우선시하는 웹사이트를 검색 순위에서 우대한다고 밝힌 바 있습니다. 검색 엔진만이 아니라 방문자 역시 느리고 버벅거리는 사이트보다 빠른 사이트를 선호합니다. 오늘 소개한 팁들을 지금 바로 적용해 보세요!