내 WordPress PageSpeed 점수를 60에서 95로 향상시킨 방법

Source: Dev.to

페이지 속도가 중요한 이유

Google 가이드라인에서는 웹사이트 속도를 중요한 순위 요소로 꼽습니다. 빠른 사이트는 사용자 경험을 향상시켜 방문자가 더 오래 머무르게 합니다.

PageSpeed Insights는 핵심 웹 바이탈도 평가합니다:

• Largest Contentful Paint (LCP) – 주요 콘텐츠가 로드되는 시간
• Cumulative Layout Shift (CLS) – 예기치 않은 레이아웃 이동량
• Total Blocking Time (TBT) – JavaScript가 페이지를 차단하는 시간

이 지표들을 개선하면 SEO와 사용자 경험이 모두 향상됩니다.

1단계: 이미지 최적화

이미지는 로드 속도를 저하시키는 일반적인 원인입니다.

• 모든 이미지를 WebP 형식으로 변환하여 품질을 유지하면서 파일 크기를 줄입니다.
• 각 이미지는 100 KB 이하로 유지합니다.
• lazy loading을 활성화해 이미지가 뷰포트에 들어올 때만 로드되도록 합니다.

이러한 변경으로 페이지 로드 시간이 크게 단축되었습니다.

2단계: LiteSpeed Cache 튜닝으로 속도 향상

많은 사이트가 캐시 플러그인을 설치하지만 기본 설정 그대로 두는 경우가 많습니다. LiteSpeed Cache를 적절히 튜닝하면 큰 효과를 볼 수 있습니다. 나는 다음을 활성화했습니다:

• CSS 압축
• JavaScript 압축
• JavaScript 지연 로드
• 사용되지 않는 CSS 제거
• 브라우저 캐시

효과적인 캐싱은 PageSpeed 점수를 크게 끌어올립니다.

3단계: 불필요한 플러그인 제거

플러그인이 과다하면:

• 추가 HTTP 요청 발생
• JavaScript 실행량 증가
• 서버 부하 상승

필수적이지 않은 플러그인을 삭제하고 간단한 기능은 커스텀 CSS로 대체했습니다. 플러그인 구성을 경량화하니 성능이 크게 개선되었습니다.

4단계: 렌더링 차단 리소스 제거

렌더링 차단 CSS와 JavaScript는 페이지 렌더링을 지연시킵니다. JavaScript 로드를 지연하고 사용되지 않는 CSS를 제거함으로써 차단 리소스 수가 감소하고 첫 페인트 시간이 빨라졌습니다. PageSpeed Insights와 같은 도구를 사용해 이러한 리소스를 식별할 수 있습니다.

5단계: 폰트 최적화 및 레이아웃 안정성 확보

폰트 스타일이 너무 많으면 성능에 악영향을 줍니다. 나는 다음을 수행했습니다:

• 효율적인 폰트 로딩 기법 적용 (예: font-display: swap).
• 컨테이너에 고정 크기를 지정해 레이아웃 이동을 방지하고 CLS 문제를 감소시켰습니다.

결과

테스트 점수뿐 아니라 실제 사용자 상호작용에서도 개선이 뚜렷하게 나타났습니다.

최종 생각

웹사이트 성능 개선은 대대적인 개편이 아니라 핵심 영역—이미지, 캐시, 스크립트, 레이아웃 안정성—을 미세 조정하는 것입니다. 워드프레스 사이트에서는 이러한 최적화가 사용자 경험을 향상시키고 검색 엔진 순위도 끌어올립니다.