render="lazy" 속성이란

lazy 속성

render="lazy"는 웹 개발에서 사용되는 속성으로, 웹페이지의 이미지나 동영상 같은 미디어 파일을 "게으르게" 로드하도록 설정하는 기능입니다. 쉽게 말해서, 해당 미디어 파일이 화면에 보일 때까지 로드하지 않도록 하는 것입니다.

어떻게 작동하나요?

• 일반적인 경우: 페이지가 로드될 때 모든 이미지나 동영상이 한꺼번에 로드됩니다. 이 경우 페이지 로딩 속도가 느려질 수 있습니다.
• render="lazy"를 사용하면: 사용자가 스크롤해서 이미지나 동영상이 화면에 나타나기 전까지는 해당 파일을 로드하지 않습니다. 이로 인해 초기 페이지 로딩 속도가 빨라지고, 사용자는 필요할 때만 해당 미디어 파일을 로드하므로 불필요한 데이터 사용을 줄일 수 있습니다.

예시:

<img src="example.jpg" loading="lazy" alt="Example Image">

위 코드에서 이미지 example.jpg는 화면에 나타날 때만 로드됩니다.

 

장점:

• 페이지 로딩 속도가 빨라집니다.
• 불필요한 데이터 사용을 줄일 수 있습니다.

단점:

• 아주 빠르게 스크롤할 때 이미지 로딩이 지연될 수 있습니다.

render="lazy"는 이런 장점 때문에 많이 사용되고 있습니다.