Nov.24

Easy Web Application Performance Tweaks

Happy Thanksgiving Week! As usual, the year has seemed to fly past. I trust it’s been a good year for you!

Yesterday, I wrote a post about JavaScript Minification using Combres and I spoke about low-hanging performance fruit. Just as you might easily pick the low-hanging apples from a fruit tree, these tweaks for performance are easily done. Sometimes so easily done you might ask, why doesn’t everyone use these tips? When I began explaining them to my team at work, I don’t think anyone had heard of them, except for possibly one of them.

So, here’s a brief overview of some of the easy things you can do to help your web application perform faster and more efficiently.

Expires Headers

Browsers today all have caching ability so why not start to take advantage of it? Expires headers basically tell the client, Hey this resource has not changed so don’t send it. This helps to reduce the number of HTTP (or HTTPS) requests that your user’s browser will have to make. Mads has a good post on how to configure expires headers for IIS7 here.

JavaScript/CSS Minification

Make sure that you are compressing (minifying) all of your JavaScript and CSS. If possible even combine your JavaScript to a single file and your CSS to a single file. This will reduce the number of HTTP requests and reduce file size which will, in turn, reduce network latency, etc. Oh and your mobile users on limited data plans will thank you! You can use tools like Combres or RequestReduce, YUI Compressor, etc.

HTTP Request Compression

Be sure to have your webserver compress the HTTP requests. IIS will do this for you if you turn it on. This helps to reduce response sizes pretty dramatically. If you’re still running IIS (!), here is a resource to help you: TechNet. You’ll have to edit some of the IIS metadata. It’s not as easy as with IIS 7 where you can just add a setting to your web.config file which is really nice for a shared hosting environment! Here’s the TechNet article for that. Do take note that you may need to deal with static content differently than you do dynamic content.

 

Reduce Page Size

Finally, you may just need to reduce your over all page size. On one of the applications I work on, we have a very large page that is central to the application. I’ve tweaked it many times – and improved it’s performance. But we’ve come to the realization that if we want to go smaller, we’ll need to break up the page into smaller pages. Sometimes you can tweak an issue and correct an architectural problem. But other times, you need to go back to the drawing board.

Tools

There are three tools that I can recommend if you’re getting started evaluating your apps performance:

  1. YSlow: Gives you a Firefox/Chome plugins that will test your site and grade it. It will point out the various areas where it thinks you can improve that page’s performance. There’s quite a bit of information on their website so be sure to check it out. YSlow is from the respected Yahoo Web Application performance team.
  2. PageSpeed: Gives you Firefox/Chome plugins that act much like YSlow but with different rulesets. PageSpeed is from Google.
  3. Browser Dev Tools: Firefox, Chome and IE all have Dev tools with network profilers. The profilers will show you how long each request takes and how long until the DOM ready even fires. So, you can monitor the page loads with this tool and dive into the question of which request is taking the longest.

Just remember one thing: software performance problems are not usually fixed in one step. Performance is improved by improving lots of little things and when you’re done, you’ll step back and realize that the application is running faster. So pay attention to those details!

Programming,JavaScript,Performance
Share this Story:
  • facebook
  • twitter
  • gplus

About Jeremy Foltz

Leave a comment

Comment