[Lazy Loading] img 태그의 loading=“lazy”으로 이미지 로딩을 지연시키기

 

<img loading=“lazy” />

이미지 태그에서 loading=“lazy” 이라는 속성을 주어 사용할 수 있다.

뷰포트로부터 계산된 거리에 도달할 때까지 리소스 로딩을 지연시키고 이미지가 뷰포트 내에 있으면 로드하는 것을 의미한다.

➔ 사용자가 처음 사이트를 열 때 필요한 리소스 일부만 다운로드하므로 속도가 빨라진다. ➔ 이미지 로딩이 느릴 때 넣으면 좋다.

 

 

추가로 loading 속성에는 아래의 값이 지원된다.

• auto: 속성을 포함하지 않는 것과 동일한 브라우저의 기본 지연 로딩 동작
• lazy: 뷰포트로부터 계산된 거리에 도달할 때까지 리소스 로딩을 지연시킴
• eager: 페이지에서의 위치에 관계없이 리소스를 즉시 로드함
  (auto 값은 Chromium 사양에 언급되어 있지 않아 변경될 수도 있으므로 포함될 때까지 이 값은 사용하지 않는 것이 좋다.)

 

 

* 참고자료 : https://web.dev/i18n/ko/browser-level-image-lazy-loading/#%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%88%98%EC%A4%80%EC%9D%98-%EC%A7%80%EC%97%B0-%EB%A1%9C%EB%94%A9%EC%9D%B4-%ED%95%84%EC%9A%94%ED%95%9C-%EC%9D%B4%EC%9C%A0%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88%EA%B9%8C