![bg right](https://images.unsplash.com/photo-1562575214-da9fcf59b907?crop=entropy&cs=srgb&fm=jpg&ixid=M3w1NTU5NjN8MHwxfHNlYXJjaHwxOHx8c3BlZWR8ZW58MHx8fHwxNzE0MTI1OTIwfDA&ixlib=rb-4.0.3&q=85) # Core Web Vitals ## [소플 (이인제)](https://www.soaple.io/) --- # 목차 - [Core Web Vitals란?](#core-web-vitals란) - [Loading (로딩 속도)](#loadingbr-로딩-속도) - [Interactivity (응답성)](#interactivitybr-응답성) - [Visual Stability (시각적 안정성)](#visual-stabilitybr-시각적-안정성) - [Other metrics (다른 지표들)](#other-metricsbr-다른-지표들) - [References](#references) --- # Core Web Vitals란? > 💡 구글과 [Web Performance Working Group](https://www.w3.org/webperf/)에서 정의한
웹 애플리케이션의 로딩 속도, 응답성 및 시각적 안정성을 평가하는 주요 지표 - 사용자 경험(UX)에 큰 영향을 미치며, 검색엔진 최적화(SEO)에도 반영되므로 중요함 - 세 가지 항목으로 나눠짐 - Loading (로딩 속도) - Interactivity (응답성) - Visual Stability (시각적 안정성) --- ![width:480px height:480px bg right](https://media4.giphy.com/media/Aj5YrRS9NUJR9I7nA4/giphy.webp?cid=d8f9e3b81dpujz022ngiomi59jsq0y2ja4sz6bhi5fks6agh&ep=v1_stickers_search&rid=giphy.webp&ct=s) # Loading
(로딩 속도) --- # First Contentful Paint (FCP) ### 👉 페이지 로딩 시점부터 웹페이지의 **첫 콘텐츠**가 화면에 표시될 때까지의 시간 - 콘텐츠는 이미지, 텍스트 블록 등을 의미 - 사용자가 **화면에서 유용한 것을 처음 볼 수 있는 시점** - FCP는 **1.8초** 이하가 좋은 것으로 간주됨 --- # FCP 예시 ![FCP timeline](https://cdn.markslides.ai/users/1/images/Qae0gIY13cgObhZADUlC1) --- # 좋은 FCP 수치 ![Good FCP values](https://cdn.markslides.ai/users/1/images/-9kkfV-ZgTQMdULHmRojP) --- # Largest Contentful Paint (LCP) ### 👉 페이지 로딩 시점부터 **가장 큰 콘텐츠**가 화면에 표시될 때까지의 시간 - 콘텐츠는 이미지, 텍스트 블록 등을 의미 - 페이지의 **기본 콘텐츠가 사용자에게 표시되는 시점** - LCP는 **2.5초** 이하가 좋은 것으로 간주됨 --- # LCP 예시 ![LCP timeline](https://cdn.markslides.ai/users/1/images/zhbUaimjb0Ca6J8_twR-z) --- # 좋은 LCP 수치 ![Good LCP values](https://cdn.markslides.ai/users/1/images/Pb5waTtq1TkYaF7O11gs8) --- # 로딩 속도(FCP, LCP) 개선 방법 - 리소스 최적화 - 불필요한 코드 제거 및 이미지, 비디오 등의 미디어 파일 크기 줄이기 ([WebP](https://developers.google.com/speed/webp)) - CSS, JavaScript 파일 압축 ([GZIP](https://www.gzip.org/), [Brotli](https://github.com/google/brotli)) - JavaScript 로딩 방식을 `async` 또는 `defer`로 설정하여 초기 로드 시 렌더링 차단을 방지 - HTML 및 CSS 구조 최적화: DOM의 depth를 최대한 줄이고, CSS selector의 복잡도 낮추기 - 렌더링 경로 최적화: 페이지 초기 로딩에 필수적인 CSS만을 추출하여 inline으로 삽입 - `preload` 사용: 브라우저에게 주요 리소스를 미리 로드하도록 지시 - `prefetch` 사용: 사용자가 다음에 접근할 수 있는 페이지의 리소스를 미리 로드하도록 지시 - 서버 응답 시간 개선: 웹 서버 성능 개선, 데이터베이스 최적화, CDN을 통한 빠른 콘텐츠 로드 --- ![width:343.5px height:450px bg right](https://media4.giphy.com/media/pRIvKfWc2fbK7Er7Rx/giphy.webp?cid=d8f9e3b8smm6sktjfswt3d15v4cgryrgsvbfu2xdeba0igtn&ep=v1_stickers_search&rid=giphy.webp&ct=s) # Interactivity
(응답성) --- # First Input Delay (FID) ### 👉 사용자가 페이지와 처음 상호작용한 시점부터, 브라우저가 해당 상호작용에 응답할 수 있는 시점까지의 시간 - 사용자가 페이지와 상호작용 하려고 할 때 느끼는 지연 중 일부를 포착하므로, 사용자가 작업을 수행해야 하는 페이지에서 중요함 - FID 시간은 **100 밀리초** 이하가 좋은 것으로 간주됨 --- # Interaction to Next Paint (INP) ### 👉 사용자가 페이지와 처음 상호작용한 시점부터, 브라우저가 해당 상호작용에 대한 응답으로 다음 프레임을 렌더링하는 시점까지의 시간 - First Input Delay (FID)의 후속 측정항목 - 사용자 상호작용에 대한 페이지의 반응성을 측정하는데 사용 - 페이지가 사용자 입력에 더 빨리 응답할수록 INP가 더 좋아짐 - INP 시간은 **200 밀리초** 이하가 좋은 것으로 간주됨 --- # INP 예시