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.

Comments