codinghatso

이번 목표는 폰트 최적화입니다.폰트를 최적화함으로써 LCP와 CLS를 개선되는 것이 기댓값입니다. 먼저 CLS(Cumulative Layout Shift, 누적 레이아웃 이동)는 웹 페이지가 로드되거나 상호작용하는 동안 발생하는 예기치 않은 화면 요소의 밀림이나 이동을 측정하는 시각적 안정성 지표를 말합니다. 네이버 외부 CSS 연결을 제거하고 폰트 파일을 프로젝트 내부에서 직접 관리하는 방식으로 바꿨습니다.font-display: swap을 적용하고, 대체 글꼴의 크기 차이로 발생하는 CLS는 폰트 측정값 재정의로 줄입니다.woff2로 변환하기 위해서 brew install woff2 변환도구를 설치합니다.변경한 코드 값들은 작성하지 않겠습니다. 현재 발견한 문제점 3가지 네이버 CSS의 @font-f..

LCP(Largest Contentful Paint) 개선해보기콘텐츠가 포함된 최대 페인트 (LCP)는 Lighthouse 보고서의 성능 섹션에서 추적하는 측정항목 중 하나입니다.각 측정항목은 페이지 로드 속도의 일부 측면을 포착합니다.Lighthouse는 LCP를 초 단위로 표시합니다.가장 큰 콘텐츠 요소가 화면에 렌더링되는 시점을 측정한 것 입니다.LCP를 개선하는 방법LCP가 이미지인 경우 타이밍은 4개의 하위 부분으로 나눌 수 있습니다. 가장 오래 걸리는 하위 부분을 알면 LCP를 최적화하는 데 도움이 됩니다. Lighthouse는 '최대 콘텐츠 페인트 요소' 진단에서 하위 요소 분석과 함께 LCP 요소를 표시합니다. 첫 바이트까지의 시간 TTFB로드 지연로드 시간렌더링 지연위처럼 LCP를 최적화..