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.
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:
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.
section.io’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