In our quest to make our site loads as fast as possible and pleasing search engines in the process, we always take the time to carry out a comprehensive on-page optimisation and surgically identify web page issues that may be dragging the speed of your site.
Working on a variety of customer sites, I constantly get confronted with slow-loading sites that take ages to fully load. The easy culprits are non-optimised media files and a handful of static resources such as Javascript and CSS generated by both plugins and theme, inflating the total number of HTTP requests.
One crucial action a webmaster can do is to keep the total number of HTTP requests low, by:
- Combining or concatenating static resources like CSS and Javascript
- Minifying and inlining small scripts
- Lazy-loading images and iframes
- Optimising the delivery of third-party scripts and resources like live chats, Google Analytics, Google Tag Manager, Facebook Pixel, Remarketing Tags, web font files, etc.
The first three actions above can easily be done with robust caching plugins like WP Rocket. However, things can be a bit tricky when it comes to manipulating third-party scripts such as Google Analytics and Facebook Pixels.
Why third-party scripts are such a bummer
The trouble with third-party scripts like live chat add-ons or Google Analytics is that they’re all hosted elsewhere and there’s no way you can manipulate its headers and how they should render in a web browser. While these scripts normally are loaded asynchronously, these scripts pull additional external resources which can potentially impair user experience.
Site Speed Optimisation: Loading Third Party Scripts When Needed
We had this simple strategy that loads third-party Javascript when needed, which you might want to take inspiration from and implement on your own. This trick takes advantage of user interactions “scroll” and “mousemove” as triggers, telling the browser to only load those scripts if there’s a scroll or mousemove event.
Here’s an example implementation to demonstrate the idea:
The above script instructs the browser to load Health Engine script during scroll or mousemove, which gives us this nice, acceptable page speed performance:
Before optimisation, our customer has this standard embed:
<script type="text/javascript" src="//healthengine.com.au/webplugin/appointments.js" data-he-id="foo" data-he-button="true" data-he-img="HE_BOOKNOW_1.png" defer="true"></script>Looks tiny, right?
Well, as it turns out, that miniscule-looking Health Engine resource pulls additional 28 resources for each page load, as seen below:
That additional 16 Javascript, 6 CSS and font files, and 6 images can easily delay the page load time and overall user experience.
Using scroll and mousemove to load third-party scripts
The scroll event works reliably on desktop while mousemove is used as fallback for mobile and tablets, giving us the confidence that third-party scripts will work just fine to humans who interact the site. Be sure you do plenty of tests before finally rolling this method out to production sites.
Need help improving your site’s speed? Just get in touch.