Performance analysis and revamp of css/js lazy loading

Objectives

Actions

Analysis using PageSpeed Insights and Lighthouse. Core Web Vitals. Pinpointing main bottlenecks and issues. Loading CSS as needed, rather than in one large file. Loading above the fold CSS inline. Optimisation of font loading. Loading JavaScript assets dynamically as needed rather than in one large file. Lazy loading images. Using webp images. Overall PageSpeed scores improved significantly, particularly on mobile.

Lessons learned

This project ended up being quite a bit larger than originally intended. Analysis of the website performance led to a number of discoveries, many of which had complex solutions.

One major problem was to get above the fold CSS to load early and quickly. The website had many thousands of pages, often with very different content and designs above the fold. I therefore had to carefully isolate the required CSS, often using different sets of CSS inline depending on page type.

JavaScript performance was improved by loading much of it dynamically, as soon as the relevant component on the page approached scrolling into view. Core JavaScript file size was reduced dramatically.

The biggest problem of all - and for which there was no ideal solution - was loading 3rd party marketing JavaScript. The impacted performance hugely. There was therefore a tension between user experience and page speed, and the needs of marketing to track users across the site and interact with them with chat widgets.