Next.js (ver.15)를 활용한 프로젝트에서 Image 컴포넌트를 활용했다.
이미지 관련된 성능 향상을 위해서 Image 컴포넌트는 자주 사용해왔다.
그런데 이번 프로젝트에서는 뭔가 경고 메세지가 발생했다🤔🤔
왜❓❓❓
동적으로 경로를 지정해줬고, fill 속성을 사용했고, 사진에는 안나오지만 absolute도 지정했고, 부모 요소에 width, height를 정의했는데...🤔🤔
일단 next/image에 대해 알아보자
이미지 로딩 속도는 페이지 로딩속도에 지대한 영향을 미친다.
그렇기에 이미지를 효율적으로 관리하는 것이 무엇보다도 중요할 것이다.
Next.js에서 Image 컴포넌트는 HTML의 <img> 태그를 확장한 것으로, 이미지를 자동으로 최적화한다.
서버에서 자동으로 이미지 크기를 조정하고, 최적의 포맷을 선택하여 불필요한 데이터 전송을 줄입니다.
또한, lazy loading이 기본 설정되어 있어 뷰포트에서 벗어난 이미지는 사용자가 스크롤하여 해당 이미지가 필요할 때까지 로드되지 않습니다.
이러한 기능은 특히 대용량 이미지가 많은 사이트에서 페이지 로드 시간을 크게 단축시키는데 이는 LCP라고 하는 성능 관련 지표와 연관이 된다.
그렇다면 위와 같은 경고는 왜 생기는거야??
일단 페이지 퍼포먼스 향상하고 싶으면 sizes를 추가하라니깐 뭔가 큰 것을 놓친 것 같았다😨
sizes 옵션이 뭔지 알아봐야할 것 같았다.
음... 내가 이해한 부분은 다음과 같다.
반응형처럼 이미지의 크기나 배열이 뷰포트에 따라 변하는 경우에는, 브라우저가 최초에 페이지의 이미지 크기를 아직 모르기 때문에 뷰포트와 같거나 더 큰 크기의 이미지를 선택한다.
그래서 이 속성을 사용하면 이미지가 실제로 전체 화면보다 작을 것이라고 브라우저에 알릴 수 있습니다. 만약 sizes 속성을 지정하지 않으면 기본값 (전체 화면 너비)이 사용된다는 것이다.
-> 즉, 브라우저가 적절한 크기를 판단할 수 있도록 어느정도 가이드라인을 잡아줘야 한다는 것! 🫡
반대로 생각해보면 지정해주지 않았을 경우에 불필요하게 필요한 이미지보다 큰 사이즈를 불러오게 될 것이고, 자연스럽게 불필요한 용량의 파일을 다운 받게 된다는 것이다.
이는 결국 Image 태그의 최적화를 효율적으로 사용하지 못하는 결과를 불러올 것이고, 이것을 경고해준게 아닐까?? 😎😎
그래서 이렇게 반응형으로 구현한 부분에서는 sizes 옵션을 설정해주었더니 귀신같이 경고가 사라졌다.
그리고 웹에서 중요하게 먼저 로딩해야할 이미지라고 판단된 곳에는 priority 속성을 추가해주었다.
과연 성능상의 개선이 되었을까요?? 프로덕션 모드에서 확인해보자.
<테스트 결과>
🤔 오! 아직 여전히 좋지 않지만 LCP가 개선되었음을 확인할 수 있었다👍
결국 Next.js의 Image 컴포넌트는 자동으로 이미지 크기를 조절하고 최적화된 포맷을 제공한다.
이 과정에서 데이터를 줄여 로딩 시간을 단축하는 등 리소스 활용을 최적화 하는 것 같다.
이는 사용자 경험에 영향을 미칠 것이고, SEO 개선에 분명 도움이 될 것이다.
하지만 드라마틱하게 체감을 하기 위해서는 아직 갈길이 멀다...🤔
