[Next.js] 이미지 로딩 속도 개선하기
목표
Next/Image의 로딩 속도가 느린 이유를 알고 속도 개선 방법 학습하기
예상 소요시간
10분
Next.js의 이미지 로딩 속도는 꽤 늦은 것으로 악명 높습니다. 실제로 저 또한 Next.js를 사용해서 프로젝트를 진행하던 도중, img 태그에선 딜레이 없이 바로 로딩되던 이미지가 Image 컴포넌트로 로딩할 땐 2초 이상 걸리는 상황을 겪은 적 있습니다.
어떻게 하면 이미지 로딩 속도를 개선할 수 있을지 방법을 알아보기 전에,
왜 Next.js의 Image 컴포넌트는 로딩 속도가 느린지 알아볼까요?
🤔 Next/Image 로딩속도가 느린 이유
Next/Image의 로딩속도가 느린 이유는, Image 컴포넌트는 기본적으로 lazy loading 방식으로 이미지를 로드하기 때문입니다. Next/Image는 화면에 들어왔을 때 이미지 로딩을 시작하기 때문에 미리 로딩되어 있을 때에 비해 느리다고 사용자가 인식하게 됩니다.
lazy loading : 이미지 로드하는 시점을 필요할 때까지 지연시키는 기술. 불필요한 대역폭 사용을 줄이고 필요한 이미지만 빠르게 로드할 수 있도록 하여 브라우저의 초기 로딩 속도를 크게 향상시켜준다.
또 다른 이유로는 Next.js의 기본 내장 이미지 로더가 있습니다. Next.js는 기본 이미지 로더로 squoosh라는 로더를 사용합니다. squoosh는 Next.js 공식문서에서 이야기하듯이 빠르게 설치할 수 있고 개발 환경에 최적화되어 있다는 장점이 있지만, 배포 상황에서는 타 로더에 비해 상대적으로 느리다는 단점이 있습니다.
🛠️ Next/Image 로딩 속도 개선 방법
Next/Image의 로딩 속도를 개선하는 방법은 크게 2가지가 있습니다.
priority
첫 번째 방법은 Next/Image의 props 중 하나인 priority를 이용하는 것입니다. priority 속성을 true로 해 주게 되면, 기존의 lazy loading 방식을 pre loading 방식으로 바꾸게 되면서 웹 화면이 로딩되기도 전 스크립트의 <head>에서 이미지가 미리 로딩되게 됩니다.
이렇게 priority를 true로 설정하면 이미지의 로딩을 우선시하여 딜레이를 없앤다는 장점이 있지만, <head>에서 이미지를 로딩하는 동안은 script가 멈추게 되면서 초기 화면 로딩 속도가 전체적으로 느려진다는 단점이 있으니 이 점을 염두하여 적절하게 사용하길 권장합니다.
Sharp
두 번째 방법은 Sharp 이미지 로더를 이용하는 것입니다. Next.js가 배포 상황에서 사용할 것을 적극 권장하는 이미지 로더인 Sharp는 기존 이미지 로더인 squoosh에 비해 훨씬 더 빠른 성능을 체감할 수 있도록 해 줍니다.
Sharp 로더를 프로젝트에 적용하기 위해선 아래 명령어를 입력하면 됩니다.
$yarn add sharp
그 외....
위에서 알아본 것처럼 Next/Image 내에서 이미지 로딩 속도 개선 방법들도 있지만, Next/Image 외적인 방법들도 존재합니다. 위의 두 가지 방법만으로도 충분히 만족스럽게 속도가 개선되지 않는다면, 파일 포맷을 Webp으로 바꾸거나 srcset 속성을 이용하기 등을 추천합니다.
오늘은 이렇게 Next/Image가 느린 이유와 그에 대한 해결 방법들에 대해 알아봤습니다. 도움이 되셨나요? 원하시는 정보를 얻으셨기를 바라며 이번 글은 여기서 마무리하도록 하겠습니다, 감사합니다 : )
'FE' 카테고리의 다른 글
| 자바스크립트 배열 메서드 가이드 포스터 (번역) (0) | 2023.02.13 |
|---|---|
| [Next.js] 왜 새로워진 next/Image는 더이상 objectFit을 필요로 하지 않게 됐을까? (0) | 2022.12.17 |
| [JS] LocalStorage & SessionStorage (0) | 2022.12.11 |
| [Next.js] 프로젝트에 head 설정하기 (next/Head, _document.js, /app.head.js) (0) | 2022.12.08 |
| [REACT] 함수형 컴포넌트와 클래스형 컴포넌트의 차이를 아시나요? (0) | 2022.11.19 |