In today's fast-paced digital world, performance is a critical factor in ensuring a seamless user experience, and as developers, we constantly seek tools that help us optimize and monitor the performance of our applications.

One such powerful tool is MiniProfiler, and when integrated with Xperience by Kentico, it offers invaluable insights into your application's performance.

In this article, we'll explore the benefits of this integration and how you can set it up to elevate your web development projects.

📟 What is MiniProfiler?

MiniProfiler is a simple but effective tool for profiling and monitoring the performance of your web applications. It provides detailed insights into the performance of your code, database queries, and HTTP requests, helping you identify bottlenecks and optimize your application's performance.

I've personally been using it for over a decade, and I find myself coming back to it again-and-again because:

1. It's just so easy to set up and configure
2. It helps you identify the most evil thing that can slow down your application...SQL queries.

✅ Kentico has an integration for MiniProfiler

Kentico's dev team, working on the Xperience by Kentico product, were using MiniProfiler internally, so they decided to open-source the integration earlier this year so that developers, like us, can use it.

Thanks Kentico dev team 🙌

🔧 How do I integrate MiniProfiler into my Xperience by Kentico web application?

1. Install the Kentico.Xperience.MiniProfiler nuget package into your XbyK project.

2. Open your Program.cs file and add the following code:
   

using Kentico.Xperience.MiniProfiler;

...

builder.Services.AddKentico(features =>
{
    // Kentico builder services configuration ...
});

...

var env = builder.Environment;

if (env.IsDevelopment())
{
    // After the call to builder.Services.AddKentico( ... );
    builder.Services.AddKenticoMiniProfiler();
}

...

var app = builder.Build();

app.UseKentico();

// After call to UseKentico()

if (env.IsDevelopment())
{
    app.UseMiniProfiler();
}

Underneath-the-hood, this code sets up and configures MiniProfiler's middleware, along with the script that needs adding to the HTML body
tag that renders the profiler UI when you load a page.

🏃 You're all set

Run your local website and you will see the profiler display its output in the top-left of the page.

What you are seeing here is, as MiniProfiler themselves put it:

MiniProfiler is generally setup as 1 profiler per “action” (e.g. an HTTP Request, or startup, or some job) of an application. Inside that profiler, there are steps. Inside steps, you can also have custom timings.

So, a list of profilers in the top-left of the screen is displayed. Click one to reveal a list of the steps that were executed as part of that profiler. Each step displays the total duration taken to execute the step.

If any SQL queries were executed as part of the step, then they are display as blue links. Click one and a modal popup displays the SQL query statements that were performed, which enables you to start thinking about how you might optimise your the code that creates the query. Great stuff 🙌

⏱️ Adding custom timing

This is where things get really interesting. A pretty common use case is that you might want to time a specific piece of code, and any resulting SQL queries executed as part of that code.

Say you have a widget and you want to check the duration of a call to a repository method from the widget's ViewComponent:

1. Add the MiniProfiler namespace in your using directives in the ViewComponent of your widget:

using StackExchange.Profiling;

2. Then wrap your code with MiniProfiler's Step extension method, giving the step a custom name:

IEnumerable<Coffee> products = Enumerable.Empty<Coffee>();

using (MiniProfiler.Current.Step("Custom: CoffeeRepository.GetCoffees()"))
{
    products = await repository.GetCoffees();
}

3. Now build and run the site again, navigate to a page that has that widget placed on it, expand the relevant profiler:

This is really powerful stuff as it enables you to measure the performance of your code, quickly and easily, then it's up to you to hone your code to increase performance.

⚠️ Ensuring you have caching disabled

In my example screenshot above, I'm performing these web page loads straight after having built my Dancing Goat sample project, so there won't be any cached data at this point. This means I will see all of the SQL calls profiled as they haven't been cached at this point.

Subsequent reloads of the same page will display reduced list of steps as the resultant data returned from SQL queries are cached by the system, and so the MiniProfiler UI won't show them all.

Kentico's Dancing Goat Xperience by Kentico sample site follows their best practice for data caching and output caching where the explicitly recommend disabling caching for pages when view in preview mode, so if your project has followed this approach, then you can always load the page in the preview tab when authoring the page in your website channel, and you'll see the MiniProfiler UI.

Alternatively, you might have architected your caching approach to utilise an app settings key to disabled/enable caching at a global level.

🚀 Conclusion

Integrating MiniProfiler with Xperience by Kentico is a powerful way to gain deep insights into the performance of your web applications. By following the steps outlined above, you can set up MiniProfiler and start optimizing your application's performance, ensuring a smooth and efficient user experience.

Reference

• Xperience by Kentico MiniProfiler project on GitHub
• MiniProfiler: How-To Profile Code