현재 상황
-
LCP : 6.6s (크롬 시크릿 모드, 모바일 기준)
-
이미지 형식 : webp(Next/Image에서 png > webp로 변환)
-
실제로 사용해보며 측정 : 느린 3G환경에서 측정
영상을 보면, 특히 이미지 렌더링 속도가 느리다. 인터넷 환경에 노트북이여서 그렇지 실제로 휴대폰 환경에, 인터넷이 좋지 않은 환경에서 접속하면 상당히 느릴 것이다.
-
Lighthouse
개선할 부분
- 아이콘 렌더링 속도
- 현재 png → svg로 교체
- 큰 이미지 렌더링 속도
문제점 파악
랜딩 페이지에 접속하는 사용자는 대부분 모바일 유저이다. 모바일에서 절반 정도는 빵빵한 와이파이가 아닌, 데이터 환경에서 접속할 것이다. 위와 같은 환경(모바일 + 3G)과 비슷하다고 해도 무방하다.
텍스트는 레더링이 곧장 되는데, 이미지 렌더링 속도가 느리다.
-
확인해보니, 모든 이미지의 너비가 모두 1200으로 받아오고 있다. 모바일 사이즈, 390px(iphone 12pro 기준)인데, 이미지를 모두 1200px로 가져올 필요가 있을까?
-
SSR에서 이미지는 렌더링이 되어 있지 않다. 그래서, 느린 데이터 환경의 모바일에서는 이미지 로딩 속도가 느렸던 것이다. 이미지까지 서버 단에서 렌더링을 해서 내려줄 수는 없을까?
- 이 원인이, lazy loading으로 인한 것일까? Next/Imag에서는 lazy loading을 default값으로 제공한다. 이를 사용하지 않기 위해서는
loading=”eager”옵션을 넘겨주면 된다.
- 이 원인이, lazy loading으로 인한 것일까? Next/Imag에서는 lazy loading을 default값으로 제공한다. 이를 사용하지 않기 위해서는
문제점 해결
1. 이미지를 불러오는 사이즈
현재, 모든 이미지를 1200px을 기준으로 가져오고 있다. 원인을 파악해보니 모든 Image컴포넌트의 속성으로 layout=”fill”을 사용하고 있다. layout=”fill”은 width와 height값을 넘겨주지 않고, 부모 요소 중 relaitve 속성을 가진 요소를 기준으로 가득 채우는 옵션이다. 이 옵션은 Next.js 13부터는 Image컴포넌트가 업데이트 되며 fill 옵션으로 변경되었다.
만약 fill속성을 사용하고, sizes를 명시해주지 않으면, 기본으로 100vw를 사용할 것이다.
-
before
-
after
가장 용량이 큰 이미지 기준 14.3kB > 5.1kB, 약 3배 가까이 다운로드 양이 줄어들었고, 속도는 11mx > 19ms, 약 2배 가까이 빨라졌다.
위는, 작은 아이콘 이미지여서 고정된 값을 설정할 수 있었다. 그 외에는, 이미지가 모두 상이하다. pc에서는 속도가 문제 없으니, 모바일만 사이즈 조정을 하면 되니, 미디어 쿼리를 이용하여 모바일 사이즈일 때 다운로드 받는 이미지의 크기를 조절하면 된다.
-
sizes="(max-width:576px) 20rem” -
before
-
after
기존 14.9kB → 5.1kB로 3배 가까이 다운로드 크기가 줄어들었다.