FE 렌더링 최적화 히스토리

React

hovinee 2023. 11. 1. 13:44

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

첫 분석 시

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

windowing 라이브러리

애플리케이션에서 긴 목록을 렌더링 하는 경우 ' Windowing' 이라는 기법을 사용하는 것을 추천합니다. 이 기법은 주어진 시간에 목록의 부분 목록만 렌더링 하며, 컴포넌트를 다시 렌더링하는 데

maybe-b50.tistory.com

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

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

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

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

Create Next App

next-contentlayer.vercel.app

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

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

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

첫번째 발견점

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

5점 정도 차이가 났다

폰트 적용을 안했을 시

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

🙂 이번 시간에는 글꼴 랜더링 방식을 컨트롤 하는, font-display에 대해 알아보았다! 1. 글꼴 랜더링 방식 우리가 어떤 사이트에 들어갔을 때 글자가 늦게 나타나거나, 혹은 글꼴이 나중에 적용되

mong-blog.tistory.com

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

일단 display:swap를 적용

두번째 발견점

Pages with WebSocket cannot enter back/forward cache.

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

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

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

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