over 2 years ago
While preparing for my talk at Codemania I started filling my slides with links, clearly not something that scales. So, instead, here is a big list of interesting tools and resources that can help you journey through the murky waters of web performance.
Online page testers
- Recommended: Web Page Test - The best free multi browser test platform.
- Other similar tools are: Page Analyzer, Pingdom full page test
- There are also monitoring tools with page test integration showslow, GTmatrix
REDbot is handy tool for cache validation. Are you missing an
- HTTP Archive keeps historical performance snapshots of many sites online. See how your site has done over the last few years.
- Zoompf (pay) offers a full site optimisation solution, the blog is well worth reading.
In browser waterfall UI
A key tool for analysis of any web performance issues is the waterfall UI. See also this Steve Souders blog post on waterfall UI conventions.
- Recommended: Google Chrome - clean UI, option to disable cache, best waterfall UI. (CTRL-SHIFT-I) - note: Safari ships with the same tools - slightly dated (enable the develop menu)
- Opera and IE ship with similar tools. Firefox has Firebug. Additionally there is the non-free HttpWatch(pay) for Firefox and IE.
Browser plugins and performance auditors
- Recommended - Google Page Speed - trickiest to install, however provides very comprehensive results and helps you perform optimisations
- Recommended - YSlow - the original performance audit tool, now open source
- Recommended - Web Developer Toolbar very important for Firefox testing, allows you to easily disable cache or js.
- Chrome Speed Tracer - A bit tricky to get running and provides an information overload, perhaps the richest performance profiler out there. Learn how much each selector is costing you.
PNG / JPEG Compressors
- Recommended PNGOptimizer - Fast, excellent compression, nice GUI and optional command line
- Notable mention: PNGQuant - Best compression, but loses quality (reduces palette to 256)
- Other options: OptiPNG, PNGOUT, PNGCRUSH, PNGGauntlet (UI wrapper) and Trimage (UI wrapper for Linux, recommended by Johann)
- Recommended Paint.NET - Most simple photo editing and re-compression tasks can be done here, nice jpeg compression preview.
- JPEGmini - handy online tool for re-compressing jpeg files (recommended by Andy)
Sprite utilities and Data Uri tools
- Recommended SpriteMe, sprites are tricky things that feel impossible sometimes. This bookmarklet makes the sprite problem trivial to solve. Also see, the Steve Sourders talk about it.
- ASP.NET Sprite and Image Optimization Framework : easily integrate sprites into you ASP.NET and ASP.NET MVC apps.
- The Ruby CSS framework compass has built-in sprite support
- Sprite Cow - an online tool for sprite generation.
- Recommended Google's mod_pagespeed - Comprehensive, after-the-fact optimiser. Automatically compresses CSS/JS, creates sprites, inlines small scripts, optimises browser rendering and more. Easy to set up as a proxy using Apache mod_proxy.
- Recommended Request Reduce - IIS only. Bundling, minification and spriting.
- For web accelerator as a service look at blaze.io(pay) (now owned by Akami) and strangeloop networks(pay).
- Aptimize (pay) offers an IIS plugin similar to Request Reduce.
- CloudFlare CDN + site accelerator service, requires you point your DNS records at CloudFlare. Yottaa(pay) and Torbit(pay) offer a similar service.
I need help choosing a CDN
- Recommended CDNPlanet - list information about most CDN offerings out there. They also offer a service that allows you to measure your CDN performance for free.
- Recommended Cloud Climate - see various CDNs performance in your browser
Debugging proxies and latency simulators
- Recommended Fiddler must have debugging tool, many advanced features. Also see: StressStimulus a load testing extension.
- Recommended DUMMYNET - the only way to properly simulate a high latency connection, all the rest do not operate at the TCP level so do not properly simulate TCP slow start. ipfw is already installed on all Mac OS X machines by default. On FreeBSD you will need to recompile the kernel for DUMMYNET support (well worth it though). Also works on Windows x32 as a ndis driver (no x64 support)
- CharlesProxy (pay) multi-platform web debugging proxy
- LabJS appears to be the de-facto standard async js loader
- There is a great matrix comparing all the loaders at on the defer.js page
- Check out this presentation by @aaronpeters
Production web profilers
- Recommended MiniProfiler (.NET, official Perl/Ruby port in progress) - clearly being the a co-author I would recommend this, try it out - you will love it. There is also a PHP fork.
- Google App Engine Mini Profiler (Python, Free) - a similar tool to MiniProfiler by Ben Kamens.
- Recommended New Relic (Lite version is free) - birds eye profiling of your production app, been around for quite a few years, extensive reporting.
- Recommended Google Analytics contains a feature that allows you to track client side performance, but be warned, you are going to need to filter out some data.
Profilers and web profilers
JS / CSS minifiers and compressors
- Recommended Google closure compiler the most effective JS minifier.
- Recommended YUI Compressor pretty good JS minifier, also minifies CSS.
- Other options are: Uglify.js and JSMin
Network capture tools
- Recommended Wireshark the de-facto standard, cross-platform GUI for capturing and analyzing network traces
- Microsoft Network Monitor very easy to install and run Windows specific network capture tool.
- TCPDump probably the only tool you would run in production, ships with Linux/BSD/Unix systems
- Visual Roundtrip Analyzer - this is a very unique tool, a performance auditor with packet capture built in. Well worth a play, though I would be careful acting on some of the analysis.
Web load testing tools
- WCAT Lightweight tool by Microsoft for load testing sites
- JMeter Open source Java based web load tester
The future SPDY and beyond
- SPDY white paper - very important read, SPDY solves many of the performance problems inherit in HTTP
- RFC 3390 increasing TCP initcwnd to 10. The objection from Jim Gettys.
- pjax - pushState + Ajax - this is a relatively new technique for having 1 page apps that look and feel like multi page apps. This allows you to share layout and header/footer and js parsing between pages. Used at 37signals.
- My article about IW 10 (now enabled at Stack Overflow) - How to enable IW-10 on Windows.
It is true, usually the Golden Rule applies, optimising the backend is often the least bang for buck you can get. However, backend performance can not be ignored. Some sites are paying the largest amount of performance tax due to backend issues.
- recommended .NET memory profiler - My favourite memory profiler for .NET, it also works in production. If you have too many objects in your managed heap your whole app will start stalling. This will help you find it.
- recommended CPU Analyzer - a tool I wrote, allows you to track down WHY your CPU is pegged at 100% in production. (.NET only) This tool has saved us many many times.
- recommended - SQL Server Profiler I love the flexibility and power SQL Profiler offers, if you are running Microsoft SQL Server you really should learn to use it.
Important blogs and web resources
- (**Must read**) Steve Souders High Performance Web Sites: Steve is an authority on web performance, he works for Google and shares many of his stories on his blog
- The strangeloop blog: Strangeloop often share very interesting graphs, infographics and stories.
- The blaze.io blog: Excellent in-depth articles about web performance.
- Book of Speed: Great web performance primer, even delves into TCP.
- Velocity web performance conference - many talks and slides available
- (**Must read**) Navigation Timing API spec, already ships in Firefox, IE and Chrome, unfortunately very limited, only provides timings for the page (no timings on a per-resource basis)
- Walmart real user monitoring presentation - 100ms improvement lead to 1% increase in revenue.
- Stanford Data Mining presentation about performance at Amazon (ppt)
- How is caching implemented at Stack Overflow
Miscellaneous tools and links
- Stack Exchange Data Explorer - SEDE allows you to run db queries in your web browser and easily share results, we use it internally to perform analysis on our web logs (that are stored in a specific SQL Server instance). You can see a live demo here.
- Web Performance Cheat Sheet - a bunch of stats correlating performance to your site's success.
Note: I will be updating this list, if there is anything I missed, please let me know in a comment.