[html] <img> 태그 이미지 로딩 지연 시키기 포스팅 썸네일 이미지

Web

[html] <img> 태그 이미지 로딩 지연 시키기

1. 지연로딩을 시키는 이유 1. 많은 이미지, 용량이 큰 이미지 로딩 2. 이미지 로딩중 - [웹 페이지 로딩 상태, 유저 인터렉션 X] 3. 유저 이탈 확률 증가 우선 화면을 그리는데 집중하고 나중에 이미지를 로딩 시키자 라는 방법론 2. HTML 이미지 태그 속성 으로 지연 시키기 //다른 콘텐츠의 표시 지연을 피하기 위해 이미지를 비동기적으로 디코딩 합니다. - loading="option" 브라우저가 이미지를 불러올 때 사용할 방식을 지정합니다. eager(기본값) : 뷰포트 안에 위치하는지 여부에 상관하지 않고 이미지를 즉시 불러옵니다. lazy : 이미지가 뷰포트의 일정 거리 안으로 들어와야 불러옵니다. 거리는 브라우저가 정의합니다. 스크롤링을 하다가 이미지를 보게 될 것으로 충분히 예상 가..

2022.06.07 게시됨