1. light house
측정 항목
| 단계 | 항목 이름 | 의미 | 참고 블로그 |
|---|---|---|---|
| 초기(15%) | First Contentful Padint(FCP) | 브라우저가 dom 콘텐츠 첫번째 부분을 렌더링 하는데 걸리는 시간을 측정 | 참고 사이트 |
| 중기(40%) | Speed Index(SI) | 콘텐츠가 시각적으로 표시되는 속도를 측정 | 참고 사이트 |
| 중기(40%) | Largest Contentful Paint(LCP) | 뷰포트에서 가장 큰 콘텐츠 요소가 화면에 렌더링 되는 시기를 측정 | 참고 사이트 |
| 후기(15%) | Time to Interactive(TTI) | 페이지가 완전해지는 시간 | 참고 사이트 |
| 메인 스레드(25%) | Total Blocking Time(TBT) | 사용자들이 click이나 키보드 이벤트를 dom생성 전에 발생하는것을 방지하는 시간 | 참고 사이트 |
| 예측 가능성(5%) | Cumulative Layout Shift(CLS) | 페이지 전체 수명 동안 발생하는 모든 예기치 않은 레이아웃 이동 | 참고 사이트 |
img 크기 명시하기 (참고 사이트)
// 전
<img src="/icons/footer-logo.svg" alt="header-logo" />
// 후
<img width="137" height="61" src="/icons/footer-logo.svg" alt="header-logo" />
😄 수정 후
import 최적화
// 전
import {Pagination} from ‘antd’
// 후
import Pagination from 'antd/lib/pagination'
😄 수정 후
3. 성능점수 변화
😨 수정 전
😄 수정 후
🧐 느낌점
생각보다 더 깊고 다양한 종류의 최적화 방법이 있었다.
홈페이지들을 만들면서 최적화에 대해서 더 심층있고 깊게 배워 나갈 생각이고
모든 페이지들을 90점대 이상으로 유지하고 싶은 욕심도 있기 때문에
이정도에서 끝나는게아니라 계속해서 최적화 방법에는 어떤것들이 있는지 알아가보도록 해야겠다.
frontEnd Developer