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.
Top comments (0)