웹 성능 최적화 방법에는 랜더링 최적화, 로드 최적화 크게 두 가지 방법이 존재한다.

웹은 브라우저에서 HTML 파일 상단부터 차례대로 로드된다.
이 과정에서 css나 js파일을 만나면 해당 파일을 해석하는 동안 웹 페이지 렌더링은 일시적으로 차단된다.

이번에는 웹 성능 최적화 중에서도 랜더링 최적화에 속하는 css 최적화 방법에 대해 알아보자.

CSS 최적화

css 최적화에서 중요하게 생각해야 될 사항은 많지만 오늘은 세가지 사항에 대해 알아보겠다.

1. Reflow/Repaint
2. 사용하지 않는 css 제거
3. 간결한 스타일 작성

📌 Reflow/Repaint를 고려한 스타일 작성

Reflow: 랜더링 시 레이아웃(넓이, 높이, 위치 등)에 영향을 주는 css 속성을 변경할 경우 'Layout'부터 다시 그리는 것

Repaint: 레이아웃에 영향을 주지 않는 속성을 변경하면 레이아웃을 건너뛰고 페인트 작업부터 수행하는 것.

Reflow를 발생시키는 속성

position / width / height / margin / padding / display / top / left / right / bottom /
box-sizing / border-color / text-align / border / border-width /
font-family / float / font-size / font-weight / line-height / vertical-align /
white-space / word-wrap / text-overflow / text-shadow ...

Repaint를 발생시키는 속성

color / border-style / visibility / background / background-color /
background-image / background-position / background-repeat / background-size /
text-decoration / outline / outline-style / outline-color / outline-width /
border-radius / box-shadow ...

둘 다 발생시키지 않는 속성

opacity / transform / cursor / z-index ...

📌 사용하지 않는 css 제거

css는 렌더링 차단 리소스이기 때문에 사용하지 않는 css는 제거하는 것이 좋다.
Unused css는 구글 크롬 라이트하우스(Lighthouse)를 통해 확인할 수 있다.

구글 크롬 라이트하우스(Lighthouse)

• 구글 라이트하우스(Lighthouse)는 2KB 이상 사용되지 않은 css가 있을 시 오류로 표기

• Potential Savings 항목을 통해 잠재적 절약 가능 용량을 확인 가능

📌 간결한 스타일 작성

css가 복잡하고 방대할수록 레이아웃을 그리는 데에 시간이 많이 소요된다. 선택자를 간결하게 사용하여 특이성을 낮게 유지하는 것이 좋다.

.mypage .mypage_item{...} 🔺
.mypage_item{...} ✅

전자의 경우 .mypage_item가 부모요소인 .mypage 가지고 있는지 확인하기위해 DOM을 거슬러 올라가는 시간이 소요된다.