3rd party JavaScripts can be great. Scripts such as conversion trackers like Google Analytics are great for the marketing team and management. There are scripts out there that conduct AB testing, such as Optimizely. Other scripts help users navigate the site such as auto complete input for search bars, or promoting pages via social networking like Facebook or Pinterest.
How do they affect performance?
All of these scripts add features to a site, but consider the performance impact of using these scripts. They are not free. At what point does the benefit of these scripts become outweighed by their negative impact on performance? We often see beautiful, feature rich sites bogged down by having too much of a good thing.
The image above shows a snippet from a WebPageTest of a site that is heavy on 3rd party JavaScripts. You can clearly see heavy CPU usage before page is fully loaded.
See this article about speed and its relationship with conversions. Does speed improve every website?
Some may think that using the async attribute is the answer but it only means that the script doesn’t block the browser from parsing the rest of the DOM. This doesn’t mean you have unlimited bandwidth or CPU cycles to load everything concurrently. So scripts will compete for available resources along with all other elements on the page.
What can be done?
For each script, consider the following:
- Is the script visible to the user or does it modify visible elements?
- If it is visible, is the script providing a function that is required at the beginning of page rendering?
If the script isn’t visible or has a feature which isn’t likely to be useful during early stages of page load, then it should be loaded after visible content. Doing so can significantly decrease page load times which in turn improves the user’s experience on the site.
Consider wrapping the script to be loaded once the page load event is triggered by the browser:
<script type="text/javascript">
(function(w){
function fix(){
var d = document, g = d.createElement("script");
g.type = "text/javascript";
g.src = "SCRIPT URL";
var s = d.getElementsByTagName("script")[0];
s.parentNode.insertBefore(g, s);
}
w.addEventListener ? w.addEventListener("load", fix, false) : w.attachEvent("onload", fix);
})(window);
</script>
Different scripts may require different ways to be deferred. But in most cases the payoff is well worth the effort.
The images above shows a WebPageTest of the same URL as previous after many scripts were deferred. We see a speed improvement of around 5.5 seconds to page load event. Note the shift in CPU usage to after page load.
Conclusion
You can have to benefits of 3rd party JavaScripts without impacting the overall experience of the website by your users. For best practise, defer scripts that do not impact visible content to load after visible elements.
Section’s platform can insert these optimisations on the fly as the HTML document passes through our platform. Contact us to find out about this feature and other ways we can improve the speed of your site
