Artzip Refactoring 결과 분석 - 성능 편

[punchdrunkard]

비교 대상

각 페이지 별로 LightHouse 를 이용하여 성능 점수와 network payload 를 측정한다.
프로젝트 완성 직후 첫 릴리즈(8월 17일, PR #208 기준, 해당 배포 링크와 비교한다.
성능 비교는 크롬 개발자 도구의 LightHouse 의 점수와 network 탭의 다운로드 용량을 이용하였다.

메인 페이지

주요 Factor

• 첫 페이지 로딩 방식을 SSR 방식으로 변경
• 스와이퍼의 카드 이미지에 next/Image 적용

리팩터링 전

• LightHouse 분석 결과

• 다운로드 용량

리팩터링 후

• LightHouse 분석 결과

• 다운로드 용량

전시회 상세 페이지

• 이 페이지의 경우, api key 문제로 리팩터링 후와 리팩터링 전에 로딩되는 컴포넌트가 다르기 때문에,
  둘을 같은 선상에서 비교할 수 없었음.
• 따라서, 주요 리팩터링 요소인 SEO, Accessibility 를 비교

주요 Factor

• 데이터 패칭에 SSR 방식 사용
• 이미지에 next/image 적용

리팩터링 전

• LightHouse 분석 결과 - SEO, Accessibility

리팩터링 후

• LightHouse 분석 결과 - SEO, Accessibility

커뮤니티 페이지

주요 Factor

• 각 썸네일 이미지에 next/image 적용
• 첫 데이터의 경우 SSR 방식으로 불러오기
• 무한 스크롤 동작 방식 변경 (scroll + throttling => Intersection Observer api)

리팩터링 전

• LightHouse 성능 점수 분석
  
  

• network 다운로드 용량
  

리팩터링 후

• LightHouse 성능 점수 분석
  
  

• network 다운로드 용량
  

리뷰 상세 페이지

• 기준 게시글 (https://artzip.shop/reviews/detail/380)
  • 사진이 5개 올라가 있는 게시글에서 확인

주요 Factor

• 댓글 데이터 패칭에 SWR 활용
• 게시글 내용의 데이터 패칭으로 SSR 방식으로 변경

리팩터링 전

• LightHouse 성능 분석 결과
  
  

• network 다운로드 용량
  

리팩터링 후

• LightHouse 성능 분석 결과
  
  

• network 다운로드 용량
  

유저 페이지

주요 Factor

• 페이지 로딩 방식 CSR 으로 변경 (private 한 페이지 임에 집중)

리팩터링 전

리팩터링 후

후기 작성 페이지

주요 Factor

• 기홍님(@gitul0515 )의 상태 함께 두기 기법을 적용한 폼 최적화 적용 (링크)

리팩터링 전

리팩터링 후

전체 페이지 평균 분석 결과