폰트 최적화
subset, unicode-range, data-uri

이미지 최적화
picture tag

레이지 로딩
https://web.dev/code-splitting-suspense/

클린 코딩:
https://ui.toast.com/fe-guide/ko_ANTI-PATTERN#script%EB%8A%94-%EB%AC%B8%EC%84%9C-%ED%95%98%EB%8B%A8%EC%97%90%EC%84%9C-%ED%8F%AC%ED%95%A8%ED%95%9C%EB%8B%A4

javascript - run time
7 단계
중에 -> parsing 단계

브라우저의 구조가 7단계

• 이중 렌더링 엔진이 있다 => parsing html + css file => convert to DOM tree
  -> 이후 레이아웃 단계 (상태도 포함)
  -> 이후 페인트 단계
  => reflow (레이아웃 관련) / repaint (px / 색) > trigger re-rendering
  -> 이후 composite 단계에서 레이아웃

GPU rendering 최적화 (performance optimization)
(레이아웃 + 페이트 단계를 건너뜀)
-> opacity (display: none 대신) + transform (직접적으로 width 나 height를 분기처리한다)

=================
webpack eject => customize bundle (npm cra bundle analyze)

동적 import 문 (필요한 부분에서만 import 시킴 -> code splitting/ chunk 로 나누다)

동적 import 를 사용하면, 자동으로 code-splitting 되고 ->

suspense/ lazy

data-set => attr data-name

lazy + preloading

preloading example:

const preLoad = () => {
const preLoadImg = new Image();
preLoadImg.src = slideOne;
};

====================

폰트 최적화

scoosh

image storing in public vs src => diff in cashing