Post-Mortem: Applied Image Optimization
Tags: images, performance, webperf, frontend
Published: 2020-02-14 22:56:15

---
title: Post-Mortem: Applied Image Optimization
published: true
date: 2016-12-07 18:11:00 UTC
tags: images,performance,webperf,frontend
canonical_url: https://nystudio107.com/blog/image-optimization-project-results
---

Published: <time datetime="Wed, 07 Dec 2016 13:11:00 -0500">2016.12.07</time> / Updated: <time datetime="Sun, 19 Jan 2020 10:58:15 -0500">2020.01.19</time>

# Post-Mortem: Applied Image Optimization

### This project post-mortem shows the results of apply­ing image opti­miza­tion strate­gies to speed up the load­ing of a website

Andrew Welch / [nystudio107](https://nystudio107.com)

![Postmortem](https://nystudio107-ems2qegf7x6qiqq.netdna-ssl.com/img/blog/_1200x675_crop_center-center_82_line/postmortem.jpg)

While I think the­o­ry is use­ful, often the most com­pelling thing you can do is look at a real-world exam­ple to see how applied best-prac­tices pay off. So here’s an exam­ple from a project where I was called in to help opti­mize the page speed loading.

We were specif­i­cal­ly tar­get­ing the low-hang­ing fruit of opti­miz­ing the images on the web­site, because they were by far the biggest gain we’d achieve. Bang for the buck, so to speak. The tech­niques applied were large­ly those described in the [Cre­at­ing Opti­mized Images in Craft CMS](https://dev.to/gaijinity/creating-optimized-images-in-craft-cms-2hc5-temp-slug-2354251) article.

We’ll be using the [Web​PageTest​.org](https://www.webpagetest.org/) per­for­mance bench­mark­ing web­site. If you’re not famil­iar with it, **get famil­iar**! It’s a fan­tas­tic tool for see­ing exact­ly how a web­site loads in-brows­er. You even get to pick the loca­tion, con­nec­tion speed, and brows­er for each analysis.

So with­out fur­ther ado, here’s the web­site water­fall from before, and then after the image opti­miza­tion work (get ready to scroll, because it’s a big one). Before opti­miza­tion is on the left, after opti­miza­tion is on the right:

![Imageoptim Waterfall Comparison Fixed](https://nystudio107-ems2qegf7x6qiqq.netdna-ssl.com/img/blog/_1200x2217_crop_center-center_100_line/imageoptim_waterfall_comparison_fixed.png)

With­out even look­ing at the details, you can visu­al­ly see that the dif­fer­ence is mas­sive. We went from a <kbd>107.8s</kbd> load time to a <kbd>2.8s</kbd> load time. What kind of sor­cery is this?

Well, it’s not mag­ic. The page has a many images on it, there’s no get­ting around that. But instead of load­ing all of the images at once, we use [lazy­sizes](https://github.com/aFarkas/lazysizes) to load the _below the fold_ images lazi­ly. That results in the ini­tial page load being nice and responsive!

Because the web­site is run­ning <kbd>http2</kbd> (cour­tesy of [Server­Pi­lot](https://serverpilot.io/)) this makes even more of a dif­fer­ence: all of those images are not con­tend­ing with the stream band­width to down­load at once, and they make use of the per­sis­tent TCP con­nec­tion from <kbd>http2</kbd> to load the images lazi­ly as peo­ple scroll down.

We also fol­lowed the max­im from the [Cre­at­ing Opti­mized Images in Craft CMS](https://dev.to/gaijinity/creating-optimized-images-in-craft-cms-2hc5-temp-slug-2354251) arti­cle, and no longer dis­play any client-uploaded images. Instead, we con­vert the images to a sane respon­sive sizes via [Imager](https://github.com/aelvan/Imager-Craft), opti­mize the images serv­er-side, and con­vert them into pro­gres­sive JPEGs opti­mized for the web.

This means that when the images do load, they are opti­mized for the device view­ing the web­page, and they are as small as pos­si­ble in terms of file size, so they load quickly.

We went from a Start Ren­der time of <kbd>29.8s</kbd> down to just <kbd>1.4s</kbd>, and we went from Visu­al­ly Com­plete time of <kbd>35.5s</kbd> down to just <kbd>1.7s</kbd>. _Wow._

![Celebrate Fireworks](https://nystudio107-ems2qegf7x6qiqq.netdna-ssl.com/img/blog/_1200x675_crop_center-center_82_line/celebrate_fireworks.jpg)

_Tan­gent:_ Astute read­ers will note the <kbd>F</kbd> for ​“Cache Sta­t­ic Con­tent” on the after water­fall; this is just because it’s on a stag­ing server.

<aside>
                                Again, it’s not mag­ic. It’s just opti­miz­ing the images you dis­play, as well as how and when you load them.
                            </aside>

Obvi­ous­ly, this is an extreme exam­ple, but it is a real-world project. These things real­ly do make a qual­i­ta­tive dif­fer­ence, so [go forth and opti­mize](https://dev.to/gaijinity/creating-optimized-images-in-craft-cms-2hc5-temp-slug-2354251)!

## Further Reading

_If you want to be notified about new articles, follow [nystudio107](https://twitter.com/nystudio107) on Twitter._

<small>Copyright ©2020 nystudio107. Designed by nystudio107</small>