Next.js 13.4 Built-in Optimizations 활용하여 진행한 성능 최적화

Next.js·2023-09-12

Optimize your Next.js application for best performance and user experience.

https://nextjs.org/docs/app/building-your-application/optimizing

0. 최적화 결과 🎉1. depcheck를 이용해 사용하지 않는 디펜던시 제거 2. 폰트 가변 글꼴 사용하기 (향상 지분 50%)3. 이미지 최적화 (향상 지분 50%)1) 바로 보이는 이미지 빠르게 로딩하기 with priority 2) 모든 이미지 크기 적절하게 설정하기 with sizes 🍯 TIP: LCP element를 확인하는 방법 🍯 TIP: 적절한 sizes 찾는 법 입니다!느낀 점

0. 최적화 결과 🎉

데스트탑 기준입니다! 3가지 도구로 측정, 기준은 Lighthouse로 진행했습니다!

Lighthouse 🎉

성능 25점 ↑ (73점→ 98점)

LCP 68% ↓ (3.2초 → 1초)

Speed Index 70% ↓ (4.1초 → 1.2초)

Others 🎉

PageSpeed Insights 점수 42점 ↑ (39→ 81)

PageSpeed Insights LCP 91.8% ↓ (12.2초 → 1.0초)

Web Vitals LCP 83% ↓ (1.8초 → 0.24초)

이전 점수 상세

이후 점수 상세

94-100 사이를 오고갑니다!

1. depcheck를 이용해 사용하지 않는 디펜던시 제거

depcheck를 이용해 dependencies, devDependencies 10개를 삭제

결과

효과는 미미(거의 없음!)

하지만 정리하니 좋았습니다!

2. 폰트 가변 글꼴 사용하기 (향상 지분 50%)

처음에 pretendard 가변글꼴을 사용했는데 굵기가 반영되지 않아 다시 굵기별로 다운받았었는데

실제로 버그였습니다! 개선되었다는 PR을 보고 다시 가변 글꼴을 적용하기로 했습니다.

코드 변화

Before

After

📈 결과

Lighthouse 성능 점수 16점 향상, LCP 44% 향상

Lighthouse: 73 → 89

Lighthouse LCP: 3.2초 → 1.8초

PageSpeed Insights: 39→ 64 (25 ↑)

PageSpeed Insights LCP: 12.2초 → 3.0초 (75% ↓)

Web Vitals LCP: 1.8초 → 0.24초 (86% ↓)

점수 상세

에셋을 변경해도 크기 오락가락(flickers) 없이 잘 적용되었습니다! 👏

3. 이미지 최적화 (향상 지분 50%)

1) 바로 보이는 이미지 빠르게 로딩하기 with `priority`

바로보이는 이미지와 LCP element는 priority=true로 설정합니다.

You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. - nextjs doces

2) 모든 이미지 크기 적절하게 설정하기 with `sizes`

Nextj.js <Image /> 에 대해

width, height은 비율을 계산해 Layout shift를 방지하기 위함입니다. 이 값으로 크기를 결정하진 않습니다!

실제 크기를 정하려면 style, className을 이용

크기에 따른 적절한 용량의 이미지를 적용하고 싶다면 sizes를 적어야합니다! - 그러면 nextjs가 srcset를 생성해줘요!

기존 코드

최적화 적용한 코드

👇 19kb → 7kb 줄었습니다!

🍯 TIP: LCP element를 확인하는 방법

0. LCP element란? LCP 측정 기준이 되는 요소, 페이지 내 가장 큰 요소입니다!

web vitals 플러그인을 설치

wev vitals 플러그인 설정에서 Console logging를 체크

이제 콘솔에 출력된 LCP를 클릭하면 LCP element를 확인할 수 있습니다.

🍯 TIP: 적절한 `sizes` 찾는 법 입니다!

아래 링크로 들어가셔서 gif 대로 하시면 sizes 수정이 필요한 경우 적절한 sizes 값이 나옵니다!

RespImageLint

RespImageLint is a bookmarklet that checks images of a webpage against a list of common mistakes and best practises. Just run the bookmarklet and see if it detects any problems with your images. You can find more information on the Project page on GitHub.

https://ausi.github.io/respimagelint/

(위에 gif가 좀 정신없어서 거리를 좀 뒀습니다 😂)

느낀 점

💡

성능 최적화를 위한 빌트인 기능을 사용하기만 해서는 100점이 될 수 없다. 최적화를 위한 지식이 있어야만 빌트인 기능이 채워주지 못하는 부분을 개선할 수 있고 그 비중이 성능에 미치는 영향이 꽤 컸다! 때문에 아직 부족한 점이 많다고 더 느끼게 되었다!

이제 최적화하는 방법을 알았으니 다음에는 미리 최적화해서 넣을 수 있겠다!

폰트, 이미지가 성능에 정말 큰 영향을 미치는 구나!

생각보다 확 확 오르니 성취감도 있고 재밌었다!

한층 더 성능 좋은 코드를 작성할 수 있고 개발자로서 성장한 느낌!

성능에 대해 아직 모르는 것들이 많다. 처음보는 용어들도 많이 나왔고 시간을 내서 더 공부하고 싶다.

현재 개선 요소에 남아있는 대부분의 것들이 외부툴들인데, 이 부분도 최적화를 하고 싶어서 Next.js 빌트인 Analytics도 기회가 된다면 사용해보고 어느정도의 개선 효과가 있는지 확인하고 싶다! - Google Meta Tags 같은 것들의 대체재인지 병행하기 위한 것인지 먼저 확인이 필요! - GA를 열심히 공부한 팀원들도 있어서 이건 정말 조심스러운 부분이다

참고자료