Delay Loading Google Auto Ads
Recently I found that the Google auto ads significantly slows down the page loading speed. There are also many discussions about this. As a static website, fast loading speed is crutial. In this post, we will optimize the PageSpeed Insights score by delay loading auto ads.
First, let's check the current PSI score in mobile:
It seems that the Reduce unused JavaScript
section has
many items to be improved. Check the official Google auto ads
script:
<script data-ad-client="ca-pub-000xxx" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Although the script is async
, the page loading speed is
affected. Changing async
to defer
makes no
difference:
https://stackoverflow.com/questions/10808109/script-tag-async-defer
Loading Ads after Page Loaded
Refer to: # How to Setup Lazy Load for Google AdSense Ad units?
Wrap the ads loading into a function and load ads after page onload event is triggered:
<script>
function func() {
...
}
if (window.addEventListener)
window.addEventListener("load", func, false);
else if (window.attachEvent)
window.attachEvent("onload", func);
else window.onload = func;
</script>
Then the original script is rewritten like this:
<script type="text/javascript">
function downloadJsAtOnload() {
var element = document.createElement("script");
element.setAttribute("data-ad-client", "ca-pub-000xxx");
element.async = true;
element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
document.body.appendChild(element);
};
if (window.addEventListener)
window.addEventListener("load", downloadJsAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJsAtOnload);
else window.onload = downloadJsAtOnload;
</script>
Unfortunately, the above script still not works. The PSI score is still very poor ( < 50).
Delay Loading Auto Ads
Let's do it a little bit aggresive, loading the ads after 5s by
setTimeout()
:
<script>
setTimeout(function(){
...
}, 5000);
</script>
The final implementation (remember to replace
data-ad-client
to your own id):
<script type="text/javascript">
function downloadJsAtOnload() {
setTimeout(function downloadJs() {
var element = document.createElement("script");
element.setAttribute("data-ad-client", "ca-pub-000xxx");
element.async = true;
element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
document.body.appendChild(element);
}, 5000);
};
if (window.addEventListener)
window.addEventListener("load", downloadJsAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJsAtOnload);
else window.onload = downloadJsAtOnload;
</script>
Now it works!