<img src="/img.jpg" alt="" loading="lazy">🔧 loading="lazy"의 의미와 용도 (코딩 관점에서)
HTML 속성인 loading="lazy"는 이미지나 iframe 같은 요소가 페이지에 바로 표시되지 않을 경우, 실제로 필요해질 때까지 로딩을 지연시키는 기능입니다.
이를 "지연 로딩(lazy loading)"이라고 해요.
✅ 어떤 상황에 쓰이나요?
예를 들어, 웹 페이지에 이미지가 여러 개 있을 때, 맨 아래쪽에 있는 이미지는 처음부터 로딩할 필요가 없겠죠?
이럴 때 loading="lazy"를 사용하면 스크롤을 내려서 그 이미지가 화면에 나타나기 전까지는 브라우저가 다운로드하지 않아요.
이렇게 하면:
- 페이지 속도가 빨라지고
- 트래픽도 절약되며
- 사용자 경험이 개선됩니다.
🖼️ 예제 코드
<img src="example.jpg" alt="설명 텍스트" loading="lazy">📌 다른 옵션도 있어요
loading="eager": 바로 로딩 (기본값)loading="lazy": 지연 로딩loading="auto": 브라우저가 판단
💡 요약
loading="lazy"는 이미지나 콘텐츠를 늦게 로딩시켜 성능을 최적화하는 HTML 속성입니다.
특히 이미지가 많은 페이지에서 꼭 써보는 걸 추천드려요!
Web Publisher