Get Google PageSpeed points with a quick web.config setting

We've been investing some research into simple, effective performance improvements. One of our favorite is a powerfull 5-minute web.config patch to enhance caching, which works great both with and without CDNs like CloudFlare.

Get Points Within Seconds

As you can see from the following two examples, you quickly get some points without much effort: 

Desktop Performance +4 (drag marker)

Here you can compare the desktop-performance before/after the change on 2sxc.org. As you can see we went from 83 to 87 with a quick simple setting. 

Mobile Performance also +4

And below you see the mobile performance. Note that other optimizations are still missing, so the page is still not "green", but the change is dramatic. 

The points given by Google for this simple change are dramatic, but they are very important. It's actually quite common that customers today evaluate the quality of a site by such metrics - so we really want to shine on this. 

The Secret: Client Image Caching

What we're doing is no magic: we're just telling IIS that it should inform the browser (or the Firewall, the CDN, etc.) that the images we're using may be cached for 30 days. This is very important - and easy to do. Just add this block of code to your web.config, in the node

• rewrite > outboundRules

<rewrite>
  <outboundRules>
  <!-- 2sic modified: Add cache-control header for requests of type image (30 days) -->
      <rule name="Add cache-control header to image requests (30 days)">
        <match serverVariable="RESPONSE_Cache-Control" pattern=".*" />
        <conditions>
          <add input="{RESPONSE_STATUS}" pattern="^200" />
          <add input="{RESPONSE_CONTENT_TYPE}" pattern="^image/.+" />
        </conditions>
        <action type="Rewrite" value="max-age=2592000"/>
      </rule>
...
  </outboundRules>
...
</rewrite>

This snippet tells your IIS, that

1. whenever it sends something to the client 
2. it should check if the header says it's an image
3. if yes, it should update the header to tell the client it can cache it for 2592000 seconds

Combining With Image Resizers

We're using this on our websites together with the amazing ImageResizer (which is included in 2sxc) and it works perfectly. Note that the Image-Resizer also has a feature to set the expire date, but it only affects resized images (and not images delivered as stored on the server). That's why we prefer this one-size-fits-all solution. 

Combining with CDNs like CloudFlare

We've tested this extensively with CloudFlare and the effect is astounding. Not only does the load on your server drop dramatically, the delivery to the browser is amazingly fast because the images are all delivered from the CloudFlare network. You can check out a live demo on Gams 2016 which was a sports-event near us which uploaded hundreds of high-res images live during the event.

Pre-Requisities & Side-Effects

This setting only has an effect, if the IIS Rewrite Module has been installed. This is fairly common, but just fyi. 

There is a side-effect: if an editor manually replaces an image instead of uploading with a new name, there may be clients which get the old image for a while. Especially the content-editor will notice this, because she won't see the new file unless she clears her cache (if not using a CDN). For example if you're using CloudFlare, then the image will stay cached for 1-3 days. Since all our (2sic) users use ADAM (automatic digital asset manager) to drag-drop upload their images, this is handled automatically, as ADAM renames same-name files. 

So there are side effects, which don't occur if your editors work in the simplest manner possible, or which can be trained.  

TL;DR

This simple enhancement can give you PageSpeed points and enhance your overall site performance. You should really, really do this - but be aware of the side effects. 

Love from Switzerland,
Daniel