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/