On Episode 4 of the ATX Web Show, I interviewed Kyle Simpson and we discussed Web Performance and Google’s plan to “Make the Web Faster”. Since then, Google has announced they will start rewarding your site’s page speed and they hint that the bar is set at ~1.4 seconds.

I was thunderstruck. We always strive for better, but I typically found a 3-5 (even 7) second page load great. Late that night, I stayed up a few hours fiddling with The ATX Web Show and increased site performance by ~500%1.

Since seeing those results, I see the web in milliseconds now. If you never considered optimization a necessity, now is the time to re-evaluate that. 80% of the time users wait for a webpage is because of the frontend2. The goal isn’t to fit under some imaginary kilobyte threshold, the goal is to make sure that everything is as small as possible. Reduce Filesizes, Reduce Requests, and Enable Caching.

5 Steps to a Faster Website

I documented the steps I took to increase my YSlow and Page Speed grades without getting into costly CDNs and such. A lot of sites will tell you to just install a cache plugin. And while you should do that (see Step 5), it’s important to do that after you’ve optimized or else you’re just polishing a turd, curing a symptom not the disease, putting lipstick on a pig or whatever analogy you want to use. Very little of this is WordPress specific so even you dweebs on Expression Engine can optimize your sites.

Step 0: Install the Right Tools.

  • Webkit Web Inspector
    You’ll need to download Chrome or Safari and then enable Web Inspector. The Web Inspector’s Resources Panel has beautiful visualizations of your site’s page load waterfall and is enjoyable for benchmarking your progress after each step.
  • Firefox
    If you don’t have this, you might be on the wrong website. You need this to install Firebug.
  • Firebug
    You should have this already, but you need this to install YSlow and Page Speed.
  • YSlow
    A Firebug plugin from Yahoo. It ranks your page speed and gives you a grade on various critera.
  • Page Speed
    A Firebug plugin from Google. Page Speed is very similar to YSlow and will grade your site on various criteria and explain to you how you should improve. It’s my favorite of the two.
  • Webmaster Tools
    If you have access, register your site with Webmaster Tools. In the Labs > Site Performance section, it will give a graph of your page load speeds recorded by Google over time.

Step 1: Minify & Optimize Your CSS

This is just a 3 step process and it’s here that I saw the majority of the site’s weight drop off. There’s about a 10% chance you’ll break something here. If you’re uncomfortable take it slow, line by line, and refresh a lot.

Minify CSS

Open up Page Speed and click “Analyze Performance”. Find the section titled “Minify CSS”. You will see download links for optimized versions of every CSS file your page calls. Replace your bloated CSS with this.

For WordPress, you'll have to keep the theme declaration block at the top.

Unfortunately in the case of WordPress, most blogs rely on plugins which load their own assets that are rarely optimized. You may have to overwrite the CSS in some plugins. In a perfect world, WordPress plugins would come with pre-optimized assets.

This is maybe not advisable, but I hack into plugins and comment out the CSS and Javascripts they load. I’d rather write my own CSS. Be prepared to do this after every plugin update.

Don’t Over Qualify. Use Efficient CSS Selectors.

I always assumed it was best practice to be explicit when writing CSS, but I was wrong. It’s called “Over Qualifying” and it’s more work for your browser to sort out. Unique classes and unique elements will win in the speed game.

#header nav ul li a { ... }
/* bad. way too many selectors. */

#header a { ... }
/* better. more direct. */

ul.commentlist { ... }
/* bad. too conjoined. */

.commentlist { ... }
/* better. specific enough. */

Chris Coyier of CSS-Tricks has a great write up on Efficiently Rendering CSS.

Post-Minify CSS Results

I thought I was doing myself a favor making my CSS human readable, but it was adding an extra 180KB. You can take it a step further and strip out unused classes, but I personally prefer having some generic classes in my stack (like tables).

  Total Size Load Time
Pre-Minify 248.96KB 2.57s
Post-Minify 70.82KB 2.07s

Step 2: Smush & Optimize Images

Your images are too fat. Photoshop’s "Save for Web" is actually pretty good at optimizing, but there's room for more. Your images have huge amounts of useless metadata that can be stripped out. This couldn’t be easier to fix. Here are some tools to smush your images.

  1. Page Speed gives you a lossless smushed version of each image that can be optimized! Save As… and upload.
  2. YSlow > Tools > All Smush.it - this will batch shrink the images on the page and maintain folder structure. It's unbelievably convenient.
  3. ImageOptim is a great offline tool (for Mac) that you can batch run whole directories with. Any image you upload to the internet should go through this before you upload from now on.

Sometimes you'll see that you're only saving 400B and you may think "What's the point?" Pay attention to percentages. If an image can be 9% smaller, that means your users will get that image ~9% faster! Math.

Be sure you make backups before you replace images or smush whole directories, just in case.

If you use Adobe RGB color profiles for your images, some optimizers strip out the profile leaving you with a desaturated image. The Adobe RGB profile adds ~50KB+ and is intended for print. Use sRGB instead.

Serve Properly Scaled Images

This is pretty elementary. Where you can, serve a 200x200px wide image instead of scaling down a 400x400px wide image to 200x200px. Larger images take longer to download and resizing takes longer to render in browser.

Specify Image Dimensions

I had grown accustom being non-committal about image dimensions, but Page Speed recommends that you specify image height and width because it’s less for the browser to sort out. It gives you the rendered dimensions and you add that to your <img> tags. Total time spent completing task: 2 minutes.

SpriteMe

Use sprites. Spend some time and figure it out. It can reduce tons on HTTP Requests and make your site even faster. Google performance guru, Steve Souders, created a tool called SpriteMe that does this for you. Install the bookmarklet, and click it on your homepage, then it’ll do the rest of the work. It will pack up your sprited images, and give you some CSS to replace in your stylesheet. Skills Required: Math.

Post-Smush Image Results

Most of my savings here were due to smushing my images. You'll see a direct correlation. 17% less kilobytes resulted in a 23% speed increase.

  Total Size Load Time
Pre-Optimize 70.82KB 2.07s
Post-Optimize 54.66KB 1.60s

Step 3: Minify & Optimize JS

unicorn_3Just like CSS, Page Speed gives download links for minified versions of your javascript right there in the window. Grab the minified versions and drop them in your site. There's, again, a 10% chance you'll break something, but just take it slow and refresh often. And again, you might have break into plugins and comment out their swill.

One JS Library to Rule Them All.

If you're loading in jQuery, Mootools, and Prototype, you're doing something wrong. These libraries have a lot of functional overlap so you're basically repeating yourself over and over and wasting tons of bandwidth. Have a good hard look at your plugin stack. Find out which plugins are loading what library (use paper if you have to) and try to target a single library (*ahem* jQuery *ahem*). Search for alternative plugins that use the your library of choice.

Post-Minify JS Results

Your results will vary. If you eliminated multiple JS libraries, you may see savings in the hundreds of KBs.

  Total Size Load Time
Pre-Minify 54.66KB 1.60s
Post-Minify 39.28KB 1.53s

39KB is what I used to call a small image… but now, it’s a full website.

Step 4: Enable Browser Cache & GZIP in Apache with .htaccess

This took me a long time to master. I was ignorant to its proper implementation, I googled around and found a few good resources.[^fn3] If you're on Apache (you probably are), add the following to your .htaccess file after your WordPress rules. If it’s all gibberish to you, that’s fine. Basically it does the following:

  1. Detects mod_deflate and GZIPs various mime types.
  2. Detects mod_expires and sets an expiration date for each type of asset.
  3. Detects mod_headers and sets Browser Cache age limits for your assets.

I've used this on about a dozen sites on a handful of hosts and had no problem. It will simply ignore what it can't support. If you see improvements, please comment over at GitHub.

Post-GZIP & Browser Cache Results

The browser is now taking the brunt of the load and storage and you’ll start feeling the snappiness. The browser isn’t re-downloading images on subsequent pages, like background images, since they already exist in its cache. You’ll notice in your Inspector that you’re page loads have less long lines and more short 0 byte blips because the file is being pulled from your browser cache.

I did run into problems where GZIP showed true on GIDZipTest & HTTP Compression Test but false on Page Speed. Page Speed eventually caught up, but I was unable to get a good metric.

Step 5: WordPress Plugins for Performance

Here are some plugins to install on our final step on the way to Web Performant WordPress. Like I said at the top of the article, don’t rely on plugins to fix your sloppy code and your poor craftsmanship. Your site needs good bones. And your client deserves at least that.

  1. WP Minify

    WP Minify is a great plugin that will combine and minify all your javascript files or all your CSS files. Basically, everything I told you to do in Steps 1 and 3. If you're lazy and skipped that section and just came here, I'm sad for your clients.

    I've found this great for serving minified CSS that I had to keep human readable in the theme. As far as Javascript goes, it could be my problem but, I've never had a plugin successfully combine scripts and have them all still working in the end. Try it! If you're able to squeeze all your javascript into one file successfully, I applaud you.

  2. WP Super Cache

    Now that your site is optimized, you'll notice on your page load waterfall one of the longest part of your load is probably the first blue line, your HTML. This is because your site is taking a huge roundtrip:

    • Client Request → Wordpress Server → Database → Wordpress Server → Client
    Turning on caching will take out that trip to the database.

    • Client Request → Wordpress Server → Client
    FASTER! It actually does quite a bit more but this is the simplified explanation.

    I've found WP Super Cache to be wonderful for this and I highly recommend it. It's a bit of a pain to install as you have to grant temporary permission to some directories to write, add a line to your wp-config.php, and then add some more to your .htaccess. There's a 30% chance you'll whitescreen your WordPress install, but just follow the directions and the end result is once you turn it on your visitors will be served HTML in milliseconds.

Final Results

Your results may vary, but I promise you’ll be on your way to a better web experience for all your users. It’s like The Biggest Loser for websites. What took me 4 hours of googling, writing blog notes and roadblocks, could probably only take you under 1 hour.

  Total Size Load Time
BEFORE 248.96KB 2.57s
AFTER ~36KB 796ms

You are now one hour away from a better website. There’s no excuse to not be doing this.

  1. My stats here are based on the old version of the ATX Web Show. ↩

  2. From the Yahoo! Developer Network Blog: High Performance Web Sites: The Importance of Front-End Performance ↩