DEV Community

loading...
Cover image for Lazy load any charts and ads with lazysizes.js

Lazy load any charts and ads with lazysizes.js

Oleh Mertviacheko
・2 min read

After adding emoji trends charts on emojigraph.org/chart-decreasing/, I faced a significant drop 📉 in page loading speed on mobile devices. And the same problem I had with ads.

I’ve already used lazysizes.js for lazy loading images, so I started to search for a way to use the same library to lazy load charts and ads.

Hopefully, there is a lazybeforeunveil event fired on each lazyload element right before the “unveil” transformation.

First, add your chart library dns-prefetch in <head>…</head> section, so you won’t waste time loading the library but will be ready to load a bit faster once you need it:

<link rel=”preconnect dns-prefetch” href="https://cdn.jsdelivr.net/npm/apexcharts@3.19.3/dist/apexcharts.min.js" crossorigin=”anonymous”>

Then add thelazyload class to the div containing your chart.

<div id="tracker_chart" class="chart lazyload" data-expand="-150" style="height: 510px;"></div>

You can also set data-expand attribute to set in pixels when to start to lazy preload images/iframes. It could be set to a negative value, I usedata-expand="-150" to load chart only after 150px of my chart placeholder are in the viewport area.

I’m using an URL-encoded SVG to make a nice looking chart placeholder.

<div id="chart_brush" style="  
    height: 510px; width: 100%;   
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" ...%3E ... %3C/svg%3E');  
    background-repeat: no-repeat;" >

Add following js code before closing </body> tag:

<script type="text/javascript">  
document.getElementById("tracker_chart").addEventListener("lazybeforeunveil", function() {  
    var scriptLibrary = document.createElement('script');  
    scriptLibrary.onload = function () {  
        var scriptChart = document.createElement('script');  
        scriptChart.src = '/js/chart.js';  
        document.body.appendChild(scriptChart);  
    };  
    scriptLibrary.src = 'https://cdn.jsdelivr.net/npm/apexcharts@3.19.3/dist/apexcharts.min.js';  
    document.head.appendChild(scriptLibrary);  
});  
</script>

Here we add EventListener to your chart div, which loads your chart library and javascript to plot the chart after the event is fired.

Where scriptLibrary.src — link to your library, and scriptChart.src — link to js plotting a chart that is dependent on that library.

✅ And that’s all!

To lazy load ads — we can use the same technique:

<script type="text/javascript">  
window.addEventListener('DOMContentLoaded', (event) => {  
    if (window.innerWidth<992){  
       /*your functions for big screen*/  
document.getElementById("widget_ad_mobile").addEventListener("lazybeforeunveil", function() {  
        var scriptAds = document.createElement('script');  
        scriptAds.onload = function () {  
                (adsbygoogle = window.adsbygoogle || []).push({});  
            };  
        scriptAds.src = '[https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'](https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js');  
        document.getElementById("widget_ad_mobile").appendChild(scriptAds);  
        });  
    }  
});  
</script>

In my case I use lazy ads loading only on mobile devices (window.innerWidth<992) for widget that are way below the fold (“widget_ad_mobile”).

After implementing chart and ads lazy load I got back to 90+ score and <3s load time on Google PageSpeed for mobile.

If you have any questions, or suggestions for improvement — please let me know in the comments.

Discussion (0)

Forem Open with the Forem app