Boost the Google PageSpeed of your Umbraco website - part 2/3

15 juni 2017  |  Mark Schenkel

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 explain how you optimize for speed use 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 page speed 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.

<staticContent>
...
<clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="1.00:00:00" />
...
</staticContent>

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.

<img src=”image.jpg?v=2”/>
Or just by changing the filename:
<img src=”image_v2.jpg”/>

Enable GZIP compression for specific file types

Google PageSpeed Insights suggestion: Enable compression

Changes are your Umbraco website is running on IIS. This means you get GZIP compression for request to static assets such as Javascript and CSS files out-of-the-box, which is great.

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" />

with

<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 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 as to be request at least twice during a period of 10 seconds in order to be compressed by IIS. You can influence this setting though by changing the staticCompressionIgnoreHitFrequency setting.

https://weblog.west-wind.com/posts/2011/May/05/Builtin-GZipDeflate-Compression-on-IIS-7x

 

Combining multiple Google Fonts in one request

Google PageSpeed Insights suggestion: Eliminate render-blocking JavaScript and CSS in above-the-fold content

Your site might use different fonts or weight-variations of the same font.

For example:

<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.

Gerelateerde blogs

Geinteresseerd geraakt? neem contact op