1. Lighthouse로 Web Vitals를, Coverage로 사용하지 않는 파일의 비율을, Performance로 CPU와 네트워크 분석을, 네트워크를 통해 각 API요청을 확인하며 성능 혹은 병목 지점을 확인할 수 있다. 2. 주요 성능 지표 : FCP(First Contentful Paint), SI(Speed Index), LCP(Largest Contentful Paint), TTFB(Time To First Byte), TTI(Time To Interactive), TBT(Total Blocking Time), CLS(Cumulative Layout Shift), INP(Interaction to Next Paint) - Core Web Vital : LIC (LCP, INP, CLS) 3. Performance에서 병목 지점 파악 → 어떤 컴포넌트/함수가 실행에 오래걸렸는지 체크 → 단축 4. 번들 사이즈 분석 → 불필요한 의존성이 설치되지 않았는지 파악 → 단축(코드 스플리팅 등) 5. 코드 스플리팅은 번들을 필요에 따라 여러 개의 번들로 나누는 과정으로 지연로딩(lazy 메서드) + Suspense로 해결할 수 있다. 6. 리플로우와 리페인트를 일으키는 width/height, 리페인트를 일으키는 color보다 마지막 과정인 컴포지트만 일으키는 opacity, transform을 지향하자 7. 이미지 최적화 : 지연로딩(IntersactionObserver), 사이즈 최적화 : .webp, squoosh, 브라우저 호환성 : picture, source 사용 8. 폰트 최적화 - 서브 포멧, 포멧 폰트(WOFF2), data-uri 사용하여 css에서 폰트 요청, fontobserver 9. 캐시 - cache-control 설정(CSS, JS, 이미지는 public, max-age=31536000 / HTML은 no-store) 10. CLS 방지 - 이미지/광고 위치 너비 설정 11. 지연 로딩 - useEffect 혹은 mouseenter에서 이미지(new Image().src = ‘~’), 컴포넌트(import)를 prefetch
성능을 측정하는 방법과 최적화 방법을 실전적인 내용과 함께 알려주는 책이다. 실제 웹페이지를 통해 실습을 하며 설명해주어서 잘 와닿았고, ‘내 프로젝트에 어떻게하면 적용할 수 있을까?’에 쉽게 접근할 수 있었다. 실제로도 코드 스플리팅같은 최적화 기법이나 측정 방법은 내 프로젝트에서 유용하게 적용할 수 있었다. Next.js프레임워크를 사용하면 Image, Link, Script, localFont 컴포넌트, 혹은 Next.js 서버 캐싱 등 최적화 기능들을 많이 지원해주어서 Next.js를 사용하는 내 프로젝트에 적용하는데에는 한계가 있었다. 성능 최적화를 적용하기에 가장 적합한 프로젝트는 React만을 사용하는 프로젝트일 것 같다. 다음 번에는 Vite + React 기반으로 프로젝트를 만들어 이 책을 다시 꺼내보며 최적화를 하나씩 직접 적용하는 것도 재미난 경험이 될 듯하다.