preload CSS 코드 최적화 Remove unused CSS (미사용 CSS 제거) Eliminate render-blocking resources (렌더 차단 리소스 제거) 웹 브라우저가 CSS 파일을 다운로드하고 해석하는 동안 웹 페이지의 렌더링은 차단되기 때문! 웹 페이지 Unused CSS 확인 방법 *Unused CSS는 Render blocking을 가중하는 요인 Render blocking <script> ... preloadDeferRemove unused CSSCSSrender-blocking resourcesoptimizationasyncCSS 덩어리 콘텐츠 빨리 그리기 페이지가 처음으로 로드를 시작한 시점을 기준으로 뷰포트 내에 있는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간 성능 확인 → Largest Contentful Paint element Vanilla Script 활용 *아래 사이트에서 jQuery나 loash 대신 사용 가능한 'Vanilla Script' 확인 가능 nomalize.css, reset.css 사용 자제 → 서드 파티 자원... CSSLCPpreloadpreconnectCSS
CSS 코드 최적화 Remove unused CSS (미사용 CSS 제거) Eliminate render-blocking resources (렌더 차단 리소스 제거) 웹 브라우저가 CSS 파일을 다운로드하고 해석하는 동안 웹 페이지의 렌더링은 차단되기 때문! 웹 페이지 Unused CSS 확인 방법 *Unused CSS는 Render blocking을 가중하는 요인 Render blocking <script> ... preloadDeferRemove unused CSSCSSrender-blocking resourcesoptimizationasyncCSS 덩어리 콘텐츠 빨리 그리기 페이지가 처음으로 로드를 시작한 시점을 기준으로 뷰포트 내에 있는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간 성능 확인 → Largest Contentful Paint element Vanilla Script 활용 *아래 사이트에서 jQuery나 loash 대신 사용 가능한 'Vanilla Script' 확인 가능 nomalize.css, reset.css 사용 자제 → 서드 파티 자원... CSSLCPpreloadpreconnectCSS