Enhancing Performance

“I feel the need…the need for speed!”
    Lt. Pete “Maverick” Mitchell in Top Gun

It’s easy to say that we want a website that performs well. It’s just as easy to say that we’ve made changes and insist that our website is now “faster.” The real issue is how you can measure that performance increase. To show that you have improved something, you first need to be able to measure it. There are several ways that you can do that for a desktop application, but not as many for mobile devices. However, there are a few options that work fairly well for measuring performance on your mobile devices.

Measuring Performance

A great tool is one that many web developers are familiar with: YSlow. In addition to the normal desktop version that you can add as an extension to your browser, there is a mobile version available. This version is located at http://developer.yahoo.com/yslow/mobile. This URL will redirect you to a very long URL with lots of JavaScript on the end. To use YSlow for Mobile, you must first create a bookmark from this resulting URL, which will look like this:

http://yslow.org/mobile/#javascript:(function(y,p,o){p=y.body.append...

After you have created the bookmark, edit it and delete everything up to the “#” sign so that your bookmark is actually a piece of JavaScript code instead of a URL, which is commonly known as a bookmarklet. Once you have that bookmarklet, go back and load your site, click on the bookmarklet bookmark, and you should then see the YSlow application show up in the bottom half of your screen. It will reload the site and analyze it for you, giving you a score between 0 and 100, and a letter grade from A–F for both your overall site and each area.

Sometimes you can’t do much about what it suggests. When analyzing an MVC site, it will suggest that the minified JavaScript and CSS should also be gzip compressed but that option is not available in the MVC 4 RC bundles. As you review each area of your site, the tool will give you suggestions for how to improve your score in that area.

Enabling Client Caching with Web.config

One very easy way that you can dramatically speed up your website is to enable content caching on your scripts, style sheets, and images. To do that, all you need to do is to include this very simple Web.config in the Content and Scripts folders:

<?xml version="1.0" encoding="UTF-8"?>

<configuration>

  <system.webServer>

    <staticContent>

      <clientCache cacheControlMode="UseMaxAge"

        cacheControlMaxAge="30.00:00:00" />

    </staticContent>

  </system.webServer>

</configuration>

Note that this is the Web.config in your subfolders, and not the Web.config in the root of your site!

You might not think you need this since your browser automatically caches images and other content files for you. However, if you look behind the scenes with a tool like Fiddler, you will see that even if your browser has a file in the cache, for each of the files on your page the browser will do an HTTP query up to the server to see if the file in the browser cache is older than the file on the server.

This Web.config setting will automatically put a content expiration date of thirty days on everything that is downloaded from that folder. The next time any of those images, scripts, or both are requested from that folder by your client’s browser, it will see that it has the file in cache AND that the expiration date has not passed yet, so it won’t hit the server to check and see if it needs the file. Even though it’s a small request, you have eliminated one round-trip to the server for every image you have on the page that is cached. Talk about an easy upgrade!

There is one small downside to this approach that you have to be aware of. If you want to change a script, style sheet, or image in that folder, you have a small problem. For the next thirty days, any client that already has your script or image in its cache won’t even bother to check your server to see if the file has changed. After thirty days, it will check again and your site will be updated.

Fortunately, there is a simple solution: When you change a file, you have to also change the name of the file. If you change a style sheet named Site.Mobile.css, do a global search and replace to change the name to Site.Mobile2.css. The new file name won’t be in the client’s cache, so it will be fetched from the server.

Using a CDN

Another way that you can easily increase the performance of your site is to use a content delivery network (CDN) for spreading the load for you. A CDN will dramatically improve your site’s performance even if you are pulling the exact same files from the CDN that you serve up from your site. The secret is in how the browser retrieves files. Most browsers will download up to six concurrent files from any given domain. When you request a seventh resource from a domain, it will be queued up and wait until one of the first six are completed. If you download some of your files from a CDN, you get another six download streams that you can use at the same time.

Another big plus is that these files are cached in your browser’s cache from some other site, so it’s quite possible that they will already be there and you won’t even have to download them.

You might think that you don’t have access to one, but you do. You can easily use a CDN for the shared files that you include in your project. Here are some examples:

<link

href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" rel="stylesheet" />

<link

href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" rel="stylesheet" />

<script

src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js" type="text/javascript"></script>

<script src="http://code.jquery.com/jquery-1.6.4.min.js"

type="text/javascript"></script>

<script

src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>

<script src="http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js" type="text/javascript"></script>

<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

If you are using the bundling features of MVC 4, this may or may not apply to you, but it’s worth looking at, at least for images that are not bundled and minified.

Data Prefetch Tag

On links that you know will be used (like a link to the next picture in a gallery), you can add an extra tag which will cause jQuery.Mobile to preload the content:

<a href="mypage" data-prefetch>Load Page</a>

The data-prefetch tag prompts jQuery.Mobile to go ahead and fetch the next page once the current page is loaded so that when you actually click on the link, the document will load almost instantaneously because the page is already in the cache.

In a similar fashion, jQuery.Mobile loads a page into memory in the DOM when it is loaded, and then removes the page when it goes out of scope, keeping up the three pages in memory at any given time. If you want to make sure your page remains in memory, you can add a data-dom-cache="true" on the page element, and it will not be unloaded, so it will load faster.

Both of these tips have a large potential downside if you are trying to manage page loads and memory yourself, so you will want to make sure it’s important if you are planning on using these tips.