Boost the Google pagespeed of your Umbraco website - part 3/3
This is the last part of a three part series on how to optimize your Umbraco website for page loading speed.
- In part 1, we describe how to improve speed by bundling assets
- In part 2, we describe how you can set for speed by some simple settings and configurations
This blog is all about the speed improvements you can get by compressing images.
Reduce file size of images in your Umbraco website
Google PageSpeed Insights suggestion: Optimize images
Another hint that the Google PageSpeed optimizer might give you, it to reduce the size of image files. To implement this suggestion, we differentiate between two types of images:
- Static images; such as the website logo and other non-content manageable visual assets
- Dynamic images; images that are uploaded to the site using Umbraco by your content editors
Static images
As mentioned, these are the files that you, as the website developer, have control over. They are relatively static; you can do what you want with them before you publish them to the web. Hence, it is quite easy to compress those. On our Umbraco sites, we mostly use PNG files, since PNG uses a lossless compression mechanism. We use PNGGaunlet to compress the static images in our site. We found that PNGGauntlet uses a combination of different compression algorithms to squeeze out the last unused byte. Furthermore, it allows you to compress all files in a specific directory.
Dynamic images
Since you are using Umbraco to enable non-technical people to updates websites, it is not user friendly to require them to upload optimized images to the media section of Umbraco. Hence, we have to be a bit smarter.
First of all, make sure that if you don’t use the Umbraco build-in crop functionality, always resize the image to the needed resolution. You can do this by adding image width or height to the query string like so.
<img src=”image.png?width=240” >
This will cause the Umbraco build-in ImageProcessor to kick in, and resize the image (in this case to a width of 240px, while maintaining the aspect ratio). This will resize the image and thus filesize.
But of course, there is more. By default, ImageProcessor uses the default compression algorithms provided by the .NET stack. Unfortunately, this doesn't compress well when encoding images. Fortunately, this is recognized by the developer of ImageProcessor, who made a nice extension to image processor to improve the compression. This extension is called post processor and can be installed via NuGet:
Install-Package ImageProcessor.Web.PostProcessor
After installing the PostProcessor, we saw a significant reduction in file size.
Notes, hints and caveats
Post processor doesn’t always give optimal reduction of file size. Even after successfully installing the post processor and it is happily crushing your images, you will find that for some files, you still get hints from PageSpeed Insight about image compression. In our scenarios, these were mainly PNG images.
The reason behind this is that the recommendation by Insights is based on the best possible compression that could be achieved by the compression tool OptiPNG. Unfortunately, this tool is not included in Post Processor, because there is a long running issue with the virus scanner Windows Defender, seeing a false positive in the OptiPNG binary (see here, here , here and here). This meant that the developer of Post Processor had to switch to other compression programs that seem to be less optimal, also according to these comparisons of the PNG compression tools:
http://www.olegkikin.com/png_optimizers/
https://css-ig.net/png-test-corpus
Because of this you will sometimes find that the post processed image is bigger than the original, especially if the original image was already compressed.
Even though the compression might not be optimal, we will be seeing improvement in our PageSpeed rating after enabling post processor, so I would still recommend using it. An alternative solution might be to let a scheduled job run over all the images in the App_Data\cache (this is the folder where Image Processor stores its cached images) and to do the compression in a batch-fashioned way.
Update: as of May 2017, the creator of the ImageProcesor module implemenented another compression strategy in post processor, meaning the compression is now optimized for Google Page speed. Make sure you run version 1.2 or higher of the ImageProcessor.Web.Plugins.PostProcessor.dll file.
