핵심 웹 바이털 측정
성능 지표를 추적하고 개선합니다.
핵심 웹 바이털 측정은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
웹 핵심 지표가 중요한 이유
Core Web Vitals는 Google이 제공하는 사용자 중심 성능 지표입니다. 로딩, 상호작용성, 시각적 안정성을 수치화하며 사용자 경험과 검색 순위 모두에 영향을 줍니다.
세 가지 지표
세 가지 지표는 LCP(최대 콘텐츠 렌더링 시간), CLS(누적 레이아웃 이동), INP(다음 페인트까지의 상호작용)입니다. 각 지표는 사용자가 인식하는 성능의 서로 다른 측면을 대상으로 합니다.
LCP
LCP는 가장 큰 표시 요소(대표 이미지나 제목)의 렌더링이 완료되는 시점을 측정합니다. 2.5초 미만이면 양호합니다. SSR은 초기 HTML에 해당 콘텐츠를 전달하여 이를 개선합니다.
CLS
CLS는 페이지가 로드될 때 예기치 않게 레이아웃이 이동하는 정도를 측정합니다. 0.1 미만이면 양호합니다. 이미지와 광고를 위한 공간을 미리 확보하고, 기존 콘텐츠 위에 콘텐츠를 삽입하지 마세요.
<img src="hero.jpg" width="800" height="450" alt="...">
<!-- explicit dimensions prevent shift -->INP
INP는 페이지가 사용되는 전체 기간 동안 사용자 상호작용에 얼마나 빠르게 반응하는지 측정하며, 이전의 FID를 대체합니다. 200ms 미만이면 양호합니다. 메인 스레드에서 무거운 JS를 실행하면 INP가 나빠집니다.
SSR이 웹 핵심 지표를 개선하는 방법
SSR은 콘텐츠를 더 빠르게 표시하여 LCP를 개선하고, 안정적인 레이아웃을 일찍 전달하여 CLS를 줄일 수 있습니다. 점진적 하이드레이션은 초기 JavaScript 전송량을 줄여 INP를 개선합니다.
실험실 데이터와 현장 데이터
실험실 데이터는 통제된 환경에서 Lighthouse와 같은 시뮬레이션 도구로 수집합니다. 현장 데이터(CrUX, RUM)는 실제 사용자에게서 수집합니다. 두 데이터를 모두 사용해 최적화하세요. 검색 순위에는 현장 데이터가 사용됩니다.
Lighthouse로 측정하기
Chrome DevTools 또는 CI에서 Lighthouse를 실행하면 실험실 환경의 LCP와 CLS, INP를 가늠할 수 있는 총 차단 시간 대체 지표, 그리고 실행 가능한 진단 결과를 얻을 수 있습니다.
// npx lighthouse https://example.com --viewweb-vitals 라이브러리
web-vitals 라이브러리를 사용하면 브라우저에서 실제 사용자 지표를 수집하여 분석 엔드포인트로 전송할 수 있습니다.
import { onLCP, onCLS, onINP } from 'web-vitals';
onLCP(console.log);
onCLS(console.log);
onINP(console.log);JavaScript 줄이기
번들 크기를 줄이면 INP와 상호작용 가능 시간이 개선됩니다. 경로 수준 지연 로딩, @defer, 점진적 하이드레이션, 트리 셰이킹을 사용하여 전송되는 JS를 줄이세요.
반복하고 확인하기
성능 개선은 측정하고, 변경하고, 다시 측정하는 과정입니다. SSR, 하이드레이션 또는 defer를 활성화한 후 Lighthouse를 다시 실행하고, 실제 개선이 있었는지 확인하기 위해 몇 주 동안 현장 데이터의 추이를 관찰하세요.
빠른 확인
Core Web Vitals에 대한 지식을 확인해 보세요.
요약
Core Web Vitals(LCP, CLS, INP), SSR과 점진적 하이드레이션이 이를 개선하는 방법, 실험실 데이터와 현장 데이터의 차이, Lighthouse와 web-vitals 라이브러리를 사용한 측정 방법을 배웠습니다. 그런 다음 다시 측정하며 개선을 반복했습니다.
자주 묻는 질문
“핵심 웹 바이털 측정” 강의는 무료인가요?
네 — “핵심 웹 바이털 측정” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“핵심 웹 바이털 측정”에서 뭘 배우나요?
성능 지표를 추적하고 개선합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“핵심 웹 바이털 측정” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.