비즈니스 웹사이트를 위한 Core Web Vitals 최적화

페이지가 느리면 사용자는 처음 3초 안에 떠납니다. Google도 이를 알고 있으며, 2021년부터 Core Web Vitals를 순위 요소로 삼았습니다. 비즈니스 웹사이트에서 속도는 더 이상 기술적 세부 사항이 아니라 매출입니다.

반드시 알아야 할 세 가지 지표

LCP는 가장 큰 요소가 나타나는 시점을 측정합니다. INP는 입력 지연을 측정합니다. CLS는 레이아웃 이동을 측정합니다. 좋은 페이지는 LCP 2.5초 미만, INP 200ms 미만, CLS 0.1 미만이 필요합니다.

• LCP — 이미지를 최적화하고 화면 상단 콘텐츠를 우선합니다.
• INP — JavaScript를 분할하고 메인 스레드 차단을 피합니다.
• CLS — 이미지, 폰트, 광고에 고정 크기를 확보합니다.

우리가 95 이상을 달성한 방법

우리는 아키텍처부터 시작합니다. 서버 사이드 렌더링, 라우트 기반 번들 분할, 그리고 화면 하단의 모든 것을 지연 로딩합니다. 이미지는 기기 크기에 맞춘 AVIF/WebP로 제공하고, 폰트는 font-display: swap으로 로드해 텍스트가 즉시 나타나게 합니다.

성능은 일회성 작업이 아닙니다. 모든 풀 리퀘스트에서의 규율입니다.

— Huy Nguyễn

마지막으로, 실험실뿐 아니라 실제 기기에서 지표를 추적하기 위해 실사용자 모니터링(RUM)을 추가합니다. 그것이 보기 좋은 숫자와 진짜로 빠른 경험의 차이입니다.