How do I optimize my website for slow data connections?

Question

The solutions here worked fine however they were quite labour intensive. To anyone looking to perform similar enhancements on old asp.net solutions I would highly recommend switching the project to MVC just to take advantage of the script and style bundling. .aspx files work as expected in MVC projects.

---

I'm about to start work on performing some performance enhancements for one of our products. Our users connect to the network using radio which is extremely slow. The main bottlenecks in the application are the network and the database. I am going to be focusing on reducing the network footprint of the application.

I am going to start with a few "quick wins" before I get down to the nitty gritty of tearing apart UpdatePanels, removing unnecessary content and whatever else I can think of. Right now I have a few things that I think I'm ready to implement
These include

• Minifying and combine css Using This
• Minifying and combine js same as above
• Removing excess whitespace from html sent to client. Using this

Edit : The assets minification and white space cleaning tools work quite well together.

However I have a few things that I'm not sure how I'll address.

1. Some microsoft resources ( WebResource.axd?d=blahblah and ScriptResource.axd?d=blahblah ) are not minified. This and This and a few others depending on the page. Microsoft.Ajax is fine though. How can I manually minify these files if they aren't being minified automatically? Am I missing a setting somewhere?

2. Is it possible to combine the microsoft resources into a single js file with my javascript?

3. 401 errors, In fiddler I can see that my first hit to the website always gives a 401 error it is immediately followed by the normal 200. Also other resources will randomly have a 401 on their first call as well. Is this some sort of IIS setting that needs to be configured to remove this unneeded call?

4. Javascript inside aspx files. Unfortunately we have a lot of js inside our aspx files as well as a lot of javascript that gets rendered using ScriptManager.RegisterStartupScript in our code behinds. How would I go about minifying javascript within <script> tags in the aspx markup?

5. Favicon, can this be diabled? If not what's the next best thing?

Update

1. Mads Kristensen's combiner works great. However I've found that there are issues with some pages that include 14+ axd references produce a 404.15 error (query string is too long, ie only bug) My solution for this was to gzip and base64 encode the query string.

2. I've found that combining my js includes with the .axd files is a fruitless task as the .axd files are different for each page. Having my static js files seperate produces an extra service request but it will remain cached on the client instead of having the client redownload those scripts as a part of the combined js axd file.

3. I enabled anonymous authentication. No more issues.

4. No progress.

5. I've found that putting favicon.ico at the root is necessary. I think this may be just because of the way my application has been designed though.

Answer 1

Merging Microsoft script resources: Check out my ContentGator project which I've used to intercept requests for the WebResource (and other scripts and css) files and merge them together. I haven't updated it in a couple years, so I can't speak to how well it'll work out of the box, you should at least be able to reuse some of the code. I don't think I remember adding minification, but you should be able to add it in pretty easily. I think it also has either hooks into RegisterStartupScript, or an alternative to it, where again you should be able to wire in minification.

Favicon , as far as I know, cannot be disabled, as it is requested by default by the browser. If you really don't want it, you could probably just put up a 1x1 pixel ico so you aren't serving a 404, and subsequent requests will result in a 304. It wouldn't hurt to use a CDN for this and all your other static resources as well.

Additionally, check out http://developer.yahoo.com/yslow/ for other more general web optimization tips.

Other things off the top of my head:

• Use sprites for images when possible
• Output Caching

Answer 2

1 and 2) Optimize .axd: http://madskristensen.net/post/Optimize-WebResourceaxd-and-ScriptResourceaxd.aspx EDIT dead link Compress Script Resource .zip Google Cache of the article

3) HTTP 401 Unauthorized: You're configured authentication mechanism is doing this. If you have Windows authentication enabled but are not using it...

4) Embedded JS: MS AJAX Minifier

http://www.codeproject.com/Articles/81317/Automatically-compress-embedded-JavaScript-resourc

http://stephenwalther.com/blog/archive/2009/10/16/using-the-new-microsoft-ajax-minifier.aspx

There's not much you can do for JS mixed in with your markup. You could make your own utility to parse it out of the ASPX(s) with RegEx and create a file that contains all of it per page then minify that file and insert the 1 script reference. The regular expressions to capture everything within SCRIPT tags will end up being fairly complex because of corner cases like...

<script type="text/javascript">
document.write("<script>Dynamica, RegEx don't stop here -></script>");
</script>

5) Favicon: you either have a LINK tag on your page(s) that reference it with REL="shortcut icon" or you have a "favicon.ico" file sitting at the root of your web site. If you don't have the LINK tags then the browser will check for the favicon.ico at the root of your website automatically.

Answer 3

You should also consider enabling compression in IIS.

IIS6 Compression

IIS7 Compression

Answer 4

From gtmetrix.com :

• Avoid bad requests
• Avoid CSS @import
• Avoid CSS expressions (deprecated)
• Avoid document.write
• Combine external CSS
• Combine external JavaScript
• Combine images using CSS sprites
• Defer loading of JavaScript
• Defer parsing of JavaScript
• Enable gzip compression
• Enable Keep-Alive
• Inline small CSS
• Inline small JavaScript
• Leverage browser caching
• Leverage proxy caching (deprecated)
• Make landing page redirects cacheable
• Minify CSS
• Minify HTML
• Minify JavaScript
• Minimize cookie size (deprecated)
• Minimize DNS lookups
• Minimize redirects
• Minimize request size
• Optimize images
• Optimize the order of styles and scripts
• Parallelize downloads across hostnames
• Prefer asynchronous resources
• Put CSS in the document head
• Remove query strings from static resources
• Remove unused CSS
• Serve resources from a consistent URL
• Serve scaled images
• Serve static content from a cookieless domain
• Specify a cache validator
• Specify a character set early
• Specify a Vary: Accept-Encoding header
• Specify image dimensions
• Use efficient CSS selectors

You can use the gtmetrix tool, ySlow, or google's Page Speed to see how all of these impact it, but this gtmetrix tool is generally awesome and combines features for you, as well as doing some auto-generations that give you the improved versions of CSS files, etc.

Answer 5

http://wiki.asp.net/page.aspx/80/aspnet-optimization/

has a great set of resources on the various elements that you can / should tweek to make speedster web apps on asp.net! Njoy :)

Answer 6

I think that website should be optimized for best performance regardless of user connection speed.

Website performance/speed affects user experience which on the other hand affects overall website goal/conversion, so creating fast responsive websites and speeding up existing ones should be one of the primary goals of every web developer/front end engineer etc.

Anyway, these are two great resource to start with and comes from two giants: http://developer.yahoo.com/performance/rules.html http://code.google.com/speed/

Best

Answer 7

Have you enabled client-side caching for static resources such as site images and styles? They won't help with first page view but would speed up things a lot in subsequence views.

Favicon cannot be disabled but the request itself can be eliminated in modern browsers by using a data:url. For example this would cause a page to have slashdot's favicon without sending any request:

<link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAB4eE0AX18OAP///wBeXisAYWETANPTxACrq4cAgYEaAEhJEgBKSiYAkJF3AL29pgBiYjAAVFQQADQ0CgBCQg4AWe7u7u7u7pWe7u7u7u7u6e7u7u7u7u7u7/ZVr/+rz/7v+iIp8CJf/v//UibwIl////8CIj+mz//4iIUiuIiIj/iIjCIgiIiPjd3dsiXd3diN3d1CIq3d2I3d3dYiLd3Y0RERFGZsERHUERERERERRDd3d3d3d3dzXERERERERMUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" type="image/x-icon" />

Keep in mind that enabling client-side caching for favicon should save more bytes then embeding it in every page you send.