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

[AllRightJunyoung]

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

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

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

[AllRightJunyoung]

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

해결방법:

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

[AllRightJunyoung]

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

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

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