Performance tuning your Umbraco site Part 1

Site performance is always a critical factor when building a new web project. Site speed has, for a long time, been a critical ranking factor for Google. So how do you go about tuning performance of an Umbraco site? In this series of blog posts we look at different ways of optimising Umbraco site performance.

Image optimisation

Many sites fail to effectively use images.  Fat bloaty images that are resized on the fly by the browser or which haven’t been properly compressed, can slow down individual page load times, and also put unnecessary strain on servers and bandwidth costs.

Always make sure that the site uses images that are big enough and no bigger than where they’re going to be used.  Image cropping and resizing can be done in Umbraco views, partial views and macros using Image Processor which shipped with Umbraco 7.1 alongside the built in Umbraco 7 Image Cropper datatype.  There’s some great info about this on 24Days.in site.

Image optimisation can be taken one step further using a tool like Kraken.io which optimises and compresses images without a visible loss of quality. There is also a useful Kraken.io package for Umbraco which will process all the images on your site at the time the plugin is installed and queue these for optimisation, and then will automatically compress files added to the Umbraco Media Library.

Optimise your CSS and JavaScript

The ClientDependency framework is an open source .NET project aimed at optimising CSS and JavaScript dependencies in your site.

The framework allows you to develop your CSS and Javascript in Visual Studio in separate files, following your own design patterns. When you markup your views with CSS and JS rather than using the <style/> or <script/> elements, you instead call a method provided by CDF @RequireCss()/@RequireJs where you then pass the file path to your resource.

Over time you build up multiple @RequireCss()/@RequireJs method calls throughout your web application. The magic of CDF is when you call the @RenderCssHere() method. CDF goes through and bundles your CSS that you referenced using the Require methods into one CSS file which it then minifies. The same is true for JS. For example you could have a site with 15 CSS files and 15 JS files. Using CDF you can consolidate those into a single file for CSS and JS both of which are minified. Awesome.

CDF is even clever enough to know when you’re debugging your web app to keep your CSS and JS in separate files, unminified to let you debug your application.

Understand the performance of a page using MiniProfiler

Umbraco introduced the MiniProfiler project in version 6.1 to enable developers to see the trace times for their page. It gives overall page speed but it can drill deeper and inform developers of the views and partial views that took the longest to load. It can also tell the developer how many times the page load hit the database, the query that was executed and the duration of the query.

Implement caching in Umbraco.

Back in the day caching was pretty simple, switch on Macro caching. Thats still relevant if you’re using Razor macros or Partial View Macros.

But you can still cache Partials by using @Html.CachedPartial(“MyPartialName”, new MyModel(), 3600) where 3600 is the caching duration seconds.

Similar to the functionality in Umbraco 4 for marcos you can cacheByPage and cacheByMember as part of the CachedPartial method call. Default values are set to false.