FE 렌더링 최적화 히스토리

구글 확장 프로그램 light house을 통해 분석

첫 분석 시

1. 첫번째 이미지! Next Image를 사용하여 Swiper image 해결 20점 상승!

 

 

 

2. https://maybe-b50.tistory.com/67

windowing 라이브러리

사용해 봤으나 긴 목록이 아니었고 사용하더라도 성능이 오히려 떨어졌음..? Next hydrate가 더 효과적 나중에 많은 리스트를 렌더링할때 시도해보면 좋을 것 같다

 

3. 이부분을 해결해야하는데 기존에  page.js과 layout.js는 Next.js 13에서 렌더링 되는 부분인데 어떻게..? layout.js에서 사용되는 코드를 하나씩 주석 처리해보면서 어떤 부분에서 불필요한 자바스크립트가 실행되고 있는지 체크해봐야겠다

 

카카오 패캠 등 실행했을 때 3점 49점 등 많은 고려를 하지 않았다..? 음..고려한건가

ㅇ

이 부분에 대한 해결이 필요하다..번들링을 하고 있는 webpack 때문일까...? Nextjs로 만든 페이지 찾아봐야겠다

https://next-contentlayer.vercel.app/

Create Next App

100점임.. 번들링 문제는 아닌걸로 ㅋㅋ

깃헙으로 가져가서 뜯어봐야겠다..

clone으로 테스트하면 83점 밑에 이슈 때문인건가..

첫번째 발견점

next/font/goolge 랜더링 성능 이슈

5점 정도 차이가 났다 

폰트 적용을 안했을 시

https://mong-blog.tistory.com/entry/CSS-font-display-%EA%B8%80%EA%BC%B4-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%B0%A9%EC%8B%9D%EC%9D%84-%EB%B3%80%EA%B2%BD%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

[CSS] font-display, 글꼴 렌더링 방식을 변경하는 방법

 

font  렌더링 방식을 찾아보고 적용해 봤지만 폰트는 필수 불가결 하기 때문에 일단 다른 부분을 더 찾아봐야겠다..

일단 display:swap를 적용

 

두번째 발견점

Pages with WebSocket cannot enter back/forward cache.

이 나오면 local 환경이기 때문에 그렇다고함

 

이것저것 다 따져봤을때 아래 payload 되는 사이즈를 줄여야 해결 될 것 같다..

 

 

그럼 vercel로 배포를 해보고 한번 다시 테스트 해보자!

..? 개빡..앞으로 테스트할때는 배포먼저 해보자^^