[#1] 오프스크린 이미지 지연

젠가 사이트의 첫 화면은 서비스에 대한 간단한 소개와 카카오 로그인으로 이동할 수 있는 버튼이 있다.

소개는 3개의 간단한 문구와 이미지를 캐러셀 형태로 보여주는데, 해당 화면에서 Lighthouse를 통해 성능을 검사해보니

오프스크린 이미지 지연하기에서 1.35초의 예상 절감치가 계산되었다.

'Off Screen' 즉 화면에 보이지 않는 이미지에 대한 로딩을 지연시켜 해결할 수 있는 문제였다.

css의 loading: lazy 속성을 시도했다.

• 기존 코드

<div
  style={{
    backgroundImage: "url(https://image.zenga.club/wt3.png)",
    height: "463px",
    backgroundSize: "cover",
    width: "250px",
  }}
/>

• 수정된 코드

<img
  src="https://image.zenga.club/wt2.png"
  alt=""
  style={{
    height: "463px",
    width: "250px",
  }}
  loading="lazy"
/>

기존에는 모든 이미지들이 로딩이 되었지만 아래와 같이 캐러셀을 넘기자 로딩이 되었다.

보통 오프스크린이라고 하면 스크롤 아래에 있는 요소만 생각을 했는데 캐러셀에서도 고려해야 한다는 간단한 사실을 알게 되었다.