Building Faster Sites

Meta

To start off with, here’s some rules of thumb.

• Static sites will load faster than ones that rely on Javascript-based data-fetching.
• An HTML file with local scripts and CSS will load faster than one that has links to external files. Which in turn is faster than adding in images, fonts and other media files.

Testing

You need to know what parts of your page need optimizing before you get started. This is where testing tools come in: they take in a webpage URL and generate a performance report for that particular page. I really like Yellow Lab Tools, but you can also use WebPageTest, GTMetrix, or Google’s PageSpeed Insights.

Images

Pop all your images into Squoosh and see how low you can get the size before quality starts to deteriorate visibly. Or use something like Kraken, if you don’t want to adjust the quality manually. As far as I can tell, using .webp files instead of regular JPEGs provides negligible benefits for most images. And the latter is almost universally supported.

CSS & JS files

Using Pre-fetch

Check out Paco’s site. You see how fast those page transitions are? They don’t even feel like page loads, but a local app. As far as I can tell, it’s because he uses Next.js’s component. The component, in turn, uses the pre-fetch attribute to load pages in the background. So when the user clicks on a link, they jump to a page that’s already been fetched.

Fonts

First, convert them to WOFF2, which makes them 30% smaller than WOFF, and more ~60% smaller their TTF or OpenType counterparts. You need to set up cache-headers for these. On Netlify, mine look like