We did an assessment of the site using WebPageTest and PageSpeed Insights for a Moto G4 on a fast 3G connection. We use this low end device and connection combination to make performance issues more obvious and align our testing with how Google assesses site performance.
Initial measurements revealed a Largest Contentful Paint (LCP) of 14.8s, Document Complete after 43.7s and a Cumulative Layout Shift (CLS) of 1.011. While FID was only 24ms, all other metrics were way beyond the recommendations of the Google's Core Web Vitals.
Here some of our findings:
- There were three calls to external scripts that timed out and delayed everything else;
- There was no lazy loading implemented for any images or embeds;
- There was a video being loaded in the critical path, competing with more important items.
We implemented a lot of the optimisations described in this blog post and more. The most important changes were:
- Optimising images, including compression, responsiveness, aspect ratios, webp support and lazy loading;
- Combining of all icons into one SVG sprite;
- Lazy loading of external iframes and embeds, including YouTube videos, Trustpilot widgets and HubSpot forms;
- Optimising font loading, using
font-display: swap;and fontfaceobserver;
- Server-push of render-blocking resources;
- Optimising Silverstripe Partial Caching.
These changes have resulted in major improvements of almost every metric:
While we were able to improve most of the onsite issues, the external tags and tracking scripts are still in place and will be reviewed by the client over the coming weeks. Once that's completed, Total Blocking Time should also see some improvements: We did some testing blocking all tracking scripts, which brought TBT down to 1.7s and Document Complete to 6.7s.
So while there is still some potential, we now have Document Complete at about 15s. Before the improvements, the site just started rendering at 15s.