[Enhancement] 성능을 최적화해야한다.

noy3928 commented 1 year ago

다양한 페이지에서 성능 최적화가 필요하다.

라이트하우스가 제시해 준 최적화 목록은 다음과 같다.

[ ] 사용되지 않는 js 파일 삭제하기
[x] 초기화면에 들어오는 이미지의 경우 이미지 lazy loading 적용하지 않기
- https://web.dev/lcp-lazy-loading/?utm_source=lighthouse&utm_medium=devtools
[ ] 적절한 이미지 사이즈
- https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images/?utm_source=lighthouse&utm_medium=devtools
- https://nextjs.org/docs/api-reference/next/image#sizes
[ ] 커다란 네트워크 페이로드 피하기
- https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/?utm_source=lighthouse&utm_medium=devtools
[x] 렌더링을 blocking하는 요소들 제거하기
- https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/?utm_source=lighthouse&utm_medium=devtools
- https://nextjs.org/docs/basic-features/script
- …static/pretendard-dynamic-subset.css(cdn.jsdelivr.net)
- …styles/github-dark.min.css(cdnjs.cloudflare.com)

그 외에 아래에 계속 정리하고 있고, 현재 생각나는 최적화 목록은 다음과 같다.

[ ] write 페이지에서 불러오는 TextEditor를 preload 해오기
[ ] 불필요하게 리렌더링이 되고 있는 영역들을 memoization하기

noy3928 commented 1 year ago

우선 글 작성하기(/write) 페이지에서 TextEditor를 dynamic import으로 불러오고 있는 탓에 로딩 속도가 느리다. 해당 이슈를 처리할 수 있는 방법을 찾아야 한다.

현재 생각나는 방법으로는 /write로 갈 수 있는 Link가 사용자의 화면에 나타났을 때, 이미 TextEditor를 preload할 수 있는 방법이 있는지 찾아보는 것이다.

noy3928 commented 1 year ago

불필요하게 리렌더링이 되고 있는 부분은 없는지 확인한 후, useMemo와 useCallback을 적용해줄 필요가 있다.

noy3928 commented 1 year ago

초기화면에 들어오는 이미지의 경우 이미지 lazy loading 적용하지 않기

해당 이슈는 #92 해당 Pr에서 해결했다.

          <Image
            src={article.imgUrl}
            alt="Thumbnail of essay-article"
            placeholder="blur"
            blurDataURL={article.blurDataURL}
            fill
            style={{ objectFit: 'cover', borderRadius: '8px' }}
            loading={index < 3 ? 'eager' : 'lazy'} // 이 부분
          />

이렇게 화면에 맨 처음에 등장하는 요소들을 eager 로딩으로 바꿔줌으로써 해결되었다.

noy3928 commented 1 year ago

사용되지 않는 js 파일 삭제하기

초기 렌더링시 당장 필요하지 않는 js들을 제거해줌으로써 초기 렌더링 속도를 향상시킬 수 있다.

다수의 페이지에서 사용되는 컴포넌트 dynamic import하기

app에서 사용되고 있는 Navbar와 Modal 컴포넌트에 대해서 dynamic import를 적용해주었다.

before :

after :

noy3928 commented 1 year ago

라이트 하우스에서 확인을 해보니, /programming 페이지에서 필요없는데 미리 로드해오는 파일들이 있는 것으로 확인이 되었다.

그래서 어떤 파일들인지 확인을 하기 위해서 bundle analyzer를 실행해보았다.

분석해 준 파일을 확인해보았을 때, light house에서 700kb가 나온 부분이랑, 번들 분석기를 통해서 700kb가 나온 부분이랑 일치하는 것 같다. 그래서 이것으로보아 react syntax highligher 라는 라이브러리를 lazy loading 시킬 필요가 있을 것 같다. 사실 이 라이브러리는 디테일 페이지에서만 필요한 라이브러리인데, 굳이 import를 할 필요가 없을 것 같다.

f-lab-edu / RECOEN