Introduction
Earlier this year Google released an update to their search engine algorithm to take into account page loading speed as a factor in their ranking calculations, and this prompted me to take a look into the workings of some of my sites to see if I could identify an areas of improvement for page loading speed. As a .NET developer, there are some ASP.NET specific tips for page loading speed however some of the parts of this tutorials will work just as well for use on any website. I will start with the non asp.net relevant items, and then part two will cover the items relating specifically to asp.net.
Measuring Your Current Page Speed
Page loading time is actually quite difficult to measure as the variables aren't always static. For example you cannot account for things like network contention or sudden peaks in website traffic causing a slowdown. A good way to start is by simply checking the page size, and the size of all the elements on the page (images, javascript etc). Any reduction in the page size is a good start. Secondly, get yourself a Google Account, its free to sign up, and install Google Webmaster tools for you site. There is a page load option within the webmaster tools site giving you some basic statistics over time. Check your current page speed and see what Google is telling you, if your a showing a good speed rating, that's a great start. On one of my sites in particular my average page loading time was around 3 seconds which according to google is slower than 51% of websites. My goal is to lower this by half. Unfortunately Google Webmaster tools takes quite some time to update, so I will post an update to this article in a few weeks to let you know the results of my optimisations.
Here is a screen grab of my google webmaster tools page speed.
Part 1 General Optimisations
Switch Google Analytics To Asynchronous Mode
My site was using Google Analytics for website tracking, and I had installed this quite some time ago. I knew that Google had released an asynchronous version of the tracking code, so I switched the code to the new version. This should allow the tracking to load in parallel to the page and not cause the page to pause until the analytics tracking has loaded. If you need to get the code, login to your Google Analytics account and download a new javascript snippet to paste onto your pages.
Using Google CDN If You are using Jquery (or similar library)
So I also noticed that my site was using Jquery, as well as the Jquery UI for certain elements of the pages. I was accessing these locally within my project and they were loading from my shared hosting. I switch my Jquery includes to use the Google Content Delivery Network which will have two advantages. There will be a performance increase in loading time, and it will alleviate some load from my own shared hosting. Its also likely that the client may already have the file cached. I cannot recommend using this enough if you use Jquery on your site, and they will also provide CDNs for mootools, scriptaculous etc.
Compress Your CSS and Javascript Files
Well as I am now using the Google CDN for serving my Jquery scripts this is done by the CDN service automatically, however I did run my CSS files through a CSS compressor. This compressed the CSS file size by 35% and reduced the file from 3.5kb to 2.5kb. It might not seem like much but small gains translate to big savings on high traffic sites. There are a number of CSS compression tools, I used the Yahoo one.
Check You are not calling any javascript on pages that do not require it
I made a huge error on the site I was optimising and included the TinyMCE plug in code on every page, even static ones that did not even display any text areas. I rewrote my application to only include the TinyMCE plugin on the pages that needed it. Check all of your pages for unnecessary and unused javascript calls. If you are including javascript in <script> areas on your page - dont! Add your script into a separate .js file and include it using a src tag. This will ensure the javascript is cached by the users browser and not delivered each time the page is loaded. If you are using third party javascripts, always check for newer versions which may contain performance improvements.
Reduce Image file size
Although I am generally quite disciplined when generating images for the web, I noticed I had a couple of images that were not optimised as well as they could have been. Although images wont neccessarily affect your google page speed rating its an important issue and should not be overlooked. Browser usually load images in a seperate thread, so this wont directly affect the page load time, but will save on expensive bandwidth.
Make sure you are not dynamically resizing images, save you image to the exact size that you need for your page. I also highly recommend the smush tool from yahoo - it will optimise the palette of your images and save quite a considerable percent of file size. Another handy tip is to always specify the width and height of your img tag in your html source. The browser cannot render until it knows the image sizes, so the page render is delayed.
Reduce Your Page Size Where Possible
Remove HTML comments and unnecessary white space from your live pages to save on bandwidth and improve loading time. As my application in this case is dynamically loading using ASP.NET its tricky for me to simple remove the white space but there are some optimisations that will help for .net pages which I will talk abut in the ASP.net section below. There are a number of free web based html minifiers available.
Optimise Data Driven Applications
My application in particular was using a MySQL database for its content and although database optimisation is a completely new tutorial (coming soon!), if your website is data driven, look up some performance tuning information to try and measure your data query response time. You may be able to identify some areas for improvement, and therefore increase the page response times. Slow database performance is 7 times out of 10 caused by missing indexes.
Use GZIP Compression On Your Pages
Instructions on how to enabled Gzip on the many web servers available is out of scope of this tutorial (I show you how in IIS7 in the ASP.NET secion below) but its worth investigating. Gzip allows you to compress the content server side, resulting in less network traffic to the user. It is then uncompressed client side before being rendered. The best candidates for compression are html files, css files and javascript files. Images are usually already compressed, so ensure you dont waste CPU time compressing them again.
Review your hosting
The location of your hosting, server architecture, bandwidth and traffic all contribute to page speed. Choose a hosting provider that offers a strong backbone of network connectivity with low response times. Ensure your server has enough processing power to support your site and if you are using shared hosting consider upgrading to a dedicated server if you have budget for it and are having slowdown issues. If you have to fight for CPU cycles you will get contention and it will not help your page loading speed and a dedicated server eliminates server contention completely. Cloud hosting is also becoming a viable alternative to dedicated servers.
Part 2 ASP.NET Optimisations
Use IIS7 Static Content Cache
You can tell IIS7 to send a content expiration header for static content. Either for a fixed period or until a certain date. See both examples below. These need to be added to the system.webserver configuration section.
<staticContent>
<clientCache httpExpires="Sun, 29 Mar 2020 00:00:00 GMT" cacheControlMode="UseExpires" />
</staticContent>
<staticContent>
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" />
</staticContent>
Enable Gzip Compression For Static and/or Dynamic Content
Gzip can be enabled using the web.config in IIS7. Simply add the following into the system.webserver configuration section.
<urlCompression
doDynamicCompression="true"
doStaticCompression="true"
dynamicCompressionBeforeCache="true" />
<httpCompression
cacheControlHeader="max-age=86400"
noCompressionForHttp10="False"
noCompressionForProxies="False"
sendCacheHeaders="true">
<scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll"
staticCompressionLevel="7"
dynamicCompressionLevel="7" />
<dynamicTypes>
<add mimeType="text/*" enabled="true" />
<add mimeType="message/*" enabled="true" />
<add mimeType="application/javascript" enabled="true" />
<add mimeType="*/*" enabled="false" />
</dynamicTypes>
<staticTypes>
<add mimeType="text/*" enabled="true" />
<add mimeType="message/*" enabled="true" />
<add mimeType="application/javascript" enabled="true" />
<add mimeType="*/*" enabled="false" />
</staticTypes>
</httpCompression>
Disable viewstate on pages/controls that dont need it
The ASP.NET Viewstate functionality bloats pages with huge amounts of data, especially on pages or controls that combine many asp.net controls. You can quite easily push 100kb of viewstate data in certain cases. If you do not need viewstate, simply set the enableviewstate option to false in your page directive.
Turn Off Page Debugging
Ensure that you have debugging disabled for live scenarios. Debugging adds processing overhead to each page and slowdown the request slghtly. You can turn this off at the application level in the web.config, or on a page by page basis.