What I Learned Working on Very Slow Pages
One of my recent projects at work was a rewrite/redesign for blog pages that averaged page speed indexes (indices?) in the 90000s. The upside is that I managed to accumulate a lot of helpful articles and resources on the topic of web performance. These links cover general tips and asset handling. I have other lengthy lists of bookmarks dealing specifically with optimizing CSS and JavaScript that I’ll try to sort through later.
General
Front-End Performance Checklist 2018
It’s likely this will be replaced by a 2019 checklist in the next few days but for the time being, it’s an extremely comprehensive guide to planning, improving, and maintaining your page performance.
Progressive Tooling
A handy, well-organized collection of third-party tools.
Using Preload and Prefetch in Your HTML to Load Assets
Fonts
In my case, we were too worried about the possibility of a flash of unstyled text to really optimize our fonts (*sigh*). If you have more leeway, these are good reads. Also, if you’re loading web fonts from a third-party (Cloud.typography, Typekit, etc.), always double check that you aren’t loading font weights that you never use!
A Comprehensive Guide To Font Loading Strategies
Web Font Optimization at NerdWallet
Images
lazysizes
I’ve been using this lightweight lazyloading plugin. It automatically handles dynamic content which has been really useful.
Responsive Images: If you’re just changing resolutions, use srcset.
Good introduction to using srcset for image sizing.
SVGOMG
Optimize everything! Even SVGs.