현재 상황

1. LCP : 6.6s (크롬 시크릿 모드, 모바일 기준)

2. 이미지 형식 : webp(Next/Image에서 png > webp로 변환)

   

3. 실제로 사용해보며 측정 : 느린 3G환경에서 측정

   

   영상을 보면, 특히 이미지 렌더링 속도가 느리다. 인터넷 환경에 노트북이여서 그렇지 실제로 휴대폰 환경에, 인터넷이 좋지 않은 환경에서 접속하면 상당히 느릴 것이다.

4. Lighthouse

   

개선할 부분

1. 아이콘 렌더링 속도
   • 현재 png → svg로 교체
2. 큰 이미지 렌더링 속도

문제점 파악

랜딩 페이지에 접속하는 사용자는 대부분 모바일 유저이다. 모바일에서 절반 정도는 빵빵한 와이파이가 아닌, 데이터 환경에서 접속할 것이다. 위와 같은 환경(모바일 + 3G)과 비슷하다고 해도 무방하다.

텍스트는 레더링이 곧장 되는데, 이미지 렌더링 속도가 느리다.

1. 확인해보니, 모든 이미지의 너비가 모두 1200으로 받아오고 있다. 모바일 사이즈, 390px(iphone 12pro 기준)인데, 이미지를 모두 1200px로 가져올 필요가 있을까?

   

2. SSR에서 이미지는 렌더링이 되어 있지 않다. 그래서, 느린 데이터 환경의 모바일에서는 이미지 로딩 속도가 느렸던 것이다. 이미지까지 서버 단에서 렌더링을 해서 내려줄 수는 없을까?

   • 이 원인이, lazy loading으로 인한 것일까? Next/Imag에서는 lazy loading을 default값으로 제공한다. 이를 사용하지 않기 위해서는 loading=”eager”옵션을 넘겨주면 된다.

문제점 해결

1. 이미지를 불러오는 사이즈

현재, 모든 이미지를 1200px을 기준으로 가져오고 있다. 원인을 파악해보니 모든 Image컴포넌트의 속성으로 layout=”fill”을 사용하고 있다. layout=”fill”은 width와 height값을 넘겨주지 않고, 부모 요소 중 relaitve 속성을 가진 요소를 기준으로 가득 채우는 옵션이다. 이 옵션은 Next.js 13부터는 Image컴포넌트가 업데이트 되며 fill 옵션으로 변경되었다.