Building Faster Sites
Macwright’s pages weigh 15kb, they load faster than google searches.
Sure, if you’re based in San Francisco and you go to your adult daycare—sorry, I mean startup office—with ultra high-speed broadband: that 90 kB baseline compressed output might not feel like a lot, but what about if you live in Saint Helena? At the time of writing, a gigabyte of data there costs around $41 USD. https://andy-bell.co.uk/speed-for-who/
https://dev.to/addyosmani/adaptive-serving-using-javascript-and-the-network-information-api-331p
Make fewer requests Combine CSS Combine JS Sprite small images Cache everything (no ETags?) Transmit fewer bytes Optimise Images Compress everything Send only what you need (responsive images?) Cache everything Reduce request latency Optimise the application Use asynchronous requests Put content close to the consumer Optimise headers Use the latest protocols Set an intelligent initial congestion window Prioritise critical content Inline critical CSS Inline critical images Inline critical JS Outline non-critical content Load images asynchronously Remove single points of failure Use async & defer Manage third-parties (tag management?) Re-consider tags
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. Pingdom https://speedvitals.com/ https://www.debugbear.com/test/website-speed https://app.swishjam.com/speed-test
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