Voices: 진단 4년 후, 모바일 LCP 2.1초

 진단 · Voices
진단 4년 후, 모바일 LCP 2.1초하나로 합쳐진 세 개의 사이트, 약 25개 URL, 그리고 Lighthouse에서만 빨라 보였던 블로그.
2.1초모바일 LCP, CrUX 2026년 8월
175ms모바일 INP, CrUX 2026년 8월
0모바일 CLS, CrUX 2026년 8월
고객사Voices, 성우 마켓플레이스
플랫폼WordPress 및 프로필 전용 별도 앱
서비스진단, 2022년
 고객사
WordPress, 프로필 전용 별도 앱, 그리고 블로그Voices의 사이트는 사실상 세 개 사이트였습니다. WordPress 마케팅 사이트, 성우 프로필용 별도 앱, 블로그와 팟캐스트였습니다. 전체에 걸쳐 약 25개 URL을 점검했습니다.
 발견한 문제와 조치 내용
홈페이지의 레이아웃 이동, 느린 프로필, 그리고 실제 방문자는 체감하지 못한 블로그의 94점개발팀과 마주 앉아 무엇부터 수정해야 할지 짚어주고, 필요한 노하우도 함께 전달했습니다. 개발팀은 이를 빠르게 흡수해 거침없이 실행에 옮겼습니다. 얼마 후 개발 매니저가 직접 구현한 작업 목록을 메일로 보내왔는데, 중요한 이미지에 fetchpriority를 적용한 세부 사항까지 빠짐없이 담겨 있었습니다.
문제점
조치 내용
CLS
홈페이지에서 세 번 연속으로 레이아웃 이동이 발생했습니다. fallback 폰트가 Roboto로 바뀌고, 크기가 지정되지 않은 히어로 이미지가 전체를 밀어내린 뒤, 다시 Roboto가 Poppins로 바뀌었습니다.
개발팀의 수정 목록에는 폰트 관련 조치가 포함되어 있었습니다. 중복 폰트를 제거하고 font-display를 수정한 것입니다. 현재 모바일 CLS는 0입니다.
LCPTTFB
가장 중요한 페이지인 성우 프로필은 별도 앱에서 실행되었고, 서버 응답과 데모 플레이어, 사진, 스크립트가 로드되기를 기다려야 했습니다.
캐싱을 적용해 서버 응답 대기 시간을 없앴습니다. 데모 플레이어와 파형(waveform)은 방문자가 재생하거나 해당 위치로 스크롤할 때 로드되도록 변경했고, 프로필 사진에는 적절한 크기, 우선순위, dimensions를 지정했으며, 스크립트는 footer로 옮겼습니다. 프로필 페이지는 다시 green 상태로 돌아왔습니다.
Blog
최적화 플러그인이 약 4초 동안 스크립트 로드를 지연시켰기 때문에 블로그는 Lighthouse에서 94점을 기록했습니다. 하지만 실제 방문자는 그 스크립트들을 고스란히 기다려야 했습니다.
블로그를 위한 저의 첫 조언은 그 플러그인을 바로 제거하라는 것이었습니다.
  성우 프로필
마케팅 개발자인 Tom은 이직하기 전 저의 조언을 상당 부분 반영했고, 2022년 3월에는 PageSpeed에서 프로필 페이지가 종종 green을 기록했습니다. 하지만 이후 사이트 전반에 걸쳐 신규 기능들이 대거 배포되면서 프로필 지표가 다시 떨어졌습니다. 5월에 개발 매니저인 Jayme Cousins가 다시 한번 확인해 줄 수 있겠느냐는 메일을 보내왔습니다. 다음 주 월요일, 빠르게 성과를 낼 수 있는 세 가지 조치를 전달했습니다. Cloudflare의 Rocket Loader를 비활성화하자 Google 및 Apple 로그인 스크립트가 render blocking 상태가 되었으므로 defer를 적용해 body 끝으로 옮겨야 했습니다. 로고에는 width와 height를 지정해야 했습니다. 그리고 LCP 요소는 CSS 배경 이미지였기에 preload를 적용한 실제 이미지로 바꿔야 했습니다. 고객사의 빅토리아의 날과 이곳의 예수 승천일 사이인 수요일에 일정을 맞췄고(휴일에 일했다면 아내가 좋아하지 않았을 겁니다), 그날 간단한 페이지 캐시가 포함된 예제 코드도 함께 보냈습니다.
8월이 되자 프로필 페이지의 head 크기는 251 kB에서 40 kB로 줄었습니다.
2022년 5월성우 프로필 페이지, 개선 전251 kBhead 크기
28@font-face 규칙
2블로킹 스크립트
2022년 8월동일한 프로필 페이지, 개선 후40 kBhead 크기
0@font-face 규칙
0블로킹 스크립트
Internet Archive에 기록된 Voices 프로필 페이지(2022년 5월 17일 및 8월 13일), HTML 기준으로 집계한 수치입니다.
CrUX 데이터
데스크톱 환경에서는 2차 작업의 효과를 분명히 확인할 수 있습니다. 4월에 신규 기능이 배포된 직후 Time to First Byte는 최고 1.1초에 달했습니다. 10월에는 0.8초까지 떨어지며 green에 진입했고, LCP는 3월의 1.8초에서 1.5초로 줄어들었습니다.
0.8초2022년 3월1.1초7월0.8초10월데스크톱 TTFB, p75
2.5초4.0초1.8초2022년 3월7월1.5초10월데스크톱 LCP, p75
CrUX의 voices.com 데스크톱 데이터(2022년 3월~10월). BigQuery의 Google CrUX 데이터를 바탕으로 산출한 p75 기준이며 막대 하나가 1개월을 나타냅니다. 초록색은 양호, 주황색은 개선 필요, 빨간색은 나쁨입니다.
Field data
4년 후 이번 사례를 위해 CrUX에서 Voices를 다시 확인해 보았는데, 전 영역이 green 상태였습니다. 모바일에서 LCP는 2.0~2.3초, INP는 150~200ms 사이에 머물고 있으며, CLS는 지난 1년간 매달 0이었습니다. 이 부분은 온전히 고객사 개발팀이 해낸 일입니다.
2.5초4.0초2.1초2025년 10월2026년 1월4월7월2.3초모바일 LCP, p75
200 ms175 ms2025년 10월2026년 1월4월200 ms7월175 ms모바일 INP, p75
CrUX의 voices.com 모바일 데이터(2025년 10월~2026년 9월). BigQuery의 Google CrUX 데이터를 바탕으로 산출한 p75 기준이며 막대 하나가 1개월을 나타냅니다. 초록색은 양호, 주황색은 개선 필요, 빨간색은 나쁨입니다.
 "Arjen은 Core Web Vitals 문제를 해결하는 데 결정적인 역할을 했습니다. 핵심 프로필 페이지를 PageSpeed의 green 영역으로 되돌려 놓았습니다. 제가 가장 높이 평가하는 점은 실무에 직접 뛰어드는 그의 태도입니다. 단순히 병목 지점만 짚어내는 것이 아니라, 수정 사항이 실제 라이브에 반영될 때까지 개발팀과 직접 협력하며 함께 작업했습니다."Jayme Cousins, 개발 매니저, Voices.com
교훈
스크립트를 지연시키는 플러그인은 Lighthouse를 속일 뿐입니다테스트는 보이는 것만 점수에 반영하며, 당시에는 스크립트들이 포착되지 않았을 뿐입니다. 실제 방문자의 모바일 기기는 여전히 그 스크립트를 전부 다운로드하고 실행합니다.
하나인 줄 알았던 레이아웃 이동은 세 개였습니다리포트에는 하나의 CLS 수치만 나왔습니다. 하지만 trace를 확인해 보니 세 번의 이동이 연속으로 발생하고 있었고, 각각 개별적인 수정이 필요했습니다.
개발팀에 노하우를 전수하면 green이 유지됩니다진단은 2022년에 진행했습니다. 개발팀은 지표를 계속 green으로 유지했고, 모바일 CrUX 기준은 지금도 통과하고 있습니다.
 Lighthouse에서는 green, Search Console에서는 red입니까?방문자에게 무엇이 왜 느린지 정확히 찾아내고, 개발팀이 우선순위에 맞춰 바로 작업할 수 있도록 해결책을 정리해 드립니다.
진단 신청하기더 많은 성과는 고객 사례 페이지에서 확인할 수 있습니다.
Core Web Vitals Voices: 진단 4년 후, 모바일 LCP 2.1초