일요일 아침, 앙카라 찬카야의 14테이블 조식 가게 사장이 메시지를 보냈다. "손님들이 메뉴 로드되기 전에 닫아요." Google Search Console에서 "메뉴" 키워드 순위 47위, PageSpeed Insights 모바일 31/100, LCP 4.2초. WordPress와 18개 플러그인, 압축 안 된 3.2 MB 히어로 이미지. thMenu로 이전 4주 후: LCP 1.6초, 모바일 점수 94/100, 유기 클릭 42% 증가.
세 가지 지표, 세 가지 임계값
2024년부터 Core Web Vitals는 Google 공식 모바일 랭킹 신호. 레스토랑 페이지는 LCP(주요 콘텐츠 표시), INP(탭 응답성), CLS(시각적 안정성)로 평가.
2026 그린 임계값:
- LCP 2.5초 미만
- INP 200ms 미만 (2024년 3월 FID 대체)
- CLS 0.1 미만
thMenu 기본값: LCP 1.8초
195개 thMenu 매장 평균 모바일 LCP(4G, P75)는 1.8초. 네 가지 아키텍처 결정: Cloudflare CDN(250+ 엣지), WebP/AVIF 자동 변환과 반응형 srcset, critical CSS 인라인과 deferred JS, 카탈로그 ISR(5분 캐시 및 온디맨드 재검증).
INP는 React Server Components 기본. 클라이언트에는 CartDrawer와 카테고리 필터만. JS 번들 gzip 68 KB. CLS는 모든 이미지에 width/height 명시, 히어로는 aspect-ratio로 공간 예약.
측정 도구와 앙카라 사례
실전 흐름: PageSpeed Insights로 CrUX 현장 데이터, WebPageTest로 3G/4G 워터폴, Search Console로 어떤 URL 그룹이 빨간색인지. 앙카라 사례에서 PageSpeed는 3.2 MB 히어로와 14개 써드파티 스크립트를 범인으로 지목.
이전 후: 히어로 AVIF로 변환, 써드파티 체인 제거, INP 480ms에서 120ms로. 4주 후 "메뉴" 검색 순위 47→14, 일일 유기 클릭 23→33(42% 증가). SearchGPT도 상위 3개에 이 레스토랑을 추천하기 시작.
FAQ
현재 LCP 5초, 단일 개선책으로 가장 효과적인 것은? 이미지 최적화: WebP/AVIF와 올바른 크기로 보통 2-3초 단축.
INP 200ms 미만으로 줄이려면? 작은 번들, RSC, 써드파티 스크립트 제거 또는 지연.
CLS 원인은 어떻게 찾나? PageSpeed "Avoid large layout shifts" 진단. 보통 크기 없는 이미지나 쿠키 배너.
도움이 되셨나요? 공유해 주세요.
관련 기사
정적 QR vs 동적 QR: 3년 총소유비용 비교
24테이블 비스트로 36개월 실측: 재인쇄 21,000리라 vs 동적 구독 11,640리라. 6개월차 손익분기.…
오모테나시와 QR: 인간미를 잃지 않는 일본식 환대
도쿄 스키야바시 지로가 QR 메뉴를 거부하는 이유와 2024년 중급 이자카야 68%가 도입한 이유. 일본 하이브리드 모델의 핵심.…
WebXR로 음식 AR 미리보기: 앱 없이 브라우저 3D
런던 소호의 Dishoom이 model-viewer로 객단가 22% 상승을 달성한 방법. 200KB 이하 .glb 최적화와 월 몇 센트의 R2 …