Adding a Cache-Control header for all static resources (e.g. images) loading from wordpress is a good practice for improving loading performance. This is also encouraged by google pagespeed Insight tools. While it sounds simple, I was surprised to see there are so many confusing references exist across the web for this. Majority of the references are about linux/apache based servers and there are very little references for IIS platform.
A lot of people talk about using cache plug-ins such as W3 Total Cache or WP Super Cache for this purpose. I have tried both and configured options to set cache-control header for media files. But surprisingly both plug-ins did not add any cache-control header as expected.
Since I had some knowledge about .NET platform I have decided to do some research on my own and figured out a simple trick for this which does not require any plugins.
All you need to do is add a <staticContent> element into your web.config file. This file is equivalent to .htaccess file in apache/linux servers and helps to configure applications hosted on IIS.
If you are already familiar with web.config file then you need to insert the following element under <system.webServer>.
<staticContent> <clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" /> </staticContent>
If you have no idea about what web.config means, then simply create a file named web.config at the root of your website and add the following contents into it.
<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <staticContent> <clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" /> </staticContent> </system.webServer> </configuration>
This code instructs the IIS to add cache-control header for the period of 1 year for all static resources. If you want to reduce the cache duration then modify the attribute cacheControlMaxAge as per your preference. This will add a cache-control header for all static resources for example jpg, gif, png, .zip files. But not for dynamic resources such as script files.
After adding/modifying this web.config file it might take up to 15-30 minutes for the actual changes to take place (not sure why), means the inclusion of actual cache-control headers into HTTP response.
How you can verify the changes:
- You can use the tools like google page insight tool for verifying the performance difference and look for the details within ‘Leverage Browser Caching’ section
- Alternatively, you can use the fiddler web debugger to verify the http response header for cache-control attribute
Did you find this post useful? Feel free to share your feedback in the comments area.
You can find more interesting posts from us on the posts index
If you are interested to be notified for the new posts from us, then you can make use of the subscribe option available on the right sidebar.
Help us to improve our search rating by recommending this post to Google using the button below