Performance testing

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.

My Toolkit

My Process

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.

I’m currently working on building a good responsive base version of the Theme Hybrid child theme I use as the starting point for most WordPress sites. To that end, today I destroyed a project-in-progress to rebuild it responsively. It’s going well so far, but I’m not close to being done. 

One thing that is complete: I now have a responsive menu thanks to a little jQuery script called TinyNav.js. This automatically converts any ul or ol-based navigation menu to a select menu. It was very easy to do except for one thing that wasn’t clear from the documentation, which I’ll explain below.

First download TinyNav.js from the link above and upload it to your theme directory. Then in the head section of your theme, connect to the script:

Then add this, changing #menu-primary to the ul id in your WordPress menu. The second part of this makes the current_page_item appear in the select menu by default.

Finally, open up tinynav.js. This was the tricky part because it wasn’t explained clearly. You’re going to need to make one change: the first occurrence of ‘selected’ needs to be changed to ‘current_page_item’ and then the first part of the script should look like this:

Note that that’s just part of the first line in the minified script…

Now you’ll use media queries to control the appearance of the select menu and the hiding of the main menu, perhaps like this:

And you can style select.tinynav in CSS. Enjoy!

Coda Slider has been around for awhile, originally released back in 2007. But on a recent project, a client specifically requested we use it in a redesign. It’s actually really simple to customize and works well down to IE7 (although IE7 would require some CSS adjustments that I didn’t do for this tutorial. IE8 looked fine).

Coda Slider screenshot

The nicest thing about this slider is that it is basically a sliding wrapper for your HTML. You can add forms, text, images, anything you need into each panel. Other features:

  • Links and buttons are clickable.
  • You can use previous/next graphical arrows or text links.
  • You can use dynamic tabs, which is what I’ve modified in the demo.

The demo linked below shows the version of the slider I made for my client, and you can also get my customized CSS file. Download Coda Slider 3 from Github.

View Demo Get CSS Download Source

Installation

Installation is really simple, just add this to the ‘head’ section (it does need to be in the head, the slider didn’t work when I put it in the footer).

I’ve turned off arrows and turned on Dynamic Tabs; view the other advanced settings here: http://kevinbatdorf.github.com/codaslider/.

Customizing the Dynamic Tabs

The HTML element with class=”title” is used for the dynamic tabs. I used h2 and then hid this element in CSS so it won’t appear within the panel content. Then in coda-slider.css I modified .coda-nav like this to put the nav links down in the bottom right corner:

This is a very simple slider but the fact that you can use HTML in it is a big plus. It’s easy to customize too. Enjoy!