Nov.23

JavaScript & CSS Minification

There’s a thought in the software industry that unless your software performs well it’s useless – even if it has many good features. This is especially true in the web world. I’ve heard it said that unless your page loads in less than 2 seconds, people will go elsewhere.

In web applications one of the low-hanging performance fruits is to make sure that your JavaScript and CSS files are minified and, if possible, combined into a single file each. There are various tools to accomplish this. As you might expect each tool takes a different approach. Some tools will automatically detect, minify and combine the files. Others require that you specify the files you want it to act on.

Recently, I started to use the Combres library (Github) and so far it works well. You can install Combres via Nuget (seriously, if you’re not using Nuget, STOP and go download the extension for Visual Studio!). The Nuget install script handles most of configuration tasks for you like updating your project references and the web.config file.

Once the library is installed, there are only two steps remaining:

First, configure the combres.xml file to reference the script and css files you with Combres to act upon.
CombresConfig

Second, you need to add place holders for the Combres output:
CombresRefernce

 

I had to add the PlaceHolder controls to eliminate an error message about having “<%” symbols in the <head> section.

And that’s it for a basic setup of Combres. When you run your application, the Combres handler will produce a minified and combined CSS file and a minified and combined JavaScript file.

I liked several things about Combres:

  • It only acts upon the files that I tell it to. If, for some reason, I don’t want it to include a specific file, it’s easy to do – just leave it out of the xml file.
  • I can specify which compressors are used. I can even specify a different compressor for JavaScript than CSS. Check out the combres_full_with_annotation.xml file that the Nuget package installs in your App_Date directory for all the options.
  • If I want Combres to not minify and combine, it’s as easy as setting my debug setting to false in the web.config file (obviously, you don’t want to do that on production!).

I did encounter one hitch in the setup. The project I was adding this too is a Website project – not a Web Application project. So the project is dynamically compiled instead of being compiled into a DLL before deployment. Because of this, I needed to add the following line to my Global.ascx page in the Application_Start method:

System.Web.Routing.RouteTable.Routes.AddCombresRoute("Combres");

If I didn’t add that line, my HTTP requests to the combres.axd handler would return a 404 error.

Combres also does some other things that I haven’t delved too deeply. It adds some caching capabilities such as expires headers. These is another easy performance change you can do but is outside of the scope of this post.

I’ve really liked Combres and recommend that you have it a try!

JavaScript,Performance

Oct.10

Using Perfmon Counters to Gather Performance Data

You’ve probably heard the saying that knowledge is power. Indeed it’s very hard to make good decisions about complex problems without data. Data gives you the insight to know what’s going on so that you can make quality decisions that will actually help solve the problem.

Recently, I’ve been dealing with some performance issues in a Sql Server 2008 R2 database. Microsoft has built counters into Windows, Sql Server and ASP.NET that allow you to gather metrics about specific operations. Many of these counters have industry standard thresholds that you can compare your actual numbers with to help identify when there is a problem.

So how do you get this data? If you know C# or VB.Net, it’s super easy. Here’s a simple, rough example:

class Perfmon
{
   private static PerformanceCounter _percentProcessorTime
     = new PerformanceCounter("Processor", "% Processor Time", "_Total");

   static void Main(string[] args)
   {
       if (PerformanceCounterCategory.CounterExists("% Processor Time", "Processor"))
       {
           var actual_percentProcessorTime = _percentProcessorTime.NextValue();
           //Do what you want with the counter data.
       }
   }
}

Pretty easy, right? But how do you know which performance counters to gather data from? Fortunately, there are a number of good resources out on the interwebs. One of the best resources I’ve found for gathering Sql Server specific performance data is a poster from Quest (now part of Dell; makers of TOAD software). You can download the poster here (PDF). This poster gives a number of Perfmon counters that deal with the physical server and Sql Server. As it lists each counter, it provides a description and a threshold, if applicable. The thresholds are really helpful when starting to gather this data and make sense of it.

You can also gather counter data via the Perfmon.exe application that comes baked into Windows. This tool allows you to log the data to a number of file formats (CSV, Binary) and also log directly to a Sql Server table if you wish). Check out this article and video from Brent Ozar for more information there. The Perfmon tool will also graph the data in real time, much like the Windows Task Manager does.

A third option is available if you wish to only gather Sql Server metrics (including things like recent expensive queries). This link, gives you the actual queries that you can run (providing you have login credentials with the appropriate rights). You could even leverage SSRS (Sql Server Reporting Server) to build a report against the data and create a real-time dashboard.

I opted to retrieve the counter data from a C# console applications for two reasons: first, C# is what I’m the most comfortable with. But secondly, I wanted to be able to insert checks based on the recommended thresholds and provide real-time alerts via email to the team.

If you wish to log the data via the Perfmon.exe tool and then analyze the data after the fact, I recommend that you check out the Performance Analysis of Logs (PAL) tool. It’s free! It provides you with a number of threshold files that you can use to compare the gathered data against. You can export the threshold files to import them into the Perfmon.exe application so you don’t have to manually set up all of the recommended counters. PAL will built a list of times where thresholds were exceeded or were close to being exceeded. But that’s not all, it will plot the data on graphs. I highly recommend this tool!

Happy Data Crunching!

Performance