이미지 최적화
- Responsive Image: 디바이스 별 해상도를 알 수 있는 window.devicePixelRatio를 통해 적절한 사이즈의 이미지를 제공한다.
<picture>
<!--
N(devicePixelRatio)x 기준으로 srcset을 제공한다.
브라우저에서 source tag와 srcset을 지원하지 않으면 img 태그의 src를 인식한다.
-->
<source srcset="URL1 1x, URL2 2x, URL3 3x" />
<img src="URL1" />
</picture>- WebP format Image: 사이즈도 작고 좋은 퍼포먼스를 내는데 도움을 주는 format
<picture>
<!-- webp를 지원하지 않는 브라우저를 위해 다른 format도 추가한다. -->
<source type="image/webp" srcset="~~~.webp" />
<source type="image/jpeg" srcset="~~~.jpeg" />
<img src="~~~.jpeg" />
</picture>- Lazy loading
<!-- 크롬에서 제공하는 lazy loading -->
<img src="URL" loading="lazy" />
<!-- lazysizes 라이브러리 사용. viewport에 들어올 때 data-src 내용을 src에 추가해준다. -->
<img class="lazyload" data-src="URL" />웹폰트 최적화
- 웹폰트가 로드되기 전 fallback 폰트 사용: font-display 속성
- local()은 디바이스에 해당 폰트가 있으면 새로 받지 않고 해당 폰트를 사용한다.
- 여러 폰트를 사용할 때 unicode-range 속성을 활용하여 필요한 폰트만 다운한다.
- 다양한 브라우저에서 모두 대응할 수 있게 다양한 fotmat을 포함시킨다.
JS, CSS 최적화
공통
link 태그의 rel 속성
- preload: 반드시 필요한 리소스
- preconnect: 곧 요청할 외부 도메인
- prefetch: 곧 필요해질 리소스
JS
- 스크립트의 lazy loading이 필요할 경우 await import("스크립트 경로") 형태로 불러온다. react의 경우 React.lazy라는 API를 제공한다.
- Code Spliting
- Remove unused code
- Minify Javascript
CSS
css는 render-blocking resources로서 다 처리되기 전에는 브라우저가 페이지를 그리지 않는다.
critical한 css와 non-critical한 css(크롬의 Coverage 탭에서 확인 가능)를 구분해서 처리해야 한다.
- Extract critical CSS
- Defer non-critical CSS
- Minify CSS
Suspense, Success, ErrorBoundary
비동기 코드를 작성할 경우 로딩, 성공, 에러 세가지의 render 형태를 분리해서 작성한다.
퍼포먼스 향상을 위한 패턴
- prefetch API Request: 필요한 가능성이 높은 API 요청을 유저가 진행하기 전에 미리 prefetch 해놓는다. window.requestIdleCallback API은 브라우저의 이벤트가 유휴기간일 때 등록된 callback을 통해 미리 데이터들을 요청할 수 있다.
- refetchOnFocus: window에 focus 이벤트를 사용해서 윈도우가 포커스를 잃고나서 다시 포커스를 받는 경우 필요한 데이터를 업데이트할 수 있다.
- optimistic UI: 서버에 요청할 때 일단 성공했다는 가정하에 업데이트 된 데이터를 미리 표시하고 실제로 에러가 난 경우 롤백해서 다시 UI를 그리는 방식
