Making Your WordPress Website Fly: A Performance Optimization handout.
whether you’re working for a client or developing your own WordPress projects, you don’t need me to tell you that speed matters. A lot. And contrary to the well-known cliche, it’s really the lack of speed that kills when it comes to the web.
The power of WordPress is also its greatest weakness. WordPress’ theming and templating system abstracts the actual HTML away from a web developer’s grasp. Throw in the fact that external resources are pulled from a smattering of theme, child theme, and plugin directories, and then enqueued rather than hard-coded into the document head, and you’ve got a recipe for “how the hell do I optimize this?”.
Thankfully, there’s good news! You don’t have to manipulate website resources manually or revoke the media uploading privileges of your clients, contributors, and editors. You can optimize WordPress for performance and rest assured knowing that WordPress is going to hum.
Step-By-Step: How to Make a WordPress Website Fly
As we’ve covered, optimizing a WordPress website for maximum speed can be a bit complex. So let’s simplify things. In general, you’ll want to implement an optimization strategy that ticks all of the following boxes:
- Pick a quality web host
- Optimize JavaScript and CSS resources
- Optimize images
- Optimize delivery
Step 1: Opt for Quality Hosting
While we don’t offer hosting, we can offer some advice in that regard, and, considering our CEO’s position on affiliate sales, ours is one hosting opinion you can actually trust.
So, what does quality hosting look like? Well, for the sake of security and resource availability, it’s private. That doesn’t mean WordPress should never be hosted on a shared server, but shared hosting isn’t the right place for an income-generating website.
It may sound like I’m downing shared hosting, but I’m not. I have several personal projects hosted on shared servers. A shared server is a great cheap option for side projects, hobby sites, and such. However, if you run a site that enjoys north of 1,000 page views per day, generates significant income, or stores any sensitive information in the WordPress database, you need the best possible security and guaranteed resource availability. In addition, many quality web hosts build in page caching at the server level, which will beat plugin-enabled page caching every time.
WordPress-specific hosts like WP Engine, Flywheel, Kinsta, and Pagely are your best bet. However, if that’s outside of your price range, a budget-friendly VPS from a reputable host is a good fallback option. Alternatively, private cloud servers, such asa Digital Ocean droplet managed by Cloudways, offer a fast and private environment at a low price and are generating a lot of positive buzz in the WordPress development community right now.
Step 2: Optimize JavaScript and CSS Resources
Once you’ve taken care of the first speed bottleneck by picking a quality host, your next step is to configure CSS and JavaScript resources for maximum performance.
The basic idea behind optimizing CSS and JavaScript resources is really pretty simple:
- Move resources so that they only load when they are actually needed.
- Minify resources (i.e. make them as small as possible) by removing any unnecessary spaces and line breaks.
- Combine resources into as few files as possible to minimize the number of HTTP requests required to load your website.
So how do we actually go about doing that? Well, we’ve dedicated entire tutorials to this topic before and you should check those out if this process is unfamiliar to you, but the CliffNotes version goes like this:
- Install Hummingbird and run the file minification tool (Hummingbird > Minification) to load your site’s external resources.
- Start with all resources in their original position, un-minified, and uncombined (in Hummingbird, do not Include them yet).
- One by one, move resources to the footer. Check your site after moving each one to make sure you haven’t produced a flash of unstyled content (FOUC).
- Leave any resources that are needed for the initial page load in their original position or move them to the header. It’s better to leave a handful of resources in a render-blocking position than to produce a FOUC (up).
- Follow the same one-by-one process and minify as many resources as possible. In theory, you should be able to minify all resource. However, poorly-coded resources may sometimes break when minified.
- Finally, follow the same one-by-one process and combine (Include) as many resources as possible.
Yes, this is a time-consuming process. However, in the end, you will combine and minify as many resources as possible and leave only those resources that are needed for the initial page load in their original position. If your site relies on dozens of external scripts and stylesheets, the reduction in HTTP requests may have a dramatic impact on page speed.
Step 3: Optimize Images
Let’s imagine a “fictional” scenario.
You know that huge images can be a huge drag on page speed. So you optimize every image before uploading it. Then you bring on a blog editor who’s amazing, but (unbeknownst to you) has no clue about image optimization. Three months later you realize that you now have dozens of blog posts that load at a snail’s pace because they’re struggling under the load of megabyte-upon-megabyte of hi-res images. You’re filled with dread as you estimate the hours it will take you to optimize all of these images.
No worries! There’s an easy button for this situation: Smush.
Unlike the last step, this step is a breeze. Just install the plugin, configure a few settings, and bulk smush your images. In addition, once you’ve set it up Smush will auto-optimize any new images you upload. It’s a do-it-once-and-forget-it optimization technique that can have a profound impact on the page speed of image-heavy webpages.
If you want a step-by-step walk through the process, we can do that too: Slay All the Megabytes. Or, maybe you aren’t sold that Smush is the best image optimization plugin for WordPress. There was a time when we thought it was the best but wanted to make sure. So we compared Smush to other popular image optimization plugins in a benchmarked-test and published the results. You can check them out here.
Step 4: Optimize How Webpages Are Displayed to Visitors
At this point, you’re using quality hosting and you’ve optimized CSS files, JS resources, and images. Next, you can speed things up even further by optimizing website delivery. There are a variety of strategies you can use to accomplish this.
Page Caching
Page caching can reduce server load and page load time considerably. Every managed WordPress host I’m aware of caches static copies of your website files on the server. This beats plugin-based caching hands-down because the files are headed back to the visitor who requested them before WordPress even kicks into gear.
If your host doesn’t offer built-in caching, you can use a plugin. I’ve written an entire series on setting up W3 Total Cache. However, if you’d like a simpler solution, check out the premium plugin WP Rocket or one of the eight lesser-known caching plugins I put to the test a few weeks ago.
Browser Caching
Setting up browser caching completely eliminates multiple HTTP requests when a visitor to your site visits multiple pages that require the same resources. In effect, what browser caching does is tell your visitors’ browsers: “keep using these files until I tell you that there are updated versions available.” This means that your visitors will enjoy near-instantaneous subsequent views of the same page and faster loading of other pages that shared the same resources.
Hummingbird makes it trivially easy to enable browser caching. With Hummingbird installed, just go to Hummingbird > Browser Caching, set the duration for which resources should be cached (if unsure, stick with the eight days recommendation), select your server OS, and you’re set.
Compression
Gzip compression has become the de facto industry-standard way to compress website resources. Doing so minimizes file size, thereby trimming down on total website size and the length of time is takes a user to download all of those resources.
This is another optimization that you can set and forget with Hummingbird. With Hummingbird installed, just go to Hummingbird > GZIP Compression and start compressing.
CDN Integration
If you’re going to set up browser caching and use a CDN, you must integrate your browser cache settings with your CDN. If you use Cloudflare’s CDN service, you’re in luck. Hummingbird includes Cloudflare integration, so you can mirror your browser caching settings across the CDN right from your WordPress dashboard.
If you use a different CDN, say MaxCDN or KeyCDN, you can still use Hummingbird, but you’ll need to mirror your browser cache settings by accessing your CDN’s settings panel. Then, in your CDN settings, either match the browser caching duration or overrule it.
Summing Everything Up…
That sounds like a lot to do, right?
- Get quality hosting.
- Move, combine, and minify JavaScript and CSS resources.
- Optimize images.
- Optimize delivery by setting up page caching, browser caching, gzip compression, and integrating with your CDN.
The truth is, that is a lot to do. However, we can also make this whole process super simple by boiling it down to one sentence:
Optimize your WordPress website for speed by using high-quality managed WordPress hosting and properly configuring Hummingbird and WP Smush Pro.
Really, that’s it. Nail those three things — hosting, Hummingbird, and Smush — and your WordPress website will fly.
What About Using the Other Guys to Speed Up Your WordPress Site?
There are lots of other options for speeding up WordPress. Plugins like W3 Total Cache can do a lot of the same things Hummingbird does — albeit with a dramatically poorer user experience, if I do say so myself. Also, there are obviously a few other image optimization plugins out there considering that we benchmarked Smush against them.
Sure, the local guy makes beautiful cabinets, but IKEA makes great cabinets as well as everything else you need to outfit your entire house. If only IKEA would take a page out of our playbook, then you could get an entire houseful of furniture for the same price as kitchen cabinets from the local guy, but I digress.
Really, a better comparison is to look at what you get with WPMU DEV versus what you get with other multi-faceted WordPress product and service companies. I’m thinking of folks like Jetpack’s premium feature set or the suite of products and services offered by iThemes. Let’s see how speed-optimization with WPMU DEV compares to those guys.
Well, that right there really is the point.
So, what’s the point in this comparison? Obviously, Jetpack and iThemes aren’t even trying to match up to what WPMU DEV offers in this department.
When it comes to optimizing WordPress for speed you basically have two options:
- Find a variety of standalone plugins and figure out how to license them separately for every site where you use them, with every plugin having a different licensing structure.
- Optimize your site with Hummingbird and Smush, use them on as many sites as you wish, never worry about licensing, and get award-winning 24/7 support when any issues come up.
Performance is Important, But it Isn’t Everything
Speed isn’t everything. However, along with monitoring, security, backups, and SEO, site performance is one of five core needs every web developer must address.
You ignore any of these five core needs at your own peril, and if you’re a WPMU DEV member, there’s really no excuse for doing so. We give you the tools to address all five in one nice centrally-managed package.
While we think we’ve made a compelling case for why skysony should be your go-to WordPress performance framework, the question remains “how do we address the other four critical factors?” Stay tuned for that answer in the next post in this series.
