Earlier this month I attended a great online conference: CSS Summit 2012. This 3-day conference was well worth the money and I hope to attend next year too.
One of the most informative sessions was led by Nicole Sullivan, Essential Tools for UI Performance. I took a lot of notes and used them to devise a simple and quick performance testing guide for my company. Since then, I’ve done performance testing for two clients and tweaked my process. I was able to reduce load time from 9 to <2 seconds for one site, and from 4 to <1.5 seconds for the other.
- I use Chrome as my primary browser for development, so Chrome Developer Tools comes first.
- For overall performance testing from different physical locations: http://www.webpagetest.org
- For checking compression (gzip): http://www.whatsmyip.org/http-compression-test/
- Checking load time: http://tools.pingdom.com/fpt/
- For optimizing images: http://tinypng.org/, http://www.jpegmini.com/ or PNGGauntlet
I know some of these are redundant, but I like to get second opinions.
1) Do a Chrome web performance audit.
Run the Timeline recorder on the Frames setting to see the waterfall, and see if anything is taking an unusually long time to load (view detailed guide). You can use the Resources tab to see every file, stylesheet, image, database and script in use on the page.
Use the Network tool, after first disabling caching (use the checkbox in the Settings, gear icon in lower right corner), to see what’s being downloaded on page load (view detailed guide). Turn on record and reload. Does anything stand out? Is anything in particular dragging performance down? Are images too big? Is anything unnecessary?
Do the Web Page Performance and Network Utilization audit. Fix as many of the high priority items as possible. Note that some of these are server-side and can’t be done for some clients, so do what you can.
Install PageSpeed and/or Yslow and run and analysis. Fix as many of the high priority items as possible, then work on medium-priority ones.
2) Do an overall performance test at http://www.webpagetest.org.
Pay attention to the five factors at top: first time byte, keep-alive, compress text, compress images and cache static content. If any need attention, do what you can.
3) Check load time at http://tools.pingdom.com/fpt/.
Check load time from US and European locations. View detailed load times for page elements in the Waterfall tab, and check the Performance Grade tab to see what specifically you should focus on.
4) See if compression is working at http://www.whatsmyip.org/http-compression-test/
Tests for gzip compression. If gzip is not working and is enabled in Apache, go to cPanel > Optimize Website and turn it on for the site, if you have that option.
5) Check the CSS at http://www.csslint.net.
Allow * and _ hacks, otherwise the default settings are fine.
6) If using WordPress:
If using W3 Total Cache, set Page Caching to Basic Disk instead of Enhanced Disk, not sure why this works but sometimes it makes a noticeable difference. Minify HTML, CSS and JS. Combine CSS and JS.
Try a plugin called P3 Performance Profiler to check plugin effects on load time. Remove or replace unused or slow plugins.
Deregister unneeded scripts and stylesheets where possible.
7) Check the host.
Some hosts are slow. Get a host near your target audience.