개발자
류준열

web-optimize

모달 렌더링 속도 66% 향상 (150ms -> 50ms)

레이지 로딩이 안되는 문제를 처리하는 과정에서 display:none과 react-slick이 일으키는 레이아웃 쓰래싱을 발견하고 모달 전체 렌더링 속도를 66% 향상시켰다. (150ms -> 50ms)

랜딩페이지 최상단 섹션 렌더링 속도 개선

지하철 모바일 환경에서의 랜딩페이지 최상단 섹션의 렌더링 속도를 개선하기 위한 작업들을 했다. 가장 빠르게 확인 할 수 있는 작업인 lazy loading과 폰트 최적화를 하고 전,후 변화를 측정했다. 모바일 라이트 하우스가 18% 개선되었다.

code spliting으로 성능 개선

게시글 페이지의 page.js에서 highlight 라이브러리를 분리하여 lighthouse 점수를 78 -> 85 로 증가시켰다.

SSR에서 고려해야 할 것들

next는 SSR을 할 수 있는 리액트 프레임워크이다. JSX문법으로 렌더링 할 코드를 작성하면, next 서버에서 html을 만들어주고 그 이후 hydration이 진행되면서 리액트(CSR)이 진행된다.