CSS 최적화

2021-12-16

HTML & CSS / CSS

사용하지 않는 CSS 제거
렌더 차단 리소스 제거

사용하지 않는 CSS

css는 페이지 렌더링을 차단하는 리소스. 브라우저가 스타일을 계산하는데 잠재적으로 더 많은 시간을 소비한다.
구글 라이트하우스는 2KB 이상 미사용 CSS가 포함된 파일을 검출한다.

렌더 차단 리소스

브라우저가 외부 리소스를 다운로드 하고 파싱하는 동안 페이지 콘텐츠를 파싱하거나 렌더링하지 않기 때문에 페이지 표시 속도 저하의 원인이 된다.
unused css는 render blocking을 가중시키는 요인.
렌더 블로킹 리소스 표시 조건
- defer, async 속성이 없는 head 요소의 script 태그
- media 속성과 <link rel="stylesheet"> 태그

렌더 차단 스크립트

필수 스크립트는 html에 <script> 형식으로 작성
기타 스크립트는 </body> 종료 태그 직전에 선언
마지막에 파싱해도 문제 없으면 defer 속성
가능한 빠른 시점에 실행 필요하면 async 속성

렌더 차단 `<link rel="stylesheet">`

media 속성이 없거나 값이 all이면 렌더 차단 리소스

반응형 웹인 경우 해상도 구간 별로 css 파일을 분리하고 media 속성으로 분기

1 2	<link href=".css" rel="stylesheet" media="max-width:639px"> <link href=".css" rel="stylesheet" media="min-width:640px">

필수 스타일은 페이지 <head>에 <style>형식으로 작성
- 지연 스타일은 <link rel="preload"> 속성으로 병렬 로딩후 지연 적용
- this.onload=null 할당 이유: rel 속성을 변경할 때 일부 브라우저가 다시 onload 실행하는 것을 방어하는 코드
- 외부 스타일 파일이 렌더링(FCP)을 차단하지 않음
  1
  2
  3
  4
  <style>
  /* 필수 스타일 여기 */
  </style>
  <link rel="preload" as="style" href="x.css" onload="this.onload=null;this.rel='stylesheet'">

REFERENCE
패스트 캠퍼스 The RED : 견고한 UI 설계를 위한 마크업 가이드 _ 정찬명 강사님