Performance

This is a non-exhaustive list of resources related to improving the performance of your website. I periodically revisit this list, either to add new resources or to remove or replace outdated ones.

General

  • Why Our Website Is Faster Than Yours
    An article by De Voorhoede on how they designed their website for performance, describing some techniques on how to speed up a website.

  • Loading Third-Party JavaScript
    A handy guide by Google, explaining some performance and security concerns associated with loading third-party JavaScript and some ways to identify and solve or mitigate these issues.

Images

  • ImageOptim
    A fantastic little app for compressing images. Compresses all regular image formats, and supports both lossless and lossy compression.

  • imagemin
    If you’d rather minify images as part of your build step (I know I do), I recommend imagemin. There’s a CLI, a GUI and plugins for Webpack, Gulp and Grunt.

  • Using SVG as placeholders
    A great exploration of placeholders, and one type in particular: SVG placeholders. I believe these are currently the best placeholders one could have, and I’ll be implementing them on this website soon.

Fonts

  • Font Face Observer
    Tiny JavaScript utility that tells you when your webfonts are loaded. Allows you to show system fonts and automatically swap to your webfonts when they’re ready to avoid FOIT (Flash Of Invisible Text). The above link contains a few references to articles explaining how to implement it. In the near future, we will be able to deprecate this in favor of the new font-display CSS property.1

  • 23 Minutes Of Work For Better Font Loading
    Zach Leat describes how he significantly improved the loading time of webfonts on a website by applying a handful of different techniques. He also introduces glyphhanger, a nifty tool for automatically subsetting your fonts (see next item).

  • glyphhanger
    Utility to automatically subset fonts for serving on the web. It is very useful for reducing the size of your font files by automatically removing all the glyphs you’re not using.

  • Saving the internet 2000 terabytes a day: fixing Font Awesome’s fonts
    Less of a guide than the other articles on this list, but a very interesting read on how a few fairly simple steps could massively decrease the file size of Font Awesome, the most popular icon font online.

Progressive Web Apps

  • Progressive Web Apps
    Google’s own introduction to Progressive Web Apps (PWAs). If you’re interested in PWAs, this is a great start. Don’t forget to check out the checklist!

  • Awesome Progressive Web Apps
    A curated collection of Progressive Web Apps resources. For everything else you want to know/learn/discover about PWAs, this is the place to go.