Products

Solutions

Learn More

Partners

Community

Blog

About

DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


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

      Web.Config OutBound Rule to Add ClientCache to Images

        <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


        Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see forge), an open source module for creating attractive content and DNN Apps.



        Read more posts by Daniel Mettler

        Comments

        There are currently no comments, be the first to post one.

        Comment Form

        Only registered users may post comments.

        NewsArchives


        2sic Daniel Mettler (133)
        Aderson Oliveira (15)
        Alec Whittington (11)
        Alex Shirley (10)
        Andrew Nurse (30)
        Anthony Glenwright (5)
        Antonio Chagoury (28)
        Ash Prasad (25)
        Ben Schmidt (1)
        Benjamin Hermann (25)
        Benoit Sarton (9)
        Beth Firebaugh (12)
        Bill Walker (36)
        Bob Kruger (5)
        Brian Dukes (2)
        Brice Snow (1)
        Bruce Chapman (20)
        Bryan Andrews (1)
        cathal connolly (55)
        Charles Nurse (163)
        Chris Hammond (203)
        Chris Paterra (55)
        Clinton Patterson (28)
        Cuong Dang (21)
        Daniel Bartholomew (2)
        Dave Buckner (2)
        David Poindexter (3)
        David Rodriguez (2)
        Doug Howell (11)
        Erik van Ballegoij (30)
        Ernst Peter Tamminga (74)
        Geoff Barlow (7)
        Gifford Watkins (3)
        Gilles Le Pigocher (3)
        Ian Robinson (7)
        Israel Martinez (17)
        Jan Blomquist (2)
        Jan Jonas (3)
        Jaspreet Bhatia (1)
        Jenni Merrifield (6)
        Joe Brinkman (270)
        John Mitchell (1)
        Jon Henning (14)
        Jonathan Sheely (4)
        Jordan Coopersmith (1)
        Joseph Craig (2)
        Kan Ma (1)
        Keivan Beigi (3)
        Ken Grierson (10)
        Kevin Schreiner (6)
        Leigh Pointer (31)
        Lorraine Young (60)
        Malik Khan (1)
        Matthias Schlomann (15)
        Mauricio Márquez (5)
        Michael Doxsey (7)
        Michael Tobisch (3)
        Michael Washington (202)
        Mike Horton (19)
        Mitchel Sellers (28)
        Nathan Rover (3)
        Navin V Nagiah (14)
        Néstor Sánchez (31)
        Nik Kalyani (14)
        Peter Donker (52)
        Philip Beadle (135)
        Philipp Becker (4)
        Richard Dumas (22)
        Robert J Collins (5)
        Roger Selwyn (8)
        Ruben Lopez (1)
        Ryan Martinez (1)
        Salar Golestanian (4)
        Sanjay Mehrotra (9)
        Scott McCulloch (1)
        Scott S (11)
        Scott Wilkinson (3)
        Scott Willhite (97)
        Sebastian Leupold (80)
        Shaun Walker (237)
        Shawn Mehaffie (17)
        Stefan Cullmann (12)
        Stefan Kamphuis (12)
        Steve Fabian (31)
        Timo Breumelhof (24)
        Tony Henrich (3)
        Torsten Weggen (2)
        Vicenç Masanas (27)
        Vincent Nguyen (3)
        Vitaly Kozadayev (6)
        Will Morgenweck (37)
        Will Strohl (164)
        William Severance (5)
        DNN Launch Webinar
        REGISTER NOW
        DNN Launch Webinar
        REGISTER NOW
        DNN Launch Webinar
        REGISTER NOW