Day 96: Web Performance

Considering how frustrated I get when a page is slow to load, I probably should have looked into the topic of Web Performance sooner.

Why is web performance important? Well firstly it's annoying and diminishes the user experience, and secondly it can affect your product sales.

How to Make a Site Load and Render Quickly

  1. Minfiy your JavaScript and CSS

    • When JS is written, we indent our code, have long descriptive variable names, and have comments. While this all improves readability, it makes our code file much larger. Minification removes all the extra "junk" and leaves just the working code.
  2. Transfer less data over the network

    • Use GZIP to compress text resources and SVGs.
  3. Decrease JPEG image dimensions and compress to 70-80% so decrease in image quality isn't noticeable.

  4. Use progressive JPEG images instead of non-progressive/baseline images, which start rendering with a smaller number of details and enhances during loading. This allows the user to roughly see what the image is.

  5. Specify fallback fonts (built-in fonts or generic font-family like serif) which can be loaded when the primary font can't be downloaded, or takes awhile to load.

  6. Use tools that will provide insights about web performance such as Google PageSpeed Insights.