HTML Lazy Loading 구현 및 테스트 HTML Lazy Loading Implementation and Testing

Lazy Loading 관련해서 설명은 여러 블로그들이나 유튜브를 찾아보고 간략히 설명으로 적어두겠습니다. 자세한 설명은 검색 후 찾아보시는 것을 추천드려요. Lazy Loading은 웹 브라우저에서 이미지를 로드되는 방법을 최적화하기 위해 사용되고 이미지를 즉시 로드하지 않고 사용자가 이미지를 볼 때만 로드하여 각각의 이미지를 하나씩 가져오는 방식입니다. 자바스크립트를 따로 작성할 필요가 없다는 장점도 있죠 단점은 사용자에게 제공되는 이미지 크기를 최적화하지 않으면 웹의 로딩이 느려집니다. 그 단점들을 보완을 위해 srcset와 sizes 속성을 사용하면 되는데 그건 다음 글에서 ㅋㅋ

Lazy Loading 안 했을 때

Lazy Loading 했을 때

끝