Table of contents
Umbraco performance: Dealing with a slow CMS website?#
There are 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 will share everything I know about boosting Umbraco CMS.
If you have anything to do with Umbraco CMS or Content Management Systems, you should find something helpful 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 resource usage (CPU / Memory / IO)
- Elimination of unnecessary external requests
- Reduced network traffic
- Lower costs of maintenance
- Stable application without memory leaks
Why boosting Umbraco speed matters?#
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%
The business implications of an inefficient Umbraco website#
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 the brand's 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 nearly 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 a 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 significant improvements - so your business can be more profitable and drive conversions.
Measure your Umbraco site: Testing speed & performance first#
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.
Many platforms 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
Umbraco content strategies: Best practices#
- Use published content instead of Content service or direct database access
- Use the newest Umbraco build 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 in a folder related to the built-in model builder namespace. 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. Check out How to get Umbraco model property alias.
- Clean the 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.
Essential Umbraco maintenance tips#
- 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 occasionally – each new version has 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.
Umbraco frontend optimization techniques#
- Use a 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 site code
- Upgrade TypeScript to the newest version.
- Take advantage of minification for HTML, CSS, and 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 quickly done with ClientDependency package or Microsoft.AspNet.Web.Optimization library.
- Set Proper and recommended 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 calls 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 and 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
Advanced Umbraco backend enhancements#
- Set the 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, which is recommended, and it’s really 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 during code review - usually committed by novice programmers. It often causes memory leaks, increased memory usage, and overall application instability. 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
Umbraco caching: Choosing the best strategies#
- Partial Views should be cached - use Cached Partial.
- Use Macro with caching.
- Proper headers decrease the requests users generate 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 running smoothly#
The database is often the bottleneck of the entire system.
- Use tools like – SQL Profiler to find bottlenecks and heavy queries and optimize them in the first place.
- Perform regular database maintenance. Clean tables occasionally, 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. Check out How to rebuild all indexes in MS SQL server database
- Consider table 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 proper disk storage - SSD disks can significantly improve your overall database performance
- Find any I/O bottlenecks and fix them
Tweaking external integrations for Umbraco performance#
- 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
Best Umbraco coding practices: C#, MVC & .NET framework#
- Use the best coding standards/formatting style
- The name of the solution and all projects should be related to the brand/project.
- Pick a fast enough dependency resolver; a 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
Select the optimal Umbraco hosting provider for speed#
Hosting can have a significant impact on your overall Umbraco CMS website performance.
Picking the right one may be challenging 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 prefer the Azure Web App with an Azure SQL database. It’s working great with media and blob storage. Besides, Microsoft offers proven support.
Concluding Thoughts on Umbraco Performance#
🌐 Umbraco, with its flexibility and robust features, can truly shine ✨ when optimized correctly.
🐢 Don't let a slow website hinder your potential.
🚀 Harness the full power of Umbraco by implementing our proven strategies.
❓ If you need personalized assistance or have further queries, contact us.
👩💻👨💻 Our team of Umbraco experts is ready to supercharge your Umbraco CMS!