Five Performance Optimization Tools for Web developers

Five Performance Optimization Tools for Web developers

For impatient:

  1. webpagetest.org
  2. Dynatrace Ajax Edition
  3. Page speed from google lab
  4. ShowSlow
  5. YSlow

I got idea about this post after attending O’Reilly’s Velocity 2011 Conference. The conference is all about web performance and operations. I loved the vibe and energy of the crowd. Smart companies, innovative products, passionate people and a lot of knowledge sharing. I want to talk about several projects that I found very useful for each web development team. They  all help you tremendously to make your web site or mobile application faster and keep it this way. Optimize your web site for performance, monitor it constantly and
create best experience for your users. It’s not news that web site performance have a direct correlation on business bottom line.  There are numerous case studies available to prove the fact,

1. The first tool I found indispensable is webpagetest.org. Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more. Your results will provide rich diagnostic information including resource loading waterfall charts, Page Speed optimization checks and suggestions for improvements.

webpagetest3
Notable features:

  • client CPU utilization – because tests run from a real browser, you can see CPU Utilization
  • detailed waterfall diagram
  • filmstrip view
  • Video – how you website is showing up for the user. This is awesome feature. Very useful to show problem or improvements to business people.
  •  

  • Compare with you competitors web site or industry web pages
  • Webpage test could be install locally for continuous testing
  • Export result as .har file for further analysis

There is advanced tab and I highly recommend explore it

2. Dynatrace Ajax Edition.
This is awesome tool. I did not use it before, but at the conference people I talked to gave a great feedback for the tool. They simply love it and convince me to give it a try. Unfortunately supported platform are only Windows XP (32 bit), 2003, Vista (32/64 bit), or 7 but I use virtual machine on my mac to try it out.
ajax20_birthday_turtle

Major points are:

  • It’s free.
  • It can be integrated with their commercial back end monitoring/profiling tool for complete investigation from client to backend DB call.
  • JavaScript/DOM Tracing- Trace and analyze both JavaScript executions and all calls to the DOM. See all method calls, with method arguments and their return values.
  • Web Test Automation- Automated performance analysis across both IE and Firefox without having to modify your test scripts . Support for Selenium, Watir and more. I love the idea of knowing my performance metric during integration testing.
  • Diagnose Cross Browser – Firefox & IE. They can have absolutely different results for the same code base.
  • Training videos to get you started.

This is not a complete set of features dynatrace provides for their Ajax edition. Please download the software and play with it. You may discover a lot of surprises on you web site.

3, Next great product came from Google Lab. PageSpeed was released in November of last year and already gained popularity and respect in web performance community.
It consist of extension, new online tools and mod for apache.
The Page Speed browser extensions, available for Chrome and Firefox, allow you to evaluate the performance of your web pages and to get suggestions on how to improve them.
pagespeed
Page Speed Online is a new web-based tool that allows users to analyze pages at any time, in any browser, without downloading an extension. It also features Page Speed Mobile analysis, which lets developers analyze their site as viewed by a mobile browser, and get suggestions specific to mobile optimization.

Page Speed Online offers the new ability for web developers to analyze the performance of webpages as displayed in smartphones. Today, a number of web sites maintain two different versions of their site content: one is optimized for larger screen real-estate and higher bandwidth available to desktops and laptops over corporate and home networks. The other is optimized for a smaller screen real estate and the content is generally lighter: potentially less JavaScript, smaller images and less text.
Page speed from google lab
pagespeedonline
I am fan of the mod_pagespeed Apache module. It provide page speed optimization on the fly, because this Apache module automatically rewrites pages and resources to improve performance. It has sophisticated image optimization mechanism to optimize images for the web, combine and add cache headers to other resources like .js and .css files. Mod_pagespeed des not do something special, just apply best practices for speed optimization on the fly, freeing you from doing this task yourself. If you site already optimized, you may not see any gain, even performace degradation, but for not optimized sites it worth to deploy.

4, ShowSlow takes a little different approach than previous tools and allow you to monitor performance over the time. I think this is a killer feature allowing you to see how changes to your website affect user experience over the time. Show Slow is an open source tool that helps monitor various website performance metrics over time. It captures the results of YSlow, Page Speed and dynaTrace AJAX Edition rankings and graphs them, to help you understand how various changes to your site affect its performance.
The tool can be installed on your own server. I would love to see it to monitor our dev, stage and production. Really cool.
showslow

5. Last tool worth mentioning is YSlow. It has a new version of extensions and YSlow for Mobile/Bookmarklet. YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. Feature highlights:

  • Grades web page based on one of three predefined ruleset or a user-defined ruleset;
  • It offers suggestions for improving the page’s performance;
  • Summarizes the page’s components;
  • Displays statistics about the page;
  • Provides tools for performance analysis, including Smush.it™ and JSLint.

yslow
Please share what is your favorite performance tools and why?

 

Enhanced by Zemanta

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>