Web Performant WordPress

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 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.

Learning Point: 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. 5 selectors is way too many. */

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

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

  .commentlist { ... }
  /* better. just the class selector should be specific enough. more agile too.*/

I covered this briefly, but Chris Coyier of CSS-Tricks has a great write up on Efficiently Rendering CSS.

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.

Step 3: Minify & Optimize JS

Just 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.

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.³ 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.

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.

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.

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.