Op verzoek van (internationale) lezers is dit artikel vertaald in het Engels.
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:
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.
<staticContent>
...
<clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="1.00:00:00" />
...
</staticContent>
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”/>
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.
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
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.
https://weblog.west-wind.com/posts/2011/May/05/Builtin-GZipDeflate-Compression-on-IIS-7x
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.