브라우저 렌더링 최적화 - LCP

덩어리 콘텐츠 빨리그리기 (LCP 최적화) 뷰포트(above page)의 컨텐츠 중 가장 큰 영역을 차지하는 이미지나 텍스트 사용자 중심의 페이지로드 속도를 판단하는 지표로 사용 그렇다면 어떻게 해야 빠르게 파싱하여 LCP를 줄일 수 있을까? css 최적화 이미지최적화 LCP 문제해결 방법 라이브러리 의존 줄이기 → 렌더 차단리소스 줄이기 youmightnotneed (https://youmightnotneed.com/date-fns ) 해당사이트를 방문하면 사용하지 않는 라이브러리를 제거해서 사용하는법을 알려준다. 웹폰트 preconnect, css preload preconnect: 미리 연결해서 준비를 해놓고 필요한 내용을 나중에 사용할 수 있게한다. DNS, TCP, TLS 왕복에 필요한 시간을 ..
프론트엔드 2023. 3. 9. 16:24
1