Jared Smith, BoomTown @jaredwsmith

WordPress at Peak Performance

Originally presented at WordPress Charleston’s August 2013 meeting; revised May 2014 for WordCamp Charleston

Why Do We Care?

• Nobody likes a slow site — you want people to come back, right?

• Conserving resources = less money spent on server horsepower

• Google takes site speed into consideration for Web searches

First, Get The Most Out of What You’ve Got

Cache Rules Everything Around Me

• Your web server can and should tell the browser how to cache things like images, scripts, and CSS stylesheets if you configure it to do so

• Less of an issue if using a content delivery network…more on that later!

Good Cache Practices• Set far-future expires headers on images, stylesheets, and

scripts. ‘Expires’ headers tell the browser how long to hold onto an object; setting these headers further into the future help browsers hold onto this content longer.

• Check Cache-Control headers. These headers instruct the browser on how to cache assets it downloads; you can fine-tune these for specific situations as well.

• Set Entity Tags (ETags). ETags can help identify versions of an asset to help ensure content freshness.

Plugins like W3 Total Cache can help set these for you, so no monkeying around with the web server is necessary!

Caching pluginsWordPress can be tuned to do a lot less work to serve up pages, conserving resources on your server and helping you get more mileage out of it. Caching plugins are a great way to easily accomplish this.

• WP Super Cache is a great start for full-page caching and works fairly well on most shared hosts; it’s easy to configure and typically trouble-free; http://wordpress.org/plugins/wp-super-cache/

• W3 Total Cache is the most comprehensive; you can get a lot out of it especially on a VPS or dedicated server, but it requires fine-tuned configuration; http://wordpress.org/plugins/w3-total-cache/

Never, ever, ever run two caching plugins at the same time! You’ll shoot yourself in the foot.

Tuning W3 Total Cache• On shared hosts, there’s not typically much you can do. Disk (enhanced)

caching for pages will get you some gains.

• For those of you with Virtual Private Servers (VPS) or dedicated machines, use APC where you can to store things like the object cache and database cache, but watch that memory usage if you’re on a low-memory VPS.

• W3 Total Cache can integrate with many content delivery networks including CloudFront and MaxCDN (more on CDN in a few)

• Ensure browser caching options are enabled

• Installation guide: http://wordpress.org/plugins/w3-total-cache/installation/

One size does not fit all. Certain use cases will require different caching strategies, so be sure to test and experiment as needed!

Frontend Optimization

• Tuning the server and caching WordPress is great, but if you are loading jQuery three times...

• Check for and deactivate any plugins you don’t use -- these often litter every page load with scripts, some unnecessary

• Make sure plugins and themes are using wp_enqueue_script to load JavaScript; this ensures WordPress only loads certain scripts once

Mind Your Scripts and Styles

• Generally, most scripts should load at the footer of the page. Loading scripts in the header or body (with the exception of a few, notably Google Analytics) can block page load

• Don’t use inline CSS if you can at all help it

• Minify your CSS and JavaScript files; W3 Total Cache can do this

• Make sure gzip compression is turned on to reduce the amount of bandwidth you use; again, W3 Total Cache makes this easy to take care of

• Test your site’s frontend with tools like YSlow (http://developer.yahoo.com/yslow/) and Google Page Speed (https://developers.google.com/speed/pagespeed/)

Content Delivery Networks (CDNs)

• Content delivery networks are a special kind of cache, most often used for static assets such as scripts, styles, and images, that distribute your content over several nodes in different locations

• Properly configured CDNs will route traffic to the closest server, geographically speaking, eliminating as much latency as possible

CDN Services• Photon; part of Jetpack, free to use: distributes your media

library images over WordPress.com’s CDN, but it does not distribute your theme files. http://wordpress.org/plugins/jetpack/

• MaxCDN: Well supported by W3 Total Cache and overall in the WordPress community. Many large blogs use MaxCDN and costs are reasonable (using flat monthly fees). http://www.maxcdn.com

• Amazon CloudFront: Distribute your static files over Amazon’s network; costs are reasonable but aren’t flat -- you pay for the bandwidth you use. http://aws.amazon.com/cloudfront/

A Few Other Items…• Cut back on how much you write to your

access and error logs to reduce disk I/O (if at all possible, anyway)

• Make sure you have a favicon — 404s are expensive!

• Speaking of 404s, make sure you comb your site occasionally for broken links or broken images

Where You Host MattersOr: Eventually, You’ll Need To Upgrade

The Pitfalls of Shared Hosts

• Shared hosts are great inexpensive ways to get started with self-hosted WordPress

• But apply some substantial traffic…and you quickly realize that you’re getting what you pay for.

• It’s called shared hosting for a reason: you share a server with many, many other sites. If one makes, say, the front page of Reddit, it’s like everyone did

A Few Upgrade Paths

Managed WordPress Hosting

• They take care of (most) of the technical stuff for you!

• Often no caching plugins to deal with, other benefits such as a content delivery network (CDN) for your static assets

Popular Managed Hosts

• WordPress.com is the most popular hosted service

• WPEngine: Managed WordPress hosting that gives much more flexibility than WordPress.com. Pricing tiered by bandwidth usage. http://www.wpengine.com

• DreamPress: New service from DreamHost geared directly toward WordPress hosting. Pricing flat at $19.95/mo. http://dreamhost.com

Virtual Private Servers• Your own private slice of a larger server

• Many VPS hosts give direct access to the server for maximum flexibility

• Some VPS hosts come with a control panel similar to shared hosts; others leave you to your own devices

• In many cases, very painless to scale up and down as your traffic and/or budget require

VPS Providers

• Many hosts with shared plans also have VPS plans: DreamHost, HostGator are two I’ve used

• Linode, DigitalOcean: Serious VPS for geeks — not a lot of hand-holding but tremendous flexibility

Dedicated Servers

• For the highest traffic cases (and the budgets to match)

• A well-configured VPS can stave off the need for a dedicated server for quite some time

• Rackspace, Softlayer and even DreamHost and HostGator offer dedicated server plans

Measure!

Tools for Measurement• YSlow - The gold standard for measuring site performance.

Plugs into Firefox and Chrome, tests your site for potential pitfalls, and gives you a grade.

• Google Page Speed - Google’s page grade service works similarly to YSlow. Integrates into Google Analytics.

• New Relic - measures app performance on the server side as well as in the browser

• Catchpoint - even more advanced! will periodically hit pages you define and generate pretty waterfall graphs to show you where your bottlenecks are

Questions?

Jared Smith

jared@jaredwsmith.com http://jaredwsmith.com http://boomtownroi.com !Twitter: @jaredwsmith