lazy load lozad fast!..

Arif Sunarko X YouTuber 4/19/2020 04:39:00 AM

Does lazy loading of image impacts SEO?

Answer

Not sure, while Google mentions that itexecutes JavaScript while indexing a webpage via it's crawlers, several individuals have experienced a decrease in their webpage ranking when the site loads content via JavaScript. To avoid this situation and to tackle the worst case scenario which is when JavaScript is disabled, read the following answermentioning the use of <noscript>element to share the actual source of images to crawlers.

How to load images normally when JavaScript is disabled?

Solution

Use noscript element in HTML to load elements normally when JavaScript is disabled in browser.

<!-- LazyLoaded using JS -->
<img class="lozad" data-src="image.png" />

<!-- Loaded when JS is disabled --><noscript><img src="image.png" /></noscript>Is it possible to check if elements have been lazy loaded by Lozad?Solution

Yes, Lozad.js adds data-loaded="true" attribute to the elements that have been lazy loaded.

<img class="lozad" data-src="image.png" src="image.png" data-loaded="true" />

How to support browsers in which IntersectionObserver is not supported?

Solution

IntersectionObsever API is available in latest version of Chrome, Firefox, IE Edge, Opera etc. To use Lozad.js in browsers where IntersectionObserver API is not supported as mentioned here, use it's polyfill before loading Lozad library.

<!-- IntersectionObserver Polyfill -->
<script src="https://raw.githubusercontent.com/w3c/IntersectionObserver/master/polyfill/intersection-observer.js"></script>

<!-- Lozad.js --><script src="https://cdn.jsdelivr.net/npm/lozad"></script>

Loading this polyfill asynchronously on need (when Intersection Observer support is not available)

<script type="text/javascript">
if (!('IntersectionObserver' in window)) {
    var script = document.createElement("script");
    script.src = "https://raw.githubusercontent.com/w3c/IntersectionObserver/master/polyfill/intersection-observer.js";
    document.getElementsByTagName('head')[0].appendChild(script);
}
</script>

<!-- Lozad.js -->
<script src="https://cdn.jsdelivr.net/npm/lozad"></script>