2022.8.4. (목)
1. 오늘의 소감
- 오늘 학습 콘텐츠는 정말 유익하고 꼭 필요했던 내용이었다! 아직 프로젝트 빌드도 몇번 안 해본 입장에서 최적화를 맞이하기엔 좀 이른가? 싶긴하지만ㅋㅋㅋㅋ 그래도 코드를 짤 때부터 최적화를 염두해두고 보다 효율적인 방법으로 코딩하면 빌드시 수정사항이 많이 안 생길 것 같다. 그리고 오늘 배운 picture 태그나, Lighthouse 성능 분석이 정말 유용해보여서 빨리 내 프로젝트에 적용해보고 싶다…!
- script 태그를 넣을 때 body 하단에 넣을 경우 defer를 넣을 경우, async 넣을 경우의 차이에 대해서 알았다! 나는 body 하단에 넣는 경우나, defer 속성을 넣는 경우가 똑같이 동작한다고 생각했었는데 아니었다. 동작방식은 defer가 더 효율적이고 빨랐다. (역시 대충 알고 넘어가면 안되는 지식들이 많구먼...) 다음에 script 태그를 넣을 땐 defer 속성을 넣어주는 방식으로 작성해야겠다. 세 가지 경우의 자세한 차이는 아래쪽에 ⬇️ 작성해두었다.
- CSS 파일이 담긴 link 태그가 왜 html 문서 상단에 (head 태그 안) 에 위치해야되는지 확실하게 알았다. 크루님의 실전 예시 덕분에 이해가 잘 됨👍! link 태그를 body 태그 중간이 하단에 작성하면 일시적으로 스타일링이 적용 안 된 DOM 이 나타났다가 다시 스타일링이 적용된 DOM 으로 바뀐다. 이는 효율적이지 않을뿐더러 UX에도 확실히 좋지 않다. 따라서 DOM 트리가 생성되기전 미리 css 파일을 읽어서 CSSOM 트리를 만들어 줘야한다. 이렇게 하면 DOM 생성과 동시에 스타일을 적용시키면, 화면에 보여주는게 훨씬 빠르고 스타일링 적용 안된 페이지 노출을 막아준다.
2. 학습한 키워드
- HTML 코드 최적화, CSS 코드 최적화, css 와 js 파일 불러올 때 <script> 태그 <link> 태그 넣는 위치, defer 속성과 async 속성
- 브라우저 이미지 최적화, 이미지 스프라이트 기법, 아이콘 폰트 사용하기, WebP, AVIF 포맷 사용하기, picture 태그
- 캐시 사용하기, If-Modified-Since, If-None-Match
- 콘텐츠 전송 네트워크 CDN, CDN 을 사용하면 로딩 속도가 빨라지는 이유
- JavaScript 트리쉐이킹, import와 require, sideEffects 설정하기, ES6 모듈 사용하기
- Lighthouse, 분석 결과 항목 5가지(Performance, Accessibility, Best Practices, SEO, Progressive Web App), 측정 메트릭 6가지(FCP, LCP, Speed Index, TTI, TBT, CLS)
3. 키워드를 바탕으로 학습 내용 설명해보기
학습 내용을 바탕으로 작성한 최적화 기법 체크리스트~✨
✅ 최적화 기법 체크리스트
- HTML / CSS 최적화
- HTML 최적화하기
- DOM 트리는 가볍게! (불필요한 깊이를 만드는 요소 삭제)
- 인라인 스타일 사용하지 않기!
- CSS 최적화하기
- 사용하지 않는 CSS 제거 (요소 삭제시 관련 CSS 코드도 삭제)
- 간결한 셀렉터 사용하기
- HTML 최적화하기
- 리소스(js, css) 로딩 최적화
- CSS 파일 불러오기 (<head> 태그 안에서 <link> 태그 작성)
- JavaScript 파일 불러오기
- 페이지에 적용될(DOM 조잘할) 스크립트는 <head> 에 defer 속성 넣은 <script> 태그로 작성하기
- → 차선책은 body 하단에 <script> 태그 작성
- 빨리 가져와서 빨리 실행해야되는 외부 스크립트(방문자수 카운트, 광고 관련) 는 <head> 에 async 속성 넣은 <script> 태그로 작성하기
- 브라우저 이미지 최적화
- 이미지 스프라이트 기법 사용하기
- 아이콘 폰트 사용하기
- ex) Font Awesome
- Web / AVIF 이미지 포맷 사용하기
- pictuer 태그를 사용해 다중 이미지 리소스 정의해주기
- <picture> <source srcset="logo.webp" type="image/webp"> <img src="logo.png" alt="logo"> </picture>
- 캐시 사용하기
- 캐시를 사용하기 위해 HTTP 요청을 보낼 때 조건부 요청 헤더를 작성
- → If-Modified-Since 헤더와 If-None-Match 헤더 동시 사용
- CDN 사용하기
- ex) CloudFront, Cloudflare
- JavaScript 트리쉐이킹하기 (트리쉐이킹 = 불필요 코드 제거)
- 필요한 모듈만 import 하기
- babelrc 파일 설정하기
- import 코드가 모듈의 모든 코드를 불러오는 require 로 바뀌지 않게 설정
- //.babelrc 파일 { “presets”: [ [ “@babel/preset-env”, { "modules": false } ] ] } //modules 값을 true로 설정하면 //항상 ES5 문법으로 변환하므로 주의해서 작성
- sideEffects 설정하기
- 사이드 이펙트가 생기지 않을 것이므로 코드를 제외시켜도 됨을 웹팩에게 알려주기
- //package.json //앱 전체에 사이드 이펙트가 발생하지 않을 것이라고 알려준다. { "name": "tree-shaking", "version": "1.0.0", "sideEffects": false } //또는 이렇게 //특정 파일에서만 사이드 이펙트가 발생하지 않을 것임을 알려준다. { "name": "tree-shaking", "version": "1.0.0", "sideEffects": ["./src/components/NoSideEffect.js"] }
- ES6 문법 사용하는 모듈 쓰기
- ES5 문법은 웹팩에서 기본적으로 트리쉐이킹을 제공하지 않기 때문에 ES6 문법을 사용하는 모듈로 대체하는 게 좋다.
- LIghthouse 로 성능 측정해보기
-
-
728x90
반응형
'TIL' 카테고리의 다른 글
[TIL] #29. TDD : 테스트 하면서 개발하기 (0) | 2022.12.06 |
---|---|
[TIL] #28. graphQL (0) | 2022.12.06 |
[TIL] #27. 커스텀 컴포넌트 (0) | 2022.12.06 |
[TIL] #26. 피그마 마무리 & 피그잼으로 UI / UX 분석 (0) | 2022.12.06 |
[TIL] #25. 피그마로 디자인 & 프로토타이핑 (0) | 2022.12.06 |