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.

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

with

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.

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:

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.

Meer weten?
Neem contact op met Mark.

Mark schenkel
Front end developer
[email protected]