Profiling your nopCommerce website with MiniProfiler

Lavishkumar
Posted by in ASP.NET category on for Advance level | Points: 250 | Views : 10240 red flag
Rating: 4.5 out of 5  
 2 vote(s)

In this article we will learn about profiling your nopCommerce website with MiniProfiler. Out of the box, nopCommerce comes with MiniProfiler integration. So, in order to start using it, all we need to do is configure it correctly from the administration section. This out of the box integration is quite handy for many developers to see what is causing delay in loading pages.

Introduction

What is nopCommerce?

nopCommerce is an open-source e-Commerce solution based on ASP.NET MVC and MS SQL Server  backend database that contains both a catalog frontend and an administration tool backend. nopCommerce is one of the best e-Commerce software available in the market for free and any ASP.NET developer can download the full source code (available on GitHub) to customize the solution in any way.

 

What is MiniProfiler?

MiniProfiler is a simple but effective library available for profiling ASP.NET websites which help developers to monitor the performance of the web application. Any developer can easily improve the performance of a website by using MiniProfiler library that shows exactly how long it takes for a webpage to load, how long it takes for a SQL query to run and all the other actions that are being executed on a web page on run-time.

The MiniProfiler library is developed by the StackExchange team and it is available for free to download as GitHub: https://github.com/MiniProfiler/dotnet/releases

MiniProfiler is also as Nuget package. To install MiniProfiler, run the following command in the Package Manager Console:

PM> Install-Package MiniProfiler

You can integrate MiniProfiler with your ASP.NET application with at least one of the following packages available on nugget:



Steps to enable MiniProfiler in nopCommerce admin section

Out of the box, nopCommerce comes with MiniProfiler integration. So, in order to start using it, all we need to do is configure it correctly from the administration section. This out of the box integration is quite handy for many developers to see what is causing delay in loading pages.

To configure it, go to: Administration > Configuration > All Settings





Search for the setting “DisplayMiniProfilerInPublicStore”

 



Enable the setting by changing the value to “True” like this:




Overview of MiniProfiler code in nopCommerce

We can see the MiniProfiler integration in the code in Nop.Web/Global.asax.cs






Open Global.asax.cs and find this in the Application_Start()





We can also find the MiniProfiler code in Application_BeginRequest()



Finally in Application_EndRequest()





Demo of MiniProfiler on nopCommerce public store

Since, we have already enabled MiniProfiler in the administration section, if we run our website and view the public store, the profiler will be displayed on the left top corner of the browser windows with the loading time like this:





Now, if we try to click the profiler, we should be able to view the loading time for each process along with the loading time that is running on the homepage:





Customizing the MiniProfiler in nopCommerce

In this section, we will go over different ways of customizing the MiniProfiler in nopCommerce.


·        How to display Miniprofiler only for admin role

MiniProfile is a very useful tool for store admins and developers in order to keep a track of loading time of different pages and improve the performance in terms of loading time so that pages on the store site loads faster for online shoppers. Many store owner might want to take advantage of MiniProfiler in nopCommerce but may not want customers to see the loading time on the public store. In that case, we will have to make some customization in the source code so that online “admin” can view the loading time (if admin is logged in).

Go to: Nop.Web/Views/Shared/_Root.Head.cshtml





Now, open the file “_Root.Head.cshtml” and find this code:

@if (displayMiniProfiler)
    {
        @StackExchange.Profiling.MiniProfiler.RenderIncludes()

    }


Change it to this:

@if (displayMiniProfiler && isAdmin)
    {
        @StackExchange.Profiling.MiniProfiler.RenderIncludes()

    }


Also, add this code at the top:

@using Nop.Core;
@using Nop.Core.Domain.Customers;

And

IWorkContext _workContext = EngineContext.Current.Resolve();

    var isAdmin = _workContext.CurrentCustomer.IsAdmin();


Here is the complete customized code:

@using Nop.Core.Domain.Common;
@using Nop.Core.Infrastructure;
@using Nop.Core;
@using Nop.Core.Domain.Customers;
@{
    var displayMiniProfiler = EngineContext.Current.Resolve().DisplayMiniProfilerInPublicStore;
 
    Html.AppendScriptParts("~/Scripts/public.ajaxcart.js");
    Html.AppendScriptParts("~/Scripts/public.common.js");
    Html.AppendScriptParts("~/Scripts/jquery-migrate-1.2.1.min.js");
    Html.AppendScriptParts("~/Scripts/jquery-ui-1.10.3.custom.min.js");
    Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
    Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
    Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js");
 
    //X-UA-Compatible tag
    var commonSettings = EngineContext.Current.Resolve();
    if (commonSettings.RenderXuaCompatible)
    {
        Html.AppendHeadCustomParts(string.Format("", commonSettings.XuaCompatibleValue));
    }
 
    IWorkContext _workContext = EngineContext.Current.Resolve();
    var isAdmin = _workContext.CurrentCustomer.IsAdmin();
 
}



    @Html.NopTitle(true)
    
    
    
    
    
    @Html.NopHeadCustom()
    @*This is used so that themes can inject content into the header*@
    @Html.Partial("Head")
    @Html.Widget("head_html_tag")
    @Html.NopCssFiles(this.Url, ResourceLocation.Head)
    @Html.NopScripts(this.Url, ResourceLocation.Head)
    @Html.NopCanonicalUrls()
    @Html.Action("RssHeaderLink", "News")
    @Html.Action("RssHeaderLink", "Blog")
    @*Favicon - upload favicon.ico file to the root directory*@
    @Html.Action("Favicon", "Common")
    @if (displayMiniProfiler && isAdmin)
    {
        @StackExchange.Profiling.MiniProfiler.RenderIncludes()
    }
    


    @RenderBody()
    @Html.NopCssFiles(this.Url, ResourceLocation.Foot)
    @Html.NopScripts(this.Url, ResourceLocation.Foot)




Now, if you save your changes and view the public store, you won’t see the profiler with loading time until you log in as “Admin” to your store site.






·        Hooking up MiniProfiler to an EF code first project in nopCommerce

MiniProfiler is also capable of profiling EF database calls. In order to do so, we will have to add the additional dependency of MiniProfiler.EF like this:

 

PM> Install-Package MiniProfiler.EF6

 

You can also install the package like this:





After installing the Nuget package for EF6, let’s add the necessary code in the “Global.asax.cs”:

·         Add this reference

using StackExchange.Profiling.EntityFramework6;

 

·         Add this in Application_Start()

MiniProfilerEF6.Initialize();

 

Basically, your Application_Start() will look like this:


protected void Application_Start()
        {
            MiniProfilerEF6.Initialize();
 
            //disable "X-AspNetMvc-Version" header name
            MvcHandler.DisableMvcResponseHeader = true;
 
            //initialize engine context
            EngineContext.Initialize(false);
 
            bool databaseInstalled = DataSettingsHelper.DatabaseIsInstalled();
            if (databaseInstalled)
            {
                //remove all view engines
                ViewEngines.Engines.Clear();
                //except the themeable razor view engine we use
                ViewEngines.Engines.Add(new ThemeableRazorViewEngine());
            }
…….
………………

…………………………


Now, if we run our website and view the public store, we will see the profiler with the loading time like this:





If you click on profiler, you will get the windows similar to this:





Here, you will notice that there is an additional column “sql” as the MiniProfiler is profiling our EF database calls. So, if you click on any loading time for SQL query, you will get the information like this:




Conclusion

It is simply amazing to see that MiniProfiler is profiling the database calls while any page is loading. We can see the time takes for each query on this page and this is a great way for developers to keep an eye on the performance of the nopCommerce website. In any case, the site or webpage is loading slow, the developer can troubleshoot the problem and improve the performance.

 

·         nopCommerce can be download here: http://www.nopcommerce.com/downloads.aspx

·         nopCommerce Version (used in this article): Version 3.70

·         nopCommerce Support: http://www.nopcommerce.com/boards/


Page copy protected against web site content infringement by Copyscape

About the Author

Lavishkumar
Full Name: Lavish Kumar
Member Level: Starter
Member Status: Member
Member Since: 5/15/2016 5:08:06 PM
Country: United States

http://www.strivingprogrammers.com/

Login to vote for this post.

Comments or Responses

Posted by: Skraghava on: 6/6/2016 | Points: 25
very good article.. helpful..
Posted by: Lavishkumar on: 6/6/2016 | Points: 25
Thank you!

Login to post response

Comment using Facebook(Author doesn't get notification)