Andrew Welch

Andrew Welch · Post-Mortems · #craftcms #images #frontend

Making the web better one site at a time, with a focus on performance, usability & SEO

2016.12.07 · 5 min read ·

Post-Mortem: Applied Image Optimization

This project post-mortem shows the results of applying image optimization strategies to speed up the loading of a website

Postmortem

While I think theory is useful, often the most compelling thing you can do is look at a real-world example to see how applied best-practices pay off. So here’s an example from a project where I was called in to help optimize the page speed loading.

We were specifically targeting the low-hanging fruit of optimizing the images on the website, because they were by far the biggest gain we’d achieve. Bang for the buck, so to speak. The techniques applied were largely those described in the Creating Optimized Images in Craft CMS article.

We’ll be using the WebPageTest.org performance benchmarking website. If you’re not familiar with it, get familiar! It’s a fantastic tool for seeing exactly how a website loads in-browser. You even get to pick the location, connection speed, and browser for each analysis.

So without further ado, here’s the website waterfall from before, and then after the image optimization work (get ready to scroll, because it’s a big one). Before optimization is on the left, after optimization is on the right:

Imageoptim Waterfall Comparison Fixed

Before on the left, after on the right

Without even looking at the details, you can visually see that the difference is massive. We went from a 107.8s load time to a 2.8s load time. What kind of sorcery is this?

Well, it’s not magic. The page has a many images on it, there’s no getting around that. But instead of loading all of the images at once, we use lazysizes to load the below the fold images lazily. That results in the initial page load being nice and responsive!

Because the website is running http2 (courtesy of ServerPilot) this makes even more of a difference: all of those images are not contending with the stream bandwidth to download at once, and they make use of the persistent TCP connection from http2 to load the images lazily as people scroll down.

We also followed the maxim from the Creating Optimized Images in Craft CMS article, and no longer display any client-uploaded images. Instead, we convert the images to a sane responsive sizes via Imager, optimize the images server-side, and convert them into progressive JPEGs optimized for the web.

This means that when the images do load, they are optimized for the device viewing the webpage, and they are as small as possible in terms of file size, so they load quickly.

We went from a Start Render time of 29.8s down to just 1.4s, and we went from Visually Complete time of 35.5s down to just 1.7s.  Wow.

Celebrate Fireworks

Tangent: Astute readers will note the F for “Cache Static Content” on the after waterfall; this is just because it’s on a staging server.

Again, it’s not magic. It’s just optimizing the images you display, as well as how and when you load them.

Obviously, this is an extreme example, but it is a real-world project. These things really do make a qualitative difference, so go forth and optimize!

Tidal Wave Disaster

Insights · 2017.03.20

Mitigating Disaster via Website Backups

#backups #devops #craftcms

Web Host Server

Insights · 2017.03.09

How Agencies & Freelancers Should Do Web Hosting

#devops #hosting #vps

Critical Css Stopwatch

Insights · 2017.02.28

Implementing Critical CSS on your website

#critical-css #frontend #performance

Autocomplete Search

Insights · 2017.02.22

Autocomplete Search with the Element API & VueJS

#autocomplete #elementapi #vuejs

Structured Data

Insights · 2017.02.11

JSON-LD, Structured Data and Erotica

#json-ld #structured-data #SEO

Craft Cms 3 Beta

Reviews · 2017.02.09

Craft 3 Beta Executive Summary

#craftcms #Craft 3 #Review

No Robots

Insights · 2017.02.02

Preventing Google from Indexing Staging Sites

#frontend #craftcms #SEOmatic

Light Feather

Insights · 2017.01.24

LoadJS as a Lightweight JavaScript Loader

#loadjs #frontend #Javascript

The Matrix

Insights · 2017.01.16

Creating a Content Builder in Craft CMS

#frontend #matrix #craftcms

${ category } · ${ blog.postDate }

${ blog.title }

#${ tag }