October 14 2014

Leverage browser caching and add expires headers for Azure hosted WordPress

After a recent move to Azure, I was doing some performance testing for this blog via gtmetrix.com.  My reports were suggesting to ‘leverage browser caching’ and ‘add expires headers’ to improve my performance gradings.

Capture-expires-header

Capture11

This is usually straight forward to implement; it is simply a few lines added to the sites .htaccess file – either manually or by one of the many WordPress plugins that will update it for you:

Capture21

 

Even after this was implemented, I noticed that it wasn’t making any difference to my performance reports – which got me thinking about Azure and that it would be running IIS in the backend and not Apache – and of course IIS doesn’t use the .htaccess file, it uses web.config instead.

After reading a few articles about translating .htaccess content to web.config, I was ready to go.  Using FTP, I edited the web.config file in my root directory and added the following lines:

<configuration>
<system.webServer>
<staticContent>
<clientCache cacheControlMaxAge="28.00:00:00" cacheControlMode="UseMaxAge"/>
</staticContent>
<caching>
<profiles>
<add extension=".php" policy="CacheForTimePeriod" kernelCachePolicy="CacheForTimePeriod" duration="00:01:00:00" />
<add extension=".ttf" policy="CacheForTimePeriod" kernelCachePolicy="CacheForTimePeriod" duration="28:00:00:00" />
<add extension=".gif" policy="CacheForTimePeriod" kernelCachePolicy="CacheForTimePeriod" duration="28:00:00:00" />
<add extension=".jpg" policy="CacheForTimePeriod" kernelCachePolicy="CacheForTimePeriod" duration="28:00:00:00" />
<add extension=".png" policy="CacheForTimePeriod" kernelCachePolicy="CacheForTimePeriod" duration="28:00:00:00" />
<add extension=".js" policy="CacheForTimePeriod" kernelCachePolicy="CacheForTimePeriod" duration="28:00:00:00" />
<add extension=".css" policy="CacheForTimePeriod" kernelCachePolicy="CacheForTimePeriod" duration="28:00:00:00" />
</profiles>
</caching>
</system.webServer>
</configuration>

The configuration forces files to be cached on the client side for 28 days and 28 days on the server side except for .php files, which is only 1 hour.  I re-ran the performance grading reports and received a much better score!

Useful links:

 



----------------------------------------------------------------------------
I use a maximum of one Google Ad per post to help offset some of my blog hosting costs.

----------------------------------------------------------------------------


Tags: , , , , , , , , ,

Posted October 14, 2014 by danovich in category "Geek

2 COMMENTS :

  1. By Håvard Løkken on

    I think you’re somewhat wrong on this. I think <clientCache… configures cache in the browser and <profiles.. configures cache on the server. Duration on the server is in format hh:mm:ss.

    Reply

Leave a Reply