일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- returnType
- typescript
- 리액트
- 레이아웃쪼개기
- utilty type
- 타입스크립트
- TSDoc
- click and drag
- CSS
- 누구나 자료구조와 알고리즘
- 개발콘텐츠
- JS console
- 2022
- reactjs
- 공통컴포넌트
- 제네릭
- vue.js
- react
- 성능최적화
- React Native
- Chart.js
- 커스텀
- const 단언문
- 폰트적용하기
- 타입좁히기
- javascript
- React.js
- NonNullable
- 티스토리꾸미기
- 반복줄이기
- Today
- Total
몽땅뚝딱 개발자
성능 최적화하기 - (12) 불필요한 css 제거하기 본문
◽ Lighthouse
Lighthouse 탭에서 이렇게 확인할 수 있다.
◽ 커버리지탭
각 파일을 더블클릭하면 사용하는 것, 사용하지 않는 css를 볼 수 있다.
따라서 사용하지 않는 css를 제외한다면 용량을 줄일 수 있다.
◽ purgecss 사용하여 사용하지않는 css 제거하기
npm i purgecss
sass랑 같이 사용할 수 있는지? https://purgecss.com/css_modules.html
CSS modules | PurgeCSS
How to use with CSS modules PurgeCSS works by comparing the selectors in your content files with the ones on your CSS files. When using CSS modules, the names of your classes are replaced by a hash. For this reason, working with CSS modules and PurgeCSS mi
purgecss.com
◽ purgecss 사용하기
스크립트에 아래처럼 작성한다.
📄 코드
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 - 인프런 | 강의
리액트로 만들어진 웹 서비스의 성능을 측정하고 더욱 빠르고 효율적으로 최적화 하는 방법을 배웁니다., - 강의 소개 | 인프런...
www.inflearn.com
'Development > 성능최적화' 카테고리의 다른 글
성능 최적화하기 - (14) 이미지 Preload (0) | 2022.06.14 |
---|---|
성능 최적화하기 - (13) Layout Shift (0) | 2022.06.13 |
성능 최적화하기 - (11) 캐시 최적화 (0) | 2022.06.08 |
성능 최적화하기 - (10) 폰트 Preload (0) | 2022.06.07 |
성능 최적화하기 - (9) 폰트 최적화 (0) | 2022.06.02 |