성능 최적화하기 - (12) 불필요한 css 제거하기

◽ Lighthouse

Lighthouse 탭에서 이렇게 확인할 수 있다.

 

 

 

 

◽ 커버리지탭

파란색 바가 쓰고있는 것, 빨간색 바는 사용하지 않고 있는 것

 

각 파일을 더블클릭하면 사용하는 것, 사용하지 않는 css를 볼 수 있다.

따라서 사용하지 않는 css를 제외한다면 용량을 줄일 수 있다.

더블클릭하면 상세하게 사용하지 않는 css를 확인할 수 있다.

 

 

◽ purgecss 사용하여 사용하지않는 css 제거하기

npm i purgecss

 

sass랑 같이 사용할 수 있는지? https://purgecss.com/css_modules.html

CSS modules | PurgeCSS

 

 

 

◽ purgecss 사용하기

스크립트에 아래처럼 작성한다.

어떤 static한 파일과 비교할 것인가

 

📄 코드

static에 있는 css 파일(--output 뒤)을 다른 파일과 비교(--content)하겠다는 뜻!

package.json의 script에 작성해준다.

"purge": "purgecss --css ./build/static/css/*.css --output ./build/static/css/ --content ./build/index.html ./build/static/js"

 

전

후: 용량이 줄어들었다.

 

 

 

◽ purgecss.config.js 설정하기

하지만 이렇게되면 포함되지 않는 파일이 생겨 css가 제대로 적용되지 못 할 수도 있다.

따라서 purgecss 설정파일에 이렇게 설정해준다.

 

📄 purgecss.config.js

module.exports = {
  defaultExtractor: (content) => content.match(/[\w\:\-]+/g) || []
}

 

 

 

정리..! (내용 각 포스트에 추가하기)

이미지 지연로딩: observer를 사용함. 이미지에 ref를 걸어주고 콜백을 실행하여 노출되도록 함. 그 시점에 노출을 하기위해 소스에 이미지 주소가 아닌 dataproperty에 이미지를 넣었다. dataset에 있는 값을 읽어와서 노출될 수 있도록 함. 화면이 해당이미지가 보여지는 순간에 이미지 로드를 함

 

이미지 사이즈 최적화: 사이즈 조절하는 것. 사이즈 및 퀄리티를 줄여서 이미지가 빠르게 로드될 수 있도록 했다. 그대로 jpg를 사용하거나 webp라는 확장자를 사용했다. (webp가 더 좋음) 변환된 이미지는 picture 태그로 감싸서 이미지를 나열하고 브라우저가 선호하는 우선순위대로 로드하도록 만들었다.

 

동영상 최적화: 동영상도 비슷하게 최적화 함. webm 확장자로 변경했으며 이미지와 같이 브라우저의 우선순위에 맞추도록 했다.

 

폰트최적화: pout, poit에 대해 공부. 언제 어떻게 폰트가 로드가 되게 만들것인가. font-display로 만들었다. woff, woff2로 변환하였다. 폰트의 글자개수가 몇개되지않았을 때 모든 글자에 대한 폰트데이터를 쓰는게아니라 unicode-range를 사용했다. 굉장히 작다보니 css 파일에 포함될 수 있다고 생각하여 data-uri 형태로 포함해주었다. 폰트가 좀 더 빨리 로드될 수 있는 방법이다. preload 태그를 달아주어 폰트가 최대한 빨리 네트워크 요청할 수 있도록 함. index.html이 로드되자마자 바로 요청!

 

캐시 최적화: html인 경우 no-cache, js/css 등은 특정 시간을 주었다. 적절하게 리소스의 타입마다 효율적인 캐시컨트롤 방법에 대해 공부했다.

 

불필요한 CSS 제거: 불필요한 코드를 보기위해 커버리지 탭에서 확인했다. 어느정도 사용하고있는지, 사용하지않고 있는지를 봄. 파일의 사용량을 최대한 효율적으로 사용하기위해 purgecss를 사용하여 필터링했다.

 

 

 

 

---

 

 

 

출처

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1 - 인프런 | 강의