Enhancing The New York Times Web Performance with React 18
Medium
뉴욕타임즈에서 React 18을 도입하면 INP 점수가 개션될 것이라고 보고 SEO가 중요한 뉴스 사이트로써 SEO 점수 개선을 위해 React 18을 도입한 과정입니다. Core Web Vitals에 포함된 Interaction to Next Paint(INP)는 사용자가 인터렉션을 했을 때 다음 페인트까지의 지연시간을 측정하여 사용자 경험 점수로 쓰고 있고 Core Web Vitals은 구글 검색 결과에 영향을 미치기 때문에 중요한 부분입니다.
과거 React 테스트에 많이 쓰이던 Enzyme이 React 18은 지원하지 않기 때문에 최근 React 18로 올릴 준비를 하면서 많은 회사에서 Enzyme을 걷어내고 React Testing Library로 갈아타는 움직임을 보이는데 뉴욕타임즈도 마찬가지였습니다.
먼저 Enzyme을 React Testing Library로 교체하는 작업을 먼저 한 뒤 그외 주요 의존성을 업데이트하고 React 18을 위해 createRoot
와 hydrateRoot
같은 최신 API를 먼저 렌더링 했다고 합니다.
뉴스 사이트라 과거 컨텐츠도 많이 있는데 문제가 없는지 검증하던 과정에서 뉴스에 임베딩한 컨텐츠에서 하이드레이션 불일치 문제가 발생하면서 해당 부분이 제대로 렌더링 되지 않는 현상이 발견되었고 이를 통해서 기존보다 React 18이 하이드레이션 불일치에 더 민감하다는 것을 발견했다고 합니다.
해당 문제를 수정하고 릴리스 한뒤 p75에서 INP가 30% 개선되고 리렌더링도 절반으로 줄어들었다고 합니다.
https://open.nytimes.com/enhancing-the-new-york-times-web-performance-with-react-18-d6f91a7c5af8
다음 내용이 궁금하다면?
이미 회원이신가요?
2024년 7월 19일 오전 10:10