워드프레스 모바일 속도 개선 방법과 적용 후기

블로그나 웹사이트를 워드프레스로 제작했다면, 속도 개선에 한 번쯤 고민해 보셨을 겁니다.
초기에는 이미지와 CSS가 가벼워서, 트래픽도 거의 없기 때문에 속도 측정 자체가 큰 의미가 없죠.

하지만 운영하다 보면 트래픽이 늘어나고 이미지와 CSS, 다양한 기능이 추가되면서 웹사이트 속도가 느려질 수 있습니다.
이때 구글의 PageSpeed Insights를 활용해 웹사이트 속도, 성능, 접근성, 검색엔진 최적화를 검토하고 문제점을 개선해야 합니다.

이번 글에서는 제가 운영하는 블로그를 기준으로 문제점을 파악하고, 하나씩 개선한 과정을 공유해 드리겠습니다.

📌 모바일 기준으로 문제점을 알아본 후 개선 방법도 알려드리겠습니다.

문제점 1 : ▲ 이미지 전송 개선

PSI(PageSpeed Insights)에서 알려주는 내용:
이미지의 다운로드 시간을 줄이면 페이지의 체감 로드 시간과 LCP를 개선할 수 있습니다. 이미지 크기 최적화에 대해 자세히 알아보기 ^LCP

워드프레스(WordPress)에서는 플러그인을 사용해서 이미지의 최적화가 가능하다고 소개가 되어있습니다.
그래서, 기존에 설치한 플러그인 중 WP-Optimize 플러그인은 DB 최적화를 위해 설치를 했지만, 메뉴 중 이미지, 캐시에 대한 설정도 있는 것을 확인하고, 이미지 최적화를 아래와 같이 설정했습니다.

개선 방법 1 : 이미지 압축

지금까지 등록했던, 이미지에 대해서 압축을 시도 했습니다.
새로 추가되는 이미지는 자동 압축되게 선택했습니다.

개선 방법 1 결과

49점에서 58점으로 나쁨에서 개선권고로 변경 되었습니다.

개선 방법 2 : 이미지 지연 로드

이미지 지연 로드란?
웹사이트에 이미지가 많아질수록 페이지 로딩 속도가 느려집니다. 이럴 때 이미지 지연 로드(Lazy Load)를 사용하면, 방문자가 실제로 보는 화면에 필요한 이미지부터 순차적으로 로딩되어 속도를 크게 개선할 수 있습니다.

아래 예시 코드를 적용하면 됩니다.

<img src="…" loading="lazy" alt="…" />

<img src="…" loading="lazy" alt="…" />

HTML

워드프레스 아스트라 테마는 기본적으로 이미지 지연 로드 태그가 적용이 되어있는 것 같습니다.
확인해보니 <img> 태그에 전부 적용이 되어있습니다.
그래서, 따로 개선 결과는 없습니다.

개선방법 3 : 이미지 사이즈를 작게 제작

포스팅 글의 대표 이미지 사이즈는 제작시 가로 600픽셀, 세로 338픽셀로 제작 했습니다.
실제로 목록에서 보여주는 사이즈는 이 보다 작은 356픽셀 x 201픽셀입니다. 모바일에서 사용하기에는 큰 편입니다.

대표 이미지 사이즈를 356픽셀 x 세로 201픽셀로 제작
최신 이미지 형식(WebP, AVIF)을 사용. (이 부분은 제가 한번 진행 후 알려드리겠습니다)
이미지에 손상이 안되는 만큼 최대한 압축률을 높인다.

문제점 2 : ▲ 네트워크 종속 항목 트리

개선 방법 1 : 페이지당 보여줄 글의 수 수정

워드프레스 관리자 > 설정 > 읽기 페이지에서 상단의 페이지당 보여줄 글 수 설정을 18 -> 9로 설정
모바일에서 페이지 로딩 시 글 수를 줄여 로딩 속도 개선
58점에서 68점으로 개선 되었습니다.

개선 방법 2 : 웹 폰트 URL 제거

아스트라 테마를 사용 중이며, 추가 CSS 부분은 커스텀 CSS를 추가하는 영역입니다.
워드프레스 세팅 초반 폰트를 변경하고 싶어서 CDN으로 웹 폰트를 설정했던 부분이 속도 지연으로 보여 주석 처리했습니다.
차후 속도 지연이 없는 웹폰트 사용하는 방법에 대해서 적용한 다음 알려드리겠습니다.

최종 테스트 결과

데스크탑 성능은 96점까지 높아졌지만, 모바일 성능은 아직 66점입니다.
모바일 기기의 사용이 많아지기 때문에 조금 더 모바일 성능에 대해서 개선해 보도록 하겠습니다.

추가 개선사항 및 결과

개선 사항 처리 후 몇 가지를 더 테스트했지만, 확실한 개선 사항은 없었습니다.
마지막으로 애드센스 상단 광고 소스를 제거했더니 확실한 개선 결과를 보여주어서 이렇게 추가 개선 사항으로 알려드리겠습니다.

먼저 결과를 보여드리겠습니다. 성능이 아주 많이 개선되었습니다.
제 블로그의 경우 애드센스 광고를 수동으로 등록 중입니다.
이유는 과도한 광고 개시를 막고 내가 원하는 위치에 광고를 넣기 위함이였습니다.
그래서, 모든 페이지의 본문 상단, 하단에 고정 광고를 워드프레스 관리자 > 모양 > 테마 파일 편집기 메뉴에서 광고 소스를 추가했습니다.

제거 전과 제거 후의 화면입니다.
애드센스 광고는 수익과 직결되는 부분이지만, 통계치를 확인 결과 상단 광고 클릭률이 낮은 편이였습니다.
그래서, 상단 광고를 제거하고 속도의 성능을 높이고, 하단이나 인페이지 광고로 수익을 내는 구조로 변경했습니다.
성능의 차이가 너무 큰 편이였던 점과 상단 광고 클릭율이 낮은 점 때문에 제거가 가능했습니다.

마무리

모바일 최적화를 위해 이미지 로딩 전략을 개선하고, 불필요한 웹폰트 CDN을 선제적으로 제거했으며, 목록 노출 개수를 조정해 체감 속도를 향상시켰습니다. 이번 회차는 즉시 조치가 가능한 과제를 중심으로 처리했습니다.
다음 회차에는 비교적 시간이 필요한 과제를 수행한 뒤 성과를 정리해 공유드리겠습니다.

Summary in English

As the site grows—more traffic, heavier images and CSS, and added features—performance can decline. That’s when using Google PageSpeed Insights becomes essential to evaluate speed, performance, accessibility, and SEO, and to address the issues it surfaces.