After doing this for over 20+ years, and having seen a lot of fancy stuff come and go, my game in optimizing load times and rendering speed hasnt change that much.
If I was asked for the main contenders for improving loading times, in 2022, it still boils down primarly to the following ones:
- Images – too big in both dimension and file size, but also using the wrong file format (eg. PNG instead of JPEG for photos)
- Render-blocking scripts / CSS / embeds
- (No) Caching policy – whether that just means caching rules or actual pre-caching, eg. static HTML
- Requests – numbers of overall resource requests of the page
Other common factors nowadays:
- CDN – not using one, or not properly using it (also related with bad or missing caching policy)
- Massive HTML DOM structures – take much longer to parse and render; known also under the moniker “divitis” or just “HTML tag orgy”
- Media Queries – improper use of such, eg. missing, badly set breakpoints or missing optimization of the whole site towards these breakpoints
- Lazy-loading / picture / srcset – not using those techniques, but also not knowinng how to properly apply them; eg. lazy-loading can be used for ALL sources, not just images
- Icon fonts / Data URL – if you use an icon or small image everywhere across your site, why not instead rely on either icon fonts, which already supply these, and are loaded only once, or data URLs, which help in similar ways, if the image in question is on the smaller side (file size)?
This is just a quick notice – for now. I’m going to add detailed articles to several topics when I get some time to spare, and link to them from here, as soon as they are up 🙂