Sunday, December 30, 2012

Display Page Load Time

Hack the Gibson

In classic ASP, it was extremely easy to show page load times.  You created a datetime variable at the top of the page, and performed the math in the footer.  Now that we are in event triggered .Net framework, it might seem a little more complicated but we will accomplish the task with three lines of code with a caveat.

The absolute best way to display page load times is to turn on Tracing.  To enable tracing, you need to add a single line of code to the web.config.  In the <configuration>/<system.web> node, like so:

compilation debug="true" strict="false" explicit="true"
trace enabled="true" requestLimit="40" localOnly="false" />

Here, we have turned on tracing universally for the website.  In effect, we have turned on tracing for all the objects of the site.  For instance, to view the tracing information for the Default.aspx page, you simply add /trace.axd to the end of the url.  When I run my site, it looks like:


So, to look at the tracing information, it will look like:


To view the page specific information, click the View Details link.  Here you can see the tracing information for the page object and load times of each event ..etc..



Now, let’s say that you are only concerned with a single page instead of allowing tracing for the entire website, you can add tracing to the page declaration and thus limit tracing to the single page, like so:

<%@ Page Trace="true" Language="VB" AutoEventWireup="false" 
CodeFile="Default.aspx.vb" Inherits="_Default" %>

Then you invoke the tracing information the same by adding trace.axd to the end of the URL.  There are obvious reasons why you may not want to turn on Tracing for production websites.  Secondly, it does nothing to display to the average user who visits your site and do not know that they have to add the trace.axd to the end of the url to see the page load times.  Additionally, there are no reasons (that I can think of) to show the user the load times of every event and object on the page.  So why can’t we use the old classic ASP way of showing off our super server’s processing power?

We can, but it does come with one caveat.  We’ll use the Pre-Render event to display our load time, but we’ll miss out on a couple milliseconds that it takes to process the render of the page.  Since, this is more of an informational (nice-to-know) type label, it does not need to be exact, and we can miss out on the render processing time.

To start off with we need to add a label on the Default.aspx.  Typically this will need to go into your footer, but wherever you wish to place the load time is the developer’s decision:

Load Time: <asp:Label ID="lblPageLoadTime" runat="server" /> ms<br />

Now we need to add the code-behind.  We’ll need to create a global variable that will be initialized when the page is requested:

Partial Class _Default
Inherits System.Web.UI.Page
Dim dtPageStartTime As DateTime = DateTime.Now

For reference, you can see the Page Class definition and inheritance.  However, we have also created a global variable as a DateTime type and initialized it to DateTime.Now.  Which sets the variable to the time now when the page is requested.

Now to get the time between the request of the page and just before we render it to the user, we’ll use the Pre-Render page event, like so:

Protected Sub Page_PreRender(sender As Object, e As System.EventArgs) _
Handles Me.PreRender
lblPageLoadTime.Text = _
(DateTime.Now - dtPageStartTime).TotalMilliseconds.ToString()
End Sub

Now, when we run the application, our default webpage shows us the page load time (minus rendering) -



Now move the label to the footer and you will have a Page Load Time like in the old Classic ASP sites.

And… That’s how easy it is…

Håþþ¥ .ñꆆïñg…

No comments:

Post a Comment