Some Thoughts on Website Speed Optimization

Aesthetics are very important. However, on the web, they are secondary to speed. If you can't say something quickly, the beauty you've worked so hard to create is lost on the user.

Here is the approach I use to manage images for websites:

1. Load only images needed for the viewport
2. Optimize images well for the web
3. Use latest image formats where supported (Webp lets us display high-quality images with a relatively small weight. SVG should be used wherever it can. I think every logo on the web should be SVG.)

One of the simplest ways to make sure a mobile phone is managing image resolution well is to include the viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">

More info on viewport management

I am not happy with my current approach. I have found in practice that using the recommended <picture/> element in HTML with multiple image sizes/formats does not work well with lazy-loading images. I don't think there's a way to make this work with <picture/>. However, I'm overdue for another test of the srcset attribute on images. It's possible there is a way to use both the benefits of resolution switching and lazy-loading via srcset.

More info on responsive images

The typical causes of slowness of a website are:

1. Images
2. Inefficient embedded JavaScript
3. Un-minified JS and CSS
4. Poorly configured servers/DNS

Images often take up all our focus and we overlook the other equally important aspects of website speed optimization.