How to speed up Umbraco CMS performance (Ultimate Guide)

What to do with a slow Umbraco CMS website?

There is a lot of tutorials and resources about ways to optimize and speed up Umbraco CMS.

However, it can be confusing trying to find everything you need in one place.

Over many years of experience and hard lessons learned – I am going to share with you everything I know about boosting Umbraco CMS.

If you have anything to do with Umbraco CMS or Content Management Systems in general, you should find something useful in this post!

After going through Umbraco Health Check's best tips you should notice the following benefits:

• Better user experience
• Faster website speed & performance
• Reduced resources usage (CPU / Memory / IO)
• Elimination of unnecessary external requests
• Reduced network traffic
• Lower costs of maintenance
• Stable application without memory leaks

Why should you speed up the Umbraco CMS website?

Website speed is a hot topic these days.

In general, if your website isn’t fast enough - your business is losing money!

Simple as that.

Ok, speaking about numbers:

• 52% of people consider page load speed as a crucial element for building customer loyalty
• 47% of people want a page to load in 2 seconds or less
• 40% will leave your website if it takes longer than 3 seconds to load
• For every 100 millisecond increase in page load speed, Amazon’s revenue went up by 1%

How inefficient website can impact your business?

In most cases, a website is a primary channel in which a company connects with its customers and audience. Each downtime or other problem related to the site - means that your business is missing opportunities and losing lucrative leads.

Moreover, the list of consequences is very long – so let's pick some of the most important ones:

• Brand damage. The slow website looks non-professional and outdated and creates an overall negative user experience. In other words - users are pissed off and brand reputation is damaged.
• First impression. As we all know - the first impression is the most important. Initial page load time is crucial here.
• Website downtime can turn potential customers away and affect existing ones.
• Search engines rank. All top search engines (Google, Bing, Yahoo, AOL, Ask) like websites with fast-loading times and rank them higher than the slow ones. So, if you want to improve SERP - improving speed should be at the top of your backlog.
• Studies have shown that a site-loading speed of more than 2 seconds usually results in about 47 percent of visitors leaving the website. So, to keep about half of your website visitors - you should speed up your Umbraco website.
• Trust and security. Online buyers are the most impatient ones - they expect the page to load in split second. They want to place an order quickly and efficiently. That's why website problems are unacceptable and the entire order process must be simple and reliable. Customers must trust your platform because they leave money there. Be ready to make major improvements - so your business can be more profitable and make conversions.

Before optimization test current speed & performance

Nothing can replace the eye of an expert, but in the beginning, it is worth starting with online tools.

This way you will get a basic overview and you can spot obvious problems.

There are many platforms that can examine Umbraco's overall performance and provide some important metrics, I can recommend a few:

• PageSpeed Insights
• Web Page Test
• GTmetrix
• Pingdom Website Speed Test
• Google Chrome Audit / Google Lighthouse

Content/PublishedContent recommendations

• Use published content instead of Content service or direct database access
• Use the newest Umbraco build in API to query content, avoid obsolete methods
• Published content should be strongly typed and accessible through strongly typed properties
• All published content models should be placed in a dedicated folder that relates to the built-in model builder namespace, personally, I prefer folder names like [ContentModels]
• Property aliases should be derived automatically from the generated model
• Don't use "magic" strings. Each string alias should be replaced by strongly typed property names from generated models.
• Clean Recycle Bin once in a while to remove trash content
• Use Examine for searching content/media and other items if possible. If you're working with the Azure platform, you can replace Examine search with Azure Cognitive Search Service

Umbraco Maintenance

• Use the best and recommended plugins/extensions but use them carefully. You can have some issues while updating to the newer Umbraco version.
• Upgrade CMS Umbraco and related Components from time to time – each new version comes with new features, bug fixes, and a better user experience. Check the Umbraco Releases page - where you can compare the differences between versions and monitor breaking changes

Frontend improvements

• Use clean and minimal homepage design
• Ensure the website is Mobile Friendly and renders well on a variety of devices
• Images should be properly compressed and optimized.
• Speed up images by using next-gen formats like WebP. To get more insights into WebP setup, check How to enable WebP image format in Umbraco CMS.
• Use Filesystem provider for all media items to be in s3 - UmbracoFileSystemProviders.Azure is a great package to check
• Enable GZIP compression to reduce the transfer size
• Specify a Last-Modified or ETag header to enable cache validation
• Automatic compression should be enabled for all HTML sites code
• Upgrade TypeScript to the newest version.
• Take advantage of minification for HTML, CSS, javascript, WebMarkupMin is a great tool to reduce HTML, XHTML, and XML and remove whitespaces
• Bundle assets - CSS, HTML, JavaScript, consider splitting them into groups, it can be easily done with ClientDependency package or Microsoft.AspNet.Web.Optimization library.
• Set Proper and recommended by Google caching response headers for images
• Fix console Errors and bad requests
• Use Lazy Loading for Images, Videos, and external widgets like Disqus. One of the best plugins out there is jQuery Lazy
• Use a Content Delivery Network (CDN)
• Make ajax call asynchronous and cacheable
• Parsing HTML takes time, so reduce the number of DOM elements
• Don’t overkill the site with huge JavaScript – rendering can take some time and it can affect the user experience
• Eliminate render-blocking CSS & JS code
• Serve scaled & compressed images – check if images can be optimized in HTML or CSS
• Defer parsing JavaScript to reduce blocking of page rendering
• Leverage browser caching for the CSS, js cacheable resources
• Optimize the order of styles and scripts
• Remove unused code
• Ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript
• Specify image dimensions
• Avoid bad requests
• Avoid landing page redirects
• Enable Keep-Alive
• Put CSS in the document head
• Combine images using CSS sprites
• Avoid CSS @import
• Prefer asynchronous resources
• Specify a character set early
• Avoid a character set in the meta tag
• Specify a Vary: Accept-Encoding header

Backend improvements

• Set logger log level as high as possible – do not log everything. You should enable tracing only when discovering big issues. Remember to disable tracing on production websites.
• Use Examine for searching content, media, and users. Examine uses the Lucene index engine is recommended and it’s real fast.
• Avoid Hosting Videos on Your Own Site. Use external providers like Vimeo or Youtube
• Reduce the number of HTTP requests – (deserialization takes time & network traffic is expensive)
• Dispose unmanaged resources properly. Make sure that file streams, database connections, etc. are released. This is the most common mistake I see every time during code review - usually committed by novice programmers. In many cases, it causes memory leaks, increased memory usage, and overall instability of the application. Those issues can be hard to detect.
• Build an application in Release mode and make sure that debug=”true” flag is not set in web.config

Pick the right caching strategies

• Partial Views should be cached - use Cached Partial.
• Use Macro with caching.
• Proper headers decrease the number of total requests generated by users when loading a page multiple times.
• Consider distributed caching like Redis
• Use ASP.NET Output Caching
• Consider Donut Output Caching by DevTrends
• Consider Output Caching or web acceleration with the proxy server
• Enable GZIP Compression
• Configure ETags
• Add Expires or Cache-Control Header
• Consider using a read-only database as a caching layer

Keep your Umbraco database sharp

The database is often the bottleneck of the entire system.

• Use tools like – SQL Profiler to find bottlenecks and heavy queries, optimize them in the first place
• Perform regular database maintenance. Clean tables once in a while if possible and remove old unnecessary content versions.
• Create indexes for faster queries, but do it wisely
• Analyze index usefulness
• Check index fragmentation levels and rebuild them from time to time
• Consider tables data fragmentation for better indexing & faster queries
• Check for ghost transactions
• When the database is self-hosted, plan the appropriate amount of disk space. Avoid storing database files on a system partition
• The database server should be strong enough (resources like CPU, RAM, HDD)
• Choose the right disk storage - SSD disks can significantly improve your overall database performance
• Find any I/O bottlenecks and fix them

Optimize External integrations

• Use tools like Fiddler to identify inbound and outbound requests.
• Eliminate unnecessary requests
• Reduce external API calls and cache them when possible
• Identify data that rarely change and introduce caching

Use C# Language/ MVC / .NET Framework Best Practices

• Use best coding standards/formatting style
• The name of the solution and all projects should be related to the brand/project.
• Pick fast enough dependency resolver slow one can cause performance issues, you can find popular IOC frameworks comparison here: IoC Battle
• Too many solutions projects & dependencies could be overkill.
• Source code should be easy to expand and maintain
• Refactor the Code from time to time
• Make Code Reviews and use git-flow to ensure better code quality
• Apply proper Design Patterns
• Take advantage of CI/CD automation to deliver code changes efficiently

Choose a fast and reliable Umbraco hosting provider

Hosting can have a big impact on your overall Umbraco CMS website performance.

Picking the right one may be hard because there are many options.

Below I've listed some popular platforms:

• Azure Cloud - https://azure.microsoft.com
• Amazon Cloud - https://aws.amazon.com
• Umbraco cloud - https://umbraco.com/umbraco-cloud-pricing/
• eUKhost - https://www.eukhost.com/

While picking a specific platform, you should consider factors like:

• Uptime
• Pricing
• Configuration difficulty
• SSL Certificates
• Management panel usability
• Customer support & response time
• Overall Features list
• Processing power, RAM
• Storage type – SSD is preferred

I personally prefer Azure Web App with an Azure SQL database. It’s working great with media and blob storage. Besides, Microsoft offers proven support.

Final words

Once you implement the above tips, you should see a noticeable improvement in site speed and page load times.