AllRightJunyoung / blog-project

Next.js를 사용하여 개인블로그 만들기
https://www.physicaljun.blog/
2 stars 0 forks source link

[성능] 배포된 페이지에서 발생하는 문제 #23

Closed AllRightJunyoung closed 12 months ago

AllRightJunyoung commented 1 year ago

각 페이지를 처음에 들어갈때 delay되는 현상이 발생하여 사용자 경험을 해친다.

두번째이상부터 페이지를 들어가면 캐시되서 사용자에게 빨리 보여줘서 문제는 안되지만

첫 이미지 로드할떄 걸리는 시간떄문인거 같다 이를 해결해보자

AllRightJunyoung commented 12 months ago

로딩스피너전

hydration과정에서 번들 사이즈가 작은 컴포넌트가 먼저 불러와지게 되어 위와같은 화면을 1~2초정도 보여주게 된다.. 번들 사이즈가 큰 컴포넌트를 불러오게 되면서 발생하는 문제이다

해결방법: 로딩스피너후

dynamicImport로 최상단 Layout 컴포넌트를 ssr:false로 설정하면서 Loading 중에 Spinner를 보여주게 했다.
그 결과 모든 화면이 다 나타날때까지 Loading Spinner를 보여주게 된다 .

AllRightJunyoung commented 12 months ago

로컬에 이미지를 저장하지 않고 Cloudinary를 사용하여 외부에 이미지를 저장하였고 외부이미지를 가져와서 렌더링해준결과

FCP가 상당히 올랐음 , 라이트 하우스 퍼포먼스 점수 80점 후반 ~ 90점대 초반찍기도한다.

실제로도 페이지 로딩속도가 1초가량 단축되는것을 눈에 보이게 확인되었음