❓ Core Web Vitals란?
Core Web Vitals는 웹 페이지의 사용자 경험을 측정하는 데 중요한 몇 가지 주요 성능 지표를 의미합니다. Google이 정의한 이 지표들은 웹 페이지 로딩 속도, 상호작용성 및 시각적 안정성을 평가합니다. 이를 통해 웹 사이트의 현재 상황을 파악하고, 사용자 경험을 향상시킬 수 있습니다. Core Web Vitals은 다음 세 가지 주요 지표로 구성됩니다.
Largest Contentful Paint(LCP)
LCP는 웹 페이지의 주요 콘텐츠 로딩 속도에 대한 지표로 콘텐츠가 사용자에게 표시되는 시간을 측정합니다. 사용자에게 중요한 콘텐츠가 빠르게 표시되도록 하는게 주요 목표이며 2.5초 이내로 사용자에게 콘텐츠가 표시되는게 좋은 기준입니다.
- 측정 요소 페이지 로딩 시간, 서버 응답 시간, 리소스 로드 시간 등
First Input Delay (FID)
FID는 사용자가 처음으로 페이지와 상호작용(예: 버튼 클릭, 링크 탭)할 때부터 브라우저가 실제로 해당 이벤트에 응답할 때까지의 시간을 측정합니다. 즉, 사이트의 사용자가 처음으로 느끼는 반응속도를 측정하는 것입니다. 좋은 사용자 경험을 제공하기 위해 사이트는 첫 번째 입력 지연이 100ms 이하가 되어야 합니다.
- 측정 요소 자바스크립트 실행 시간, 이벤트 핸들링 지연 시간 등
Cumulative Layout Shift (CLS)
CLS는 페이지 로딩 중 예기치 않은 레이아웃 변화의 빈도와 크기를 측정합니다. 즉, 시각적 안정성을 높이기 위한 지표입니다. 데스크톱 웹사이트에서는 화면 크기 문제가 대부분 존재하지 않기 때문에 CLS는 모바일 중심의 지표로 볼 수 있습니다. 시각적 안정성을 유지하기 위해 CLS 점수가 0.1 이하가 되어야 합니다.
- 측정 요소 레이아웃 이동 발생 빈도와 크기, 이미지나 광고 로드 시간 등
필요성
Core Web Vitals는 Google 검색 랭킹에 영향을 미치는 요소로, 특히 모바일 환경에서 중요성이 더욱 커지고 있습니다. 웹 페이지의 성능을 지속적으로 모니터링하고 개선함으로써 더 나은 사용자 경험을 제공할 수 있습니다.
👀 Core Web Vitals 측정
저는 배포한 Movie-app 사이트의 Core Web Vitals를 측정하기 위해 Lighthouse를 이용했습니다. 무료 도구로 Chrome 웹 스토어에서 Lighthouse 확장 프로그램을 설치하여 사용할 수 있습니다. 설치 후 브라우저 툴바에서 Lighthouse 아이콘을 클릭하고 분석을 실행합니다.
아래의 사진은 배포 후 제가 아는 지식 선에서 최적화 작업을 한 후의 Lighthouse로 측정한 점수입니다. 최적화 작업을 하기 전에는 조금 더 점수가 낮았습니다.
🚀 CLS 개선
CLS의 경우 위에서 언급했듯이 모바일 중심의 지표로 데스크탑 웹사이트의 경우 중요하지 않는 점수일 수 있습니다. 허나 제가 배포한 사이트의 경우 태블릿이나 모바일에서도 사용자가 볼 수 있도록 반응형 웹으로 제작했기 때문에 개선해서 점수를 높여보려고 합니다. 또한 점수가 가장 낮은 부분이 CLS이기 때문에 개선할 우선순위가 높았습니다.
최적화 내용
CLS의 점수를 개선하기 위해서는 아래와 같은 내용을 중점으로 코드를 리팩토링 할 필요가 있습니다.
- 이미지 및 비디오에 크기 명시
- 요소의 크기 예약 공간 확보
- 동적 콘텐츠 로딩 시 위치 고정
제 코드를 살펴보면 이미지들의 크기를 명시하지 않았기 때문에 점수가 낮았고, 요소들의 예약 공간 확보를 해주지 못했습니다. 저는 위의 문제점들을 파악하여 여러가지 방법을 사용해보았고 최종적으로 사용한 방법은 Skeleton Component 제작입니다.
Skeleton Componet
Skeleton Componet 코드
해당 컴포넌트에 Skeleton Componet 적용 후
결과
아래의 결과 이미지를 보시면 CLS 부분의 점수가 올라 전체적인 점수가 많이 오른것을 확인할 수 있습니다.
✏️ 마무리
느낀점
Core Web Vitals를 통해 배포 한 사이트를 점수를 확인했을 때 뭔가 적당한? 점수가 나와서 안심했던 것이 기억납니다. 왜냐하면 Core Web Vitals에 대해 학습하기 전 점수가 좋았다면 어영부영 넘어갔을 거라고 생각했었습니다. CLS를 개선하는 내용을 글로 써보니 생각보다 간단해 보이지만 사실 직접적으로 개선을 하는 과정에서 시간이 꽤 오래 걸렸습니다.
솔직히 말하면 Movie-app를 만들고 배포하기 전 기간보다 더 오래 걸렸습니다. Core Web Vitals에 대한 기초적인 지식이 없었기 때문인지 배운 내용을 적용하는데 잘못된 방식으로 이해하여 시간을 많이 소비한거 같습니다. 그러나 이렇게 CLS의 점수가 많이 좋아지는 결과를 낼 수 있어서 기분 좋은 성취감을 느낄 수 있었습니다.
향후 계획
다른 페이지들 하나하나 Core Web Vitals를 측정하여 문제점을 파악한 뒤 CLS를 개선을 우선 작업으로 진행할 예정입니다. 또한 점수가 떨어지는 다른 지표들도 분석하여 하나하나 개선할 것입니다. 그리고 위의 점수 사진들을 본다면 이번글에서 언급한 LCP, CLS, FID 말고도 여러가지 지표들이 있는 것을 알 수 있는데 나머지 지표들도 학습하여 배포한 사이트를 더 좋은 방향으로 발전시킬 예정입니다.
🙏 글 작성에 도움받은 목록
