최근 들어 Next.js를 접하고 너무 재밌어서 기존에 미뤘던 프로젝트를 Next.js로 마이그레이션 해봤다.
바로 내 포트폴리오 사이트였는데, 2019년도인가 처음 fork를 뜨고 가져와서 내용만 업데이트를 하고 있었다.
기존에는 바닐라JS + HTML + CSS + GithubPage를 이용했었는데, React도 익숙해졌다 싶어서 Next를 도입했고 Next 배포를 위해 GithubPage를 쓰다가 이미지 경로설정때문에 귀찮기도 하고 또 Vercel를 써보고 싶어 Vercel를 통해 배포했다.(당연히 짱짱이었음)
일단 최대한 디자인적으로 비슷하게 구현하는 것을 목표로 했고 실제 완성된 모습은 https://kang-portfolio.vercel.app/ 가면 확인할수 있다.
쨋든 배포도 하고 SEO도 신경쓰고 구글, 네이버에도 검색 노출도 했는데, 문득 성능은 어떨까라는 고민을 하게됬다.
그래서 바로 성능 테스트를 진행했다.
안타깝게도 처참한 Performance가 눈에 들어왔고 이번 글에서는 이 점수를 개선하는 과정을 하나씩 따라가 보려고 한다.
LightHouse를 하면 어떤 점이 점수를 낮게 했는지 갓구글 형님들이 알려주시고 계신다.
이제 하나씩 제거해보자.
문제점 : Reduce unused JavaScript
일반적으로 나는 React의 경우 페이지 단위의 React.lazy를 통한 코드 스플리팅을 적용한다.
근데 Next의 경우 12 버젼이 되서야 React.lazy를 지원하고 일반적으로 페이지 단위의 스플리팅은 알아서 해준다.
하지만 현재 홈페이지는 페이지가 1개인 레알 단일 페이지 사이트이다 보니 해당 페이지에 진입하는 순간 모든 컴포넌트가 불러와지는 현상이 일어난다.
해당 구조상에서 생각나는 방법은 Intersection observer API를 이용해서 해당 컴포넌트에 진입시 랜더링 치는 방식인데
실제 구현상의 문제인가 제대로 동작하지 않았다.
그래서 일단 Next의 dynamic import + Suspense를 적용해보았다.
추가로 Suspense는 React.lazy와 <Suspense>와 비슷한 역할을 하는 컴포넌트인데 일단 React version이 18이어야 동작한다.
따라서 React 버전도 18로 올려줘야하고 현재 beta버전 태그를 통해 업글할 수 있다.
Advanced Features: Dynamic Import | Next.js
Dynamically import JavaScript modules and React Components and split your code into manageable chunks.
nextjs.org
Installing React 18 Beta · Discussion #9 · reactwg/react-18
Installing React 18 To install the latest React 18 beta, use the @beta tag: npm install react@beta react-dom@beta We don't have a specific release dates scheduled, but our expected timeline is:...
github.com
그 결과로 아래 사진처럼 분리하라는 말은 사라지고 점수는 3점이 늘었다. 근데 그래도 아직 낮은 점수다.
하지만 아직도 Reduce unused JavaScript를 하라고 나온다..
더 찾아들어가보자.
구글 개발자 콘솔에 보면 Coverage 라는게 있다. 자세한 사용법은 공식 블로그 가서 확인하면 된다.
Find Unused JavaScript And CSS With The Coverage Tab - Chrome Developers
How to find and analyze unused JavaScript and CSS code in Chrome DevTools.
developer.chrome.com
그런 후에 빨강색 원을 클릭해서 실행하면 결과가 나온다.
나의 경우 일단 chrome-extension중에 react_devtools가 문제라고 나왔다....
React를 확인하기 위해 깔아논 건데 이게 문제가 될 줄이야..( 근데 생각해보면 분석을 위해 사용하는거니 당연히 딜레이를 줄수밖에 없을 것같다)
그 아래는 framework.js인데 이건 이름보니 뭔가 next 관련 설정파일인거같은 느낌이 든다. 아무튼 react_devtools를 끄고 확인해보자. 점수가 10점이나 올랐다.
여기서 한단계 더 나아가보자.
보시다시피 extensions들이 퍼포먼스에 부정적이니 없는 상태로 테스트해라 라는 말인데, 아주 간단하게 시크릿모드로 들어가서 확인하면 된다.
점수가 단번에 20점이 올랐다. ~!~!~. 그리고 Reduce unused JavaScript 문구도 사라졌다.
[첫시도 최종 결과]
* Performance 변화 : 44(시작) -> 47(Next suspense 도입) -> 57(react_devtools 제거) -> 77(스크릿모드)
* 이제 Diagnostics에 나온 것들을 공부 후에 더 제거해보면 될 듯싶다.
'개발 > Next.js' 카테고리의 다른 글
| [Next] 안정감있는 서비스를 위하여 (Sentry) (1) | 2023.01.12 |
|---|---|
| [Next] localstorage를 사용하는 방법 #1 (4) | 2022.01.28 |
| [Next] Tailwind CSS 도입 및 세팅(feat.Next 12) (0) | 2022.01.05 |
| [Next] 웹페이지의 성능 개선을 해보자 #2 (feat.LightHouse) (0) | 2021.12.22 |
| [Next] Susponse, Error Boundary 적용 후기(feat.SWR) (0) | 2021.12.20 |
댓글