Native lazy-loading for the web 적용하기

[llighter]

Chrome 76 버전 부터 lazy 로딩이 브라우저 단에서 지원이 된다. 현재로서는 크롬에서만 지원하지만 이후 다른 브라우저도 지원을 하게 될 것이라 기대한다.

이미지나 iframe을 로딩하는 것은 브라우저에서 큰 부담을 주는 작업이기 때문에 viewport 내에서 바로 보여지는 값이 아니라면 페이지 초기 로드시에 전부 로딩할 필요가 없다. 따라서 lazy 로딩을 적용하면 이미지나 iframe 영상이 많으면 많을 수록 성능 향상에 도움이 될 것이다.

다행히 lazy 로딩을 적용하려면 이미지 태그나 iframe 태그에 loading 옵션에 lazy를 넣어주기만 하면 된다. 우선 현재 홈페이지 구성이 mdc-web과 섞여 있어서 메인 페이지 로드 시 이미지를 백그라운드 이미지 옵션으로 지정을 한다. 홈페이지 UI를 전반적으로 개편할 때 lazy 로딩 옵션을 넣도록 하자.

관련 블로그(web.dev): https://web.dev/native-lazy-loading

[llighter]

https://github.com/llighter/yunha-ind/blob/584204cb3dff0b4c7153aa4627747760d68f0bea/src/site/_includes/components/YouTube.js#L38-L46

Add this property loading="lazy"

[llighter]

I don't know why didn't apply lazy load my site... Need to figure out