LCP [최적화] 핵심적인 웹 지표(LCP,FID,CLS) 개선하기 먼저 LCP 수치는 를 통해 확인할 수 있다. ✔️ 사용하지 않는 css 제거 웹팩 등 모듈 번들러나 빌드 도구를 사용해 css와 js 파일을 번들링해서(하나의 파일들로 묶어서) 리소스 요청을 줄일 수 있다. 이러한 경우 첫 번째 게시글의 상세페이지 또는 2페이지를 prefetch 적용할 수 있다. 📎 이미지 최적화 picture 태그의 type 속성을 통해 사용자 환경에 맞는 타입의 이미지... 웹성능CSSFID성능최적화최적화LCPCLShtmlCLS 덩어리 콘텐츠 빨리 그리기 페이지가 처음으로 로드를 시작한 시점을 기준으로 뷰포트 내에 있는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간 성능 확인 → Largest Contentful Paint element Vanilla Script 활용 *아래 사이트에서 jQuery나 loash 대신 사용 가능한 'Vanilla Script' 확인 가능 nomalize.css, reset.css 사용 자제 → 서드 파티 자원... CSSLCPpreloadpreconnectCSS
[최적화] 핵심적인 웹 지표(LCP,FID,CLS) 개선하기 먼저 LCP 수치는 를 통해 확인할 수 있다. ✔️ 사용하지 않는 css 제거 웹팩 등 모듈 번들러나 빌드 도구를 사용해 css와 js 파일을 번들링해서(하나의 파일들로 묶어서) 리소스 요청을 줄일 수 있다. 이러한 경우 첫 번째 게시글의 상세페이지 또는 2페이지를 prefetch 적용할 수 있다. 📎 이미지 최적화 picture 태그의 type 속성을 통해 사용자 환경에 맞는 타입의 이미지... 웹성능CSSFID성능최적화최적화LCPCLShtmlCLS 덩어리 콘텐츠 빨리 그리기 페이지가 처음으로 로드를 시작한 시점을 기준으로 뷰포트 내에 있는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간 성능 확인 → Largest Contentful Paint element Vanilla Script 활용 *아래 사이트에서 jQuery나 loash 대신 사용 가능한 'Vanilla Script' 확인 가능 nomalize.css, reset.css 사용 자제 → 서드 파티 자원... CSSLCPpreloadpreconnectCSS