blog.sallarp.com

Enabling gzip compression is an easy way to make your site load faster, but how do you go about doing so for your EPiServer site and why should you?

Gzip compression will reduce the size of a text file (such as html markup, css, js and files) up to some 90%. If your user is on a slow connection, reducing the size of data does make a difference. The number of users on “slow” connections are actually growing by every sold smart phone and mobile broadband connection. Here’s a real world example:

Gzip will typically compress a text file around 65-90%. In this example this example we reach an average compression of about 70% for the static content. A web page usually contains more CSS and JavaScript content than the size of the specific pages’ markup. Although, this is only true for the initial page the user visit, for subsequent page views the visitors’ browser has already cached the static content making page markup the biggest part of text content.

If you’re on a broadband connection, meaning 2mbit+ and not including wireless broadband, downloading the page (ignoring images) uncompressed will take less than 2 seconds. If you’re on a slower connection however, say, 0.2-0.5 mbit, it will take about 7-10 seconds. With compression enabled a mobile user with not optimal coverage (which seems more common than good coverage with Telia) you can save some 5 seconds which is significant if you’re that user. There’s another aspect to compression aswell. Say you run a large site with 100.000 unique visitors per day, by reducing at least the first page view by 330kb that reduce your daily traffic with a whopping 3,9Gb of data!

Compressing the markup will reduce the size for each request but because the markup is generally not very big the download time improvement will not be as significant. Compressing dynamic content will also use up more server resources for each page view. IIS will store/cache compressed static files on disk at first request so the impact of compressing static files is minimal.

Here’s an old but still very informative blog post by Yahoo on front end optimization.

Enabling compression of static content in IIS 6.0

First of all, compression need to be activated in IIS. There are a few guides for this already on the net but most of them tell you to manually edit the metabase xml file, while that is all well and dandy you could potentially break your IIS. The metabase file is like the registry for IIS, all IIS settings you find in IIS Manager are stored there. If you do edit manually, backup the metabase file first. If you want to play it safe (and I think you should), download the IIS resource kit tools which includes a metabase editor (IIS Metabase Explorer).

• Before you start, make some measurements to be able to compare the size reduction later. There are site that provide bandwidth analysis, one example is: http://www.pipeboost.com/. Other alternatives are Fiddler and FireBug (only Firefox).

• Enable Compression within IIS Manager
  • In IIS Manager, right click on “Web Sites” node and choose properties
  • “Service” Tab, check
    • “Compress static files”
  • You should set max size to make sure you don’t run out of space. IIS6 allows a max of 1024MB
  • The default location of compressed files is “%windir%\IIS Temporary Compressed Files”. If you decide to use a different folder make sure that the IIS_WPG group has full access to that folder.

•  Next step is to use the IIS Metabase Explorer,included in the IIS resource kit, to enable compression of our static files.
  • Expand the tree: LM -> W3SVC -> Filters -> Compression -> gzip
  • Make sure that HcDoStaticCompression is set to 1
  • Add the filetypes you want to compress, normally css and js to HcFileExtensions
  • Reset IIS (iisreset /noforce).

 You have now configured compression of static files in IIS!

But my files in EPiServer CMS 5 are not compressed!?

Yes, normally the steps above would have enbled compression for you. In previous versions of EPiServer this was enough. In CMS 5 however the EPiServer.Web.StaticFileHandler is registered in web.config to handle both .css and .js files. Because code is used to deliver the files and we configured static file compression only the files won’t be compressed. Removing the HttpHandlers will break EPiServer so that is not an option. The solution is to add locations to your web.config and remove the HttpHandlers for those directories. That way IIS will deliver the static files in those folders and EPiServer will still function. Another option would be to enable compression of dynamic files but even if you do I would still advice towards using static compression of your static files because of the cache function. Here’s an example of how to configure your javascript and css folder in web.config to enable static file compression.

<location path="javascript">
    <system.web>
        <httpHandlers>
            <remove path="*.js" verb="GET,HEAD" />
        </httpHandlers>
    </system.web>
</location>
<location path="styles">
    <system.web>
        <httpHandlers>
            <remove path="*.css" verb="GET,HEAD" />
        </httpHandlers>
    </system.web>
</location>

That’s it! Your static content will now be gzip’ed!

Related posts

• Fixing IE8 XForms support for EPiServer 4.x
• Svenskfast is first, AGAIN! This time it’s NET TV
• Installing EPiServer 4.61 is a PITA
• EPiServer CMS R2 SP1 and file caching