맛이슈 프로젝트는 레시피 공유 커뮤니티 서비스이다 보니, 게시글 리스트에서 보여지는 썸네일 이미지들이 정말 많다. 따라서 사용자 경험을 향상 시키려면 무엇보다도 이미지 로딩속도가 중요할것이라고 생각했다.
Next.js 의 Image 컴포넌트는 그냥 사용하기만 해도 이미지 최적화를 자동으로 해주는 강력한 기능을 가지고 있다. 서비스를 구현할때는 이미지를 자동으로 최적화 해준다는 정도만 알고 그냥 사용했지만, 제대로 알고 사용하는 것과 모르고 사용하는것의 차이는 크기 때문에 어떻게 이미지를 최적화 해주는지 직접 확인해 보았다. 우선 Next의 Image컴포넌트가 제공하는 대표적인 기능은
- Lazy Loading
- WebP 형식으로 자동변환
- 이미지 사이즈 최적화
- 브라우저 자동 캐싱
이 있는데, 각 기능에대해서 간단하게 설명하자면
Lazy Loading
레이지 로딩은 이미지가 화면에 나타날 때까지 이미지를 로드하지 않고 지연시키고 있다가, 사용자가 해당 이미지를 실제로 볼 수 있을 때 로드하는 기술이다. 이로 인해 초기 페이지 로딩 시간이 단축되고, 불필요한 데이터 트래픽을 줄여준다.
WebP형식
브라우저가 웹플(WebP) 형식을 지원하는 경우 Next/Image는 자동으로 웹플 형식으로 이미지를 변환하여 최적화한다. 웹플은 JPEG나 PNG와 비교하여 이미지의 용량을 크게 줄여주는 형식으로, 로딩 속도를 단축시켜준다.
이미지 사이즈 최적화
Next/Image는 이미지를 자동으로 최적화하여 사용자에게 가장 적절한 형식과 크기의 이미지를 제공한다. 이를 통해 사용자 디바이스에 적합한 이미지를 전송하고, 데이터 트래픽을 최소화하여 웹 페이지의 성능을 최적화 해준다.
이 사진을 보면 알 수 있듯이 디바이스의 크기마다 이미지 사이즈를 다르게 지정해준다.
사진마다 다르지만 2.5 MB나 되는 이미지가 157kb 로 약 93.72% 정도 줄어들었다. 그리고 페이지 접근시 다운로드되는 총 이미지 용량도 21.5MB 에서 16.3MB로 줄어들었다.
네트워크 환경을 빠른3G로 바꿨을때 이미지 최적화를 통한 로딩속도 차이가 확연히 들어났다.
브라우저 자동 캐싱
Next/Images는 브라우저 캐싱을 자동으로 활용하여 이미지 로딩 속도를 향상시킨다. 이전에 로드한 이미지는 캐시에 저장되어 리로드 시 서버로부터 이미지를 다시 받지 않고 빠르게 로딩시켜준다.
사진을 보면 알수있듯이 페이지의 두번째 방문부턴 이미지 로딩 속도가 말도안되게 빨라진걸 볼 수 있다.
또한 성능 최적화와 별개로 Next/Image는 Placeholder라는 기능을 제공해주는데, 이미지 로딩이 느리면 해당 이미지가 차지하는 크기가 처음에 0이였다가 데이터가 로딩된후 커지면서 레이아웃이 변하는데, Placeholder는 로딩되기 전에도 해당 이미지크기의 스켈레톤 UI를 띄워줘서 Layout의 변화가 없게 해줘서 사용자 경험을 향상시켜준다.
결론
이번 프로젝트에서 Next/Image의 placeholder 기능을 통해 로딩시 시각적인 안정성과, 이미지 최적화를 통해 성능 향상 및 로딩속도를 개선할 수 있게 되었다.
