← 개발자 노트
Web
·
·
조회 10
구글 Core Web Vitals 점수 향상을 위한 웹 성능 최적화와 LCP 단축 전략
웹 사이트 핵심 성능 지표인 LCP와 CLS를 개선하기 위한 이미지 최적화 및 리소스 프리로드 기술을 다룹니다.
웹페이지 로딩 성능을 나타내는 Core Web Vitals를 개선하려면 가장 큰 시각적 요소가 화면에 표시되는 시간인 LCP와 레이아웃 이동을 측정하는 CLS를 함께 관리해야 합니다. 히어로 이미지 파일의 포맷을 WebP 또는 AVIF로 변환하여 용량을 줄이고, HTML 문서 head에서 해당 리소스를 preload 또는 fetchpriority 속성으로 우선 로드할 수 있습니다. 또한 레이아웃 이동 현상을 막기 위해 이미지 영역에 명확한 width와 height 또는 aspect-ratio를 지정하는 CLS 최적화 실무 코드를 소개합니다.