CSS 최적화 및 성능 개선
▪︎ CSS 성능 개선 몇가지 팁 (chat-GPT told me)
-
HTTP 요청 최소화
웹사이트에서 사용되는 CSS 파일 수를 최소화하여 페이지를 로드하는 데 필요한 HTTP 요청 수를 줄입니다. Sass와 같은 CSS 전처리기를 사용하여 CSS 파일의 크기를 줄이십시오. -
@import 사용 금지
@import를 사용하여 스타일시트를 가져오지 마십시오. 스타일시트가 다운로드될 때까지 페이지 렌더링이 차단되기 때문입니다. -
CSS 파일 크기 줄이기
CSS 축소기를 사용하여 CSS 파일에서 불필요한 공백과 주석을 제거합니다. 이렇게 하면 CSS 파일의 크기가 줄어들어 다운로드 속도가 빨라집니다. -
캐시 사용
브라우저가 CSS 파일을 캐시할 수 있도록 캐시 제어 헤더를 설정합니다. 이렇게 하면 후속 방문에서 페이지를 로드하는 데 필요한 HTTP 요청 수가 줄어듭니다. -
미디어 쿼리 사용
미디어 쿼리를 사용하여 다양한 화면 크기에 대해 다양한 스타일시트를 로드합니다. 이렇게 하면 다운로드해야 하는 불필요한 코드의 양이 줄어듭니다. -
인라인 스타일 사용 금지
인라인 스타일을 사용하면 웹사이트 렌더링 속도가 느려질 수 있습니다. CSS에 대해 별도의 스타일시트를 사용하는 것이 좋습니다. -
콘텐츠 전송 네트워크(CDN) 사용
CDN은 여러 서버에 CSS 파일을 배포하여 웹사이트 로드 시간을 단축할 수 있습니다.
좋은 습관 !
인라인 스타일 사용하지 않기
CSS 파일에 불필요한 라인과 주석 작성하지 않기
CSS 파일 정리 및 병합하기
간결한 CSS 선택자 지정하기
반응형은 되도록이면 미디어 쿼리 사용하기▪︎ 사용하지 않는 CSS 제거
-
HTML이 다 파싱되어 렌더링하기 위해서는 CSS, JS 자원을 모두 파싱해야 가능하다.
-
CSS가 있어야 DOM Tree와 CSSSOM이 합쳐저서 브라우저 렌더링이 가능하기 때문에 CSS의 파싱 속도가 브라우저 렌더링 속도에 영향을 미치게 된다.
-
CSS 다운로드 용량 자체를 줄이면 렌더링 속도가 개선된다.
오랜 시간에 걸쳐서 쌓이는 코드 베이스에는 안쓰는 CSS가 남는 경우가 있다.
사용하지 않는 CSS를 제거하는 것은 수동 작업으로 코드가 얼마나 복잡하느냐에
따라서 CSS 정리의 난이도가 많이 올라가기도 한다.- CSS 제거는 CSS-in-JS를 쓸 때 큰 이점을 얻을 수 있다.
각 컴포넌트가 렌더링에 필요한 CSS가 JS에 포함 되어 있기 때문에
컴포넌트 레벨로 관리해서 편하다.
▪︎ CSS 용량 줄이기
-
purgecss 라이브러리 사용
-
콘텐츠와 CSS 파일을 분석
파일에 사용된 선택기를 콘텐츠 파일에 있는 선택기와 일치
CSS에서 사용하지 않는 선택자를 제거 -
tailwind.css 에 사용하지 않은 css가 제거
▪︎ 효과적인 애니메이션
-
요소에 애니베이션을 넣을 때는 레이아웃과 리페인트가 최소한으로 이뤄지도록 해야 한다.
-
요소 움직임 애니메이션을 구현할때, translate 대신 position (top, left) 등을 사용하면 새 레이어를 생성하기 때문에 성능에 좋지 않다.
-
위치 이동 애니메이션 사용을 지양하는 것이 좋지만 반드시 사용해야한다면 애니메이션이 들어간 요소에 position: absolute 혹은 position: fixed 속성을 적용 > 페이지 전체가 아닌 해당 요소만 리플로우가 발생
-
리플로우를 발생시키는 속성
position / float
width / height
margin / padding
display / top / left / right / bottom
text-align / font-family / font-size / font-weight
line-height / vertical-align / text-overflow / text-shadow
border / border-color / border-width
box-sizing / white-space / word-wrap- 리페인트를 발생시키는 속성
color / border-style / border-radius
background / background-color / background-image / background-position
background-repeat / background-size
text-decoration / visibility / box-shadow
outline / outline-style / outline-color / outline-width- 리플로우와 리페인트를 발생시키지 않는 속성
opacity / transform / cursor / z-index