Boost the Google pagespeed of your Umbraco website - part 2/3
This is the second part of a three part series on how to boost the page speed of your Umbraco website. In this part we will be explaining on how you optimize the loading time on your Umbraco website. In this blog we will discuss a couple of simple settings and tweaks in your config files and in your HTML. This is not hard-core programming, just some simple quick-fixes that will boost your page speed! The low-hanging fruits.
In this article I explain what you need to do to achieve the following:
- Enable browser caching
- Enable GZIP compression for specific file-types
- Combining multiple Google Fonts in one request
Enable browser caching
Google PageSpeed Insights suggestion: Leverage browser caching
One of the most simple settings to improve pagespeed for your Umbraco site (at least for the second time a user opens a page on your site) is to enable browser caching in IIS. To activate this setting you open the website in IIS and select HTTP Response Headers. On the right site of the window you will find an action called Set Common Header. Open this and switch on Expire Web content and select a designated time at the After option. In this example we set it to 31 days.
You can also add the following snippet into web.config to enable browser caching within the static content section.
<clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="1.00:00:00" />
Notes, hints and caveats
Upon changing cached resources, don’t forget to invalidate the cache by fingerprinting the used resources, for example by adding a query string parameter.
Or just by changing the filename:
Enable GZIP compression for specific file types
Google PageSpeed Insights suggestion: Enable compression
There are some file types though, that are not seen by IIS as static by default and hence are not compressed. An example of this is the SVG file format. You need to configure IIS in such a way that it tells IIS to treat a SVG file like a static asset. This can be done server-wide by making a change to your “applicationHost.config” file.
This StackOverflow post describes exactly how to do this.
Notes, hints and caveats
Specify on a per site basis
If you don’t feel comfortable applying this setting at once for all sites in your IIS, you can also specify it per site. Since by default, this is not allowed in IIS, you need to change
<section name="httpCompression" allowDefinition="AppHostOnly" overrideModeDefault="Deny" />
<section name="httpCompression" overrideModeDefault="Allow" />
In the file applicationHost.config file in: C:\Windows\System32\inetsrv\config
Assets might not be compressed at first request
There are some settings (look here) that influence IIS in when to compress a specific file. Basically, it means that by default not every file is compressed on first request; a file has to be requested at least twice during a period of 10 seconds in order to be compressed by IIS. You can influence this setting by changing the staticCompressionIgnoreHitFrequency setting.
Combining multiple Google Fonts in one request
Your site might use different fonts or weight-variations of the same font.
<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Ubuntu:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
You can combine these into one request by adding each font seperated by a pipe-sign.
<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700|Ubuntu:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
In the next and last part of this series we will describe how you can optimize the compression for the images used in your Umbraco site.