Building a High-Performance Website with Umbraco: Best Practices and Techniques

There is no doubt about the fact that designing and building a beautiful website is important. But apart from that, having a high-performance website that consistently works well is even more essential. So, in this post, we will discuss the top seven tips that will help you increase your website's performance using Umbraco's best practices. Have a look!

• Umbraco CMS: A Quick Overview
• Umbraco Best Practices: Tips to Build Large & High-performance Website
1. Tip 1: Establish a Baseline during the Development
2. Tip 2: Use Umbraco Relations
3. Tip 3: Website Monitoring in Production
4. Tip 4: Leverage Browser Caching
5. Tip 5: Use Extension Methods
6. Tip 6: Load Testing with k6
7. Tip 7: Enable File Compression
• Conclusion

Umbraco CMS: A Quick Overview

Umbraco is an open-source content management system created in 2005 by Niels Hartvig. It is written in C# and built on Microsoft's .Net framework. It is developed by a persistent global community and maintained by an expert team at Umbraco HQ, the company behind the CMS (Content Management Systems). Also, you will be surprised to know that there are 7,00,000 active installs and more than 1200 free packages available for users.

If you are using Umbraco, you will get the freedom to build websites and applications exactly the way you want. Umbraco is a flexible and editor-friendly platform that allows you to structure your project based on your requirements. It also offers you a built-in configuration to manage multilingual content. If you change your mind, you can abolish to an earlier version using an infinite undo button.

Umbraco Best Practices: Tips to Build Large & High-performance Website

Tip 1: Establish a Baseline during the Development

Performance becomes a critical factor when building a website, whether small or large. To maintain exceptional performance in production, you need to run Lighthouse and PageSpeed Insights to specify a performance baseline, as perceived by Google and set up monitoring tools as well. You will only get reviews on individual page requests and not on performance in the real world, with multiple users interacting with the site differently.

For performance monitoring, load testing is one of the most important aspects, where you need to hire Umbraco developer or else hire a dedicated developer to simulate real-life user load to ensure sites meet clients' performance requirements.

Tip 2: Use Umbraco Relations

In case you have some websites hosted inside a single instance of Umbraco, keep a few between different web pages. These will be the same websites for different regions, languages, or both. So, if the client tends to switch from the Russian to the English page, they remain on the same page but in a different language. You can easily achieve this using Umbraco relations.

For instance, if you want to copy one Umbraco node, you can keep the relation to a source code using an option at the bottom of the dialog. If you check the node value, you are copying the value, but Umbraco can hold and remember the value from which node it was copied. It copies the node and saves its Id values in a single table in the Umbraco database. Here an API wraps this functionality, so you are not required to read raw data inside the database.

You can use this code to get a related node in a target website if it does not find related content in the container node.

public static IPublishedContent GetRelatedContent(this IPublishedContent Content, IPublishedContent TargetWebsite)
        {
            IPublishedContent related = null;
            UmbracoHelper helper = new UmbracoHelper(UmbracoContext.Current);
            var allRelations = umbraco.cms.businesslogic.relation.Relation.GetRelations(Content.Id);
            if (allRelations != null && allRelations.Count() > 0)
            {
                var relations = allRelations.Where(r => !r.Child.IsTrashed && !r.Parent.IsTrashed).ToArray();
                if (Content.AncestorOrSelf(1).Id != TargetWebsite.Id)
                {
                    foreach (var rel in relations)
                    {
                        var child = helper.TypedContent(rel.Child.Id);
                        if (child != null && child.AncestorOrSelf(1).Id == TargetWebsite.Id)
                        {
                            related = child;
                        }
                    }
                    if (related == null)
                    {
                        foreach (var rel in relations)
                        {
                            var parent = helper.TypedContent(rel.Parent.Id);
                            if (parent != null && parent.AncestorOrSelf(1).Id == TargetWebsite.Id)
                            {
                                related = parent;
                            }
                        }
                    }
                }
                else
                {
                    related = helper.TypedContent(relations.First().Parent.Id);
                }
            }
            if (related == null)
            {
                related = TargetWebsite;
            }
            return related;
        }

Tip 3: Website Monitoring in Production

During production, we recommend using Uptime Robot to monitor website uptime which creates a support ticket, alerting us whenever the website performs poorly or is down. For the sites that are hosted on the cloud, use Application Insights on Azure to monitor and CloudWatch Alarms on AWS to alert the support team when resource thresholds exceed or fail to check the instance status.

As mentioned earlier, performance is one of the most critical factors to consider while creating a website. For some clients, following an approach to high-performance website development is at the forefront of their project requirements. In contrast, it only becomes prominent for other clients when the site fails to meet their unstated expectations. So, follow a practice to perform testing during development and monitoring during production to meet your site's requirements.

Tip 4: Leverage Browser Caching

A request is sent to the website's server when a user visits the website and tries to access resources such as page content, images, videos, and other assets that a webpage renders. If it takes longer to render the website when a user tries to access it, it may lead to a bad user experience. So, to overcome this problem, search engines recommend leveraging browser caching as it helps to speed up load times and alert the user's browser to what resources they have accessed before to remember them to speed up web page rendering.

Tip 5: Use Extension Methods

To eliminate exceptions, you must manage a bunch of cases that might occur during content population from content managers. They usually know little about the web and how it works. So, prepare yourself for the most illogical things while entering the content because checking reading properties takes a lot of time, and various conditions might arise. These conditions may occur frequently, so we recommend using extension methods for fetching values from properties.

If you use this simple extension, you will get a string value from the property, so you are not required to repeatedly check whether the value is null. Try using extension methods to reduce the code size in your Razor and maintain the website.

public static string GetPropertyValueAsString(this IPublishedContent page, string propertyName)
{
    string result = string.Empty;
    if (page.HasProperty(propertyName) && page.GetPropertyValue(propertyName) != null)
    {
                                result = page.GetPropertyValue(propertyName).ToString();
    }
    return result;
}

Tip 6: Load Testing with k6

You can use k6 for load testing, previously known as Load Impact. It allows you to perform tests defining the number of active users, time length, and pages and check what part of the world the user belongs to. For instance, you have an eCommerce site, so you should ensure that product catalogs and pages can handle high user load around product launches. For this, we suggest configuring tests that simulate high user load.

The test results are key performance indicators such as page response times, detailed statistics, and memory usage, giving us confidence that the site can meet its performance needs.

Tip 7: Enable File Compression

It is important to note that file compression is used for more than just images. Remember that your site and its pages consist of lines of code, so apart from rendering text and images on a page, check the layout of those images, text, and colors across the page. So, to configure the file compression for Umbraco, use Microsoft's built-in web. optimization package. Also, you can use a variety of resources provided by Google to speed up your website.

Conclusion

Building a high-performance website is a challenging task. So before starting your development journey, consider performance at an initial stage instead of having to make fixes in the future. Many software giants who have already embraced the capabilities of Umbraco are still willing to continue their journey with Umbraco CMS. Also, many top websites are built with Umbraco, such as Asda Money, The Council of the European Union, Westminster Abbey, and so on. So, you, too, are willing to unlock the possibilities of Umbraco. In that case, you can hire freelance Umbraco developer from The One Technologies to deliver desired outcomes and strengthen your development process.