[Lazy Loading] img 태그의 loading=“lazy”으로 이미지 로딩을 지연시키기
이미지 태그에서 loading=“lazy” 이라는 속성을 주어 사용할 수 있다. 뷰포트로부터 계산된 거리에 도달할 때까지 리소스 로딩을 지연시키고 이미지가 뷰포트 내에 있으면 로드하는 것을 의미한다. ➔ 사용자가 처음 사이트를 열 때 필요한 리소스 일부만 다운로드하므로 속도가 빨라진다. ➔ 이미지 로딩이 느릴 때 넣으면 좋다. 추가로 loading 속성에는 아래의 값이 지원된다. auto: 속성을 포함하지 않는 것과 동일한 브라우저의 기본 지연 로딩 동작 lazy: 뷰포트로부터 계산된 거리에 도달할 때까지 리소스 로딩을 지연시킴 eager: 페이지에서의 위치에 관계없이 리소스를 즉시 로드함 (auto 값은 Chromium 사양에 언급되어 있지 않아 변경될 수도 있으므로 포함될 때까지 이 값은 사용하지 않..
TIL
2023. 7. 24.
