15 Tools to Help You Develop Faster Web Pages

June 12th, 2008 by Jacob Gube | 131 Comments | Stumble It! del.icio.us

Response times, availability, and stability are vital factors to bear in mind when creating and maintaining a web application. If you’re concerned about your web pages’ speed or want to make sure you’re in tip-top shape before starting or launching a project, here’s a few useful, free tools to help you create and sustain high-performance web applications.

I’ve tried to include a wide variety of tools that are easy to use, and have tried to keep them as OS and technology-independent as possible so that everyone can find a tool or two.

1. YSlow for Firebug

YSlow grades a website’s performance based on the best practices for high performance web sites on the Yahoo! Developer Network. Each rule is given a letter grade (A through F) stating how you rank on certain aspects of front-end performance. It’s a simple tool for finding things you can work on such as reducing the number of HTTP request a web page makes, and compressing external JavaScript and CSS files. A worthwhile read is the Ajax performance analysis post on IBM developerWorks that outlines practical ways of using YSlow in your web applications.

2. Firebug

Firebug is an essential browser-based web development tool for debugging, testing, and analyzing web pages. It has a powerful set of utilities to help you understand and dissect what’s going on. One of the many notable features is the Net (network”) tab where you can inspect HTML, CSS, XHR, JS components.

3. Fiddler 2

Fiddler 2 is a browser-based HTTP debugging tool that helps you analyze incoming and outgoing traffic. It’s highly customizable and has countless of reporting and debugging features. Be sure to read the “Fiddler PowerToy - Part 2: HTTP Performance” guide on the MSDN which discusses functional uses of Fiddler including how to improve “first-visit” performance (i.e. unprimed cache), analyzing HTTP response headers, creating custom flags for potential performance problems and more.

4. Cuzillion

Cuzillion is a cool tool to help you see how page components interact with each other. The goal here is to help you quickly rapidly check, test, and modify web pages before you finalize the structure. It can give you clues on potential trouble-spots or points of improvements. Cuzillion was created by Steve Saunders, the ex-Chief Performance at Yahoo!, a leading engineer for the development of Yahoo’s performance best practices, and creator of YSlow.

5. mon.itor.us

monitor.us is a free web-based service that grants you a suite of tools for monitoring performance, availability, and traffic statistics. You can establish your website’s response time and set up alerts for when a service becomes unavailable. You can also set-up weekly, automated benchmarks to see if changes you’ve made impact speed and performance either positively or negatively.

6. IBM Page Detailer

The IBM Page Detailer is a straightforward tool for letting you visualize web components as they’re being downloaded. It latches onto your browser, so all you have to do is navigate to the desired site with the IBM Page Detailer open. Clicking on a web page component opens a window with the relevant details associated with it. Whenever an event occurs (such as a script being executed), the tool opens a window with information about the processes.

7. Httperf

Httperf is an open-source tool for measuring HTTP server performance running on Linux. It’s an effective tool for benchmarking and creating workload simulations to see if you can handle high-level traffic and still maintain stability. You can also use it to figure out the maximum capacity of your server, gradually increasing the number of requests you make to test its threshold.

8. Pylot

Pylot is an open-source performance and scalability testing tool. It uses HTTP load tests so that you can plan, benchmark, analyze and tweak performance. Pylot requires that you have Python installed on the server - but you don’t need to know the language, you use XML to create your testing scenarios.

9. PushToTest TestMaker

PushToTest TestMaker is a free, open-source platform for testing scalability and performance of applications. It has an intuitive graphical user interface with visual reporting and analytical tools. It has a Resource Monitor feature to help you see CPU, memory, and network utilization during testing. The reporting features let you generate graphs or export data into a spreadsheet application for record-keeping or further statistics analysis.

10. Wbox HTTP testing tool

Wbox is a simple, free HTTP testing software released under the GPL (v2). It supports Linux, Windows, and MacOS X systems. It works by making sequential requests at desired intervals for stress-testing. It has an HTTP compression command so that you can analyze data about your server’s file compression. If you’ve just set up a virtual domain, Wbox HTTP testing tool also comes with a command for you to test if everything’s in order before deployment.

11. WebLOAD

WebLOAD is an open-source, professional grade stress/load testing suite for web applications. WebLOAD allows testers to perform scripts for load testing using JavaScript. It can gather live data for monitoring, recording, and analysis purposes, using client-side data to analyze performance. It’s not just a performance tool – it comes with authoring and debugging features built in.

12. DBMonster

DBMonster is an open-source application to help you tune database structures and table indexes, as well as conduct tests to determine performance under high database load. It’ll help you see how well your database/s will scale by using automated generation of test data. It supports many databases such as MySQL, PostgreSQL, Oracle, MSSQL and (probably) any database that supports the JDBC driver.

13. OctaGate SiteTimer

The OctaGate SiteTimer is a simple utility for determining the time it takes to download everything on a web page. It gives you a visualization of the duration of each state during the download process (initial request, connection, start of download, and end of download).

14. Web Page Analyzer

The Web Page Analyzer is an extremely simple, web-based test to help you gain information on web page performance. It gives you data about the total number of HTTP requests, total page weight, your objects’ sizes, and more. It tries to estimate the download time of your web page on different internet connections and it also enumerates each page object for you. At the end, it provides you with an analysis and recommendation of the web page tested – use your own judgment in interpreting the information.

15. Site-Perf.com

Site-Perf.com is a free web-based service that gives you information about your site’s loading speed. With Site-Perf.com’s tool, you get real-time capturing of data. It can help you spot bottlenecks, find page errors, gather server data, and more - all without having to install an application or register for an account.

More Tools and Related Resources

Apache JMeter
a Java-based desktop application for performance testing Apache servers.
The Grinder
an open-source load testing framework that intends to make automated tests simpler.
OpenWebLoad
yet another excellent open-source load testing tool for web applications.
“Optimizing Page Load Time”
an article on improving page load time.
“What the 80/20 Rule Tells Us about Reducing HTTP Requests”
a blog post on the YUI blog explaining the precedence of front-end performance for optimal response times.

If you have a favorite web performance tool that wasn’t on the list, share it in the comments. Would also like to hear your experiences, tips, suggestions, and resources you use.

And if you’re interested in analyzing the effectiveness of a web page design, be sure to check out 7 Incredibly Useful Tools for Evaluating a Web Design.

131 Comments

Umut Muhaddisoglu

June 12th, 2008

Very nice list. Thanks.

Specially Mon.itor.us is a great free service which deserves to be more popular I believe.

Franck

June 12th, 2008

Excellent list of tools. I will quickly use some of the to check my web sites behaviour.

mark

June 12th, 2008

never heard of Site-Perf.com but it looks really good. cant seem to access 14. Web Page Analyzer

selva GK

June 12th, 2008

Gud collection of tools ! Great

web design company

June 12th, 2008

A bunch of tools. I need to come back and read more about them.

Dinesh Bishnoi

June 12th, 2008

Nice Collection. New tools for me.

Slipfish

June 12th, 2008

Those of us that have a Mac also have the Safari Developer tools. I’ll have to check out yslow though, have to admit I’m slightly impressed with what yahoo has been doing lately.

paresh

June 12th, 2008

excellant site, thanks for some unique tools.

zuborg

June 12th, 2008

Fine list. You maybe never heard about http://webo.in/, but if somebody know russian language, he will find this tool useful too. It load page with its requisites, like http://site-perf.com/ does, and check how these data can be compressed by various methods.

Will

June 12th, 2008

Great list! Thanks.

Son Nguyen

June 12th, 2008

A great list, definitely a keeper. Since you listed “wbox”, why not “ab”?

sunnybear

June 12th, 2008

Great review. I’ve just notices a visit from this page to
http://webo.in/ — just another web page load speed analyzer.

None of listed tools has support for data:URL or mhtml schemas, also none of them have ‘visual optimization’. We are going to translate the whole project to English next few monthes. If anybody can help — please write to n2ck [AT] mail.ru. Project is now availiable only in Russian.

Also any of your comments will be appreciated.

Web Optimizator — http://webo.in/

–
Thank you

Tarek Ziadé

June 12th, 2008

Thanks for the list !

btw: Apache JMeter can be used to test *any* kind of http server, not only Java based ones. I use it for python basd sites for instance.

It allows distributed tests and provides an http proxy to record tests, and a myriad of pluggable options to play with any kind of website.

Television Spy

June 12th, 2008

Great tools, glad you didn’t list the basic ones that have been done to death. I’m not a fan of firebug though, I tried using it and it started lagging my machine badly. I think it doesn’t play well with Web Dev toolbar.

Moni

June 12th, 2008

Wicked list mate, PushToTest is awesome, I use it a lot. I’m disappointed there were no final tweak tools, like tools to check the sites content for keyword density, broken links and so forth, seo tools are a must for launching a site, what good is the best designed site if it’s not properly optimized i say. I would list a bunch but most can be found on the seo site http://www.shoutingzone.com or seobook! But great job with this article mate.

Pat Meenan

June 12th, 2008

Just to add to the list - Pagetest (http://pagetest.sourceforge.net) is an open-source tool similar to Page Detailer (IE Browser plugin) but includes optimization checks like YSlow.

If you don’t want to install a plugin locally or want to test your performance across different connection types you can also use the online version (http://www.webpagetest.org).

Jon

June 12th, 2008

Aweosme will deff use some ove them!

Jacob Gube

June 12th, 2008

Hey everyone,

Thanks for the excellent suggestions - keep them coming.

@sunnybear: I’ll check out that application, and I’ll contact you with feedback and suggestions.

@Slipfish:Yahoo’s putting out a good set of useful stuff on the YDN, so I’d have to agree with you on that. I frequent the Design Pattern Library, and I’m experimenting with the YUI (just to get familiar with it).

@Tarek Ziadé: About JMeter - I meant the application itself is Java-based, sorry for the confusion. Since we’re talking about HTTP servers — I’ve been itching to set up another server using nginx instead of Apache, and using that to serve static files. If anyone has any experience with this, I’d love to hear about it.

@Television Spy: I have to disable Firebug a lot when I’m browsing normally and it does indeed crash FF often, especially when YSlow’s also enabled. It’s a very useful tool and I’m of the opinion that you just have to use it if you’re a web developer, especially if you work with JavaScript extensively.

@Pat Meenan: Thanks for Pagetest!

Antony Koch

June 12th, 2008

I’d recommend trying Selenium for Firefox written by the guys at ThoughtWorks - it’s like Winrunner and records actions such as text entries and clicks - useful for wizzing through data that needs entering repeatedly (I’m writing insurance quote software and it’s a godsend)

Will

June 12th, 2008

Really great, thanks for sharing!

MUW

June 12th, 2008

You havent mentioned Opera Dragonfly. dragonfly.opera.com

Paul Hammant

June 12th, 2008

We at thoughtworks did not write selenium-ide, but we are proud that selenium-core is used by it.

Were also pleased to see that PTT is listed as it also uses selenium-core :-)

Zach

June 12th, 2008

For simple web testing, I like BadBoy: http://www.badboy.com.au/

Alejandro

June 12th, 2008

Excellent list.. It definitely comes in handy, just in time! Thank you!

Cyril Gupta

June 12th, 2008

Super Post… I use only a couple of these tools. Thanks for introducing me to the others.

John thomas

June 12th, 2008

Wow, I have used nothing but Microsoft Front Page for 10+ years. This was a VERY informative article. I will have aLOT of new toys to play with now!

Matt

June 12th, 2008

Damn man, your lists get better and better. I’ve used quite a few of these tools myself and they really do help alot. Thanks!

Gleb Esman

June 12th, 2008

Great list for geeks.
But if you just want to make business on the web and spare yourself from babysitting technical issues - signup for free wordpress.com account, map your own domain to it, and enjoy fast indexing with google + fast page loads + more lifetime left to do business away from technical glitches, upgrades, updates, backups and other fun stuff.

Gleb

Will

June 12th, 2008

Don’t forget to mention Pingdom tools: http://tools.pingdom.com/

SEO

June 13th, 2008

I have used Fire Bug now for a while and it works great, it really speeds up my work and its easy to find bugs inside the scripts. Very recommended tool…!

Karthikbala

June 13th, 2008

really useful list thank you so much

omar abid

June 13th, 2008

Thanks man really useful

Kumar

June 13th, 2008

Its really very good collection of tools, This is helpful for the effective development of web pages. Thanks

praveen

June 13th, 2008

Very nice. Thanks a lot for such a informative post.

zuborg

June 13th, 2008

2 sunnybear:
Just have added support of data:URI and mhtml: schemas into http://site-perf.com/
Thanks for feedback :)

2 Jacob Gube:
It would be nice if you add ‘voting’ feature for such lists like this one.

GurX

June 13th, 2008

I use Iperf on my PFC.. http://www.gurx.net/?doc=pfc2003

Bye

Tamila

June 13th, 2008

Very nice list - I had not heard of some fo these before. New to web development and trying to learn all I can. I appreciate the folks like you that try to help others by posting very good information. Thanks

Shadow

June 13th, 2008

Nice tools :O, Cuzilion looks interesting~, i’ll test it out. So far i’ve been only using firefox’s console and http://www.google.com/analytics/ =o!!

Steve

June 13th, 2008

Great list, some of these things I’ve never even heard of. I gotta say though that having Yslow as #1 is right on in my book, that plugin opened my eyes to how poorly my sites were performing compared to what they could be.

@Television Spy: I’ve had the same issues with Firebug lagging my machine, luckily with the newer versions (specifically one geared for FF3) most of the stuff that causes the lag is turned off by default, so you turn it on when you need it.

Shang

June 13th, 2008

This site loaded instantly on my slow old mac- speaks for itself :D

Steven Snell

June 13th, 2008

Several of these are new to me. Thanks for a great list.

stefan alexandru

June 14th, 2008

Firebug and yslow are the best. Tho… WebDeveloper has some usefull and faster stuff then firebug.

Juarez P. A. Filho

June 14th, 2008

Outch… That’s a very great tools’ list.
I already use Firebug with YSlow, but the others tools I’ve never even heard of…
Thanks for share and thanks to replays of everyone!!
A little tip that I always use on Firefox is create some profiles, like development, geralNavigation and so on.
Then, I put on each profile what I really need to my job.
For example, on geralNavigation I install Delicious add-on, google toolbar, dictionaries, skype extension, etc.
So when I surf on web just for look blogs, read things I use geralNavigation and when I go develop something I use development profile.

See you guys!

Nash

June 14th, 2008

What a great list!

I need tools for HTML and CSS validation, also tools for doing SEO stuffs. Do you have info for those tools? thx

Haytham

June 15th, 2008

Yeah it’s good collection.

cowgaR

June 15th, 2008

this is the FIRST time I’ve read some interesting list of tools I didn’t know existed…

I kept reading because favorite Yslow was first mentioned…then I found this list to be pretty good, so great work!

wish all list would look like this!

Mnaoj Patil

June 16th, 2008

Very nice, i’ve read first time interesting tools.

Black Google

June 16th, 2008

Hmmm…nice tools… thanks fr them

Yujin

June 16th, 2008

Good list of tools. I already use yslow by yahoo. Stressing tool can only done if you are on high speed connection or use apache ab for stress testing.

Summer Ahmed

June 17th, 2008

Good place to start with to be termed as intelligent and smart person around in your colleagues.

Pankaj Mirajkar

June 18th, 2008

The tools presented in this article are very useful in performance analysis. All the tools are quality tools for developer and performance testers.

Bernhard

June 18th, 2008

Chris Pedericks web-dev toolbar for gecko/mozilla based browsers should have made it onto this list. Redefines “Swiss Army Knife”. I find it indispensable.

Read more about it here:
http://chrispederick.com/work/web-developer/