Hands On Improving Google PageSpeed

What Is Google PageSpeed?

Google PageSpeed is a free tool that assesses the performance and usability of your website for mobile and desktop platforms. It's extra important because Google uses it in determining key elements of our SEO ranking, i.e. how high we appear in their search results.

If you want more background about the benefits of increased site speed, read Moz's Why Site Speed Optimisation Should Be Part of Your SEO Strategy, which highlights, "...several case studies have shown faster loading pages strongly correlate to higher revenue."

In this tutorial, I'm going to walk you through some technical approaches to optimize your WordPress website's PageSpeed. While basic changes can be quite simple and easy, more comprehensive updates can actually be quite challenging.

Interestingly, custom websites may be easier to optimize than WordPress sites—it's because of the framework's extensive use of third-party themes and plugins. It's also based on an architecture that was designed before its popularity and relies on an imperfect architecture for backward compatibility.

Before we get started, please remember, I do try to participate in the discussions below. If you have a question or topic suggestion, please post a comment below or contact me on Twitter @reifman. I'm interested in your experience with WordPress and PageSpeed.

My Initial PageSpeed Score

For this tutorial, I'm going to focus on improving my personal website, JeffReifman.com.

A while back, my PageSpeed was Mobile 65 and Desktop 64 — not that great:

Note: here's the article to read if you're curious about the funny mobile screenshot with Russell Wilson.

Before we get started on making optimizations, let's talk about some of the basic WordPress performance factors.

Basic WordPress Performance

There are a few major ways to begin optimizing your WordPress site for performance and increased PageSpeed.

Theme Selection

The PageSpeed of various themes is greatly affected by the number and size of JavaScript files and CSS they use, the number of images used and their size, and the approach of their mobile implementation, i.e. typically responsive nowadays.

If you're in the market for a new WordPress theme and want to evaluate PageSpeed, you may be surprised that the scores for well-known themes often run in the 60s and 70s but also up to the 90s. Here are a couple of articles assessing themes and PageSpeed via ColorLib and WPMU. In any case, I expected higher.

I've used My Site My Way's Construct theme for several years. Interestingly, the company's support site went silent recently, and they've left no explanation for users.

However, because there will be no more updates to the theme, it makes it a bit easier for me to make some radical changes to its performance for this tutorial without having to deal with future code updates from the company. I'll get to this shortly.

Hosting Company

Using dedicated servers will very likely perform better than increasingly common and more affordable shared virtual servers. In the past, I've written about how to install WordPress at shared providers such as Digital Ocean. There's also the in-between of services like WP Engine, which offer an attention to developers and both shared and dedicated servers.

The quality of the host will matter too. A lot of bare-bones shared WordPress providers may provide inconsistent performance.

For example, I use the KnowHow theme on both Publishing with WordPress hosted at a Digital Ocean virtual server and Flee the Jungle hosted at WP Engine. The sites are fairly similar in content weight, e.g. text and image usage. The PageSpeed for Publishing with WordPress's PageSpeed is Mobile 73 and Desktop 88, while Flee the Jungle at WP Engine was a bit faster (Mobile 78 and Desktop 91); WP Engine's managed hosting is a bit faster than my self-hosting with a shared server.

I've also seen poor performance with Amazon's low-end AWS hosting. You get what you pay for.

Caching

WordPress caching is critical for performance, and I've regularly written about my favorites: W3TC and Varnish Cache, e.g. Optimizing WordPress with Varnish and W3 Total Cache.

Content Delivery Network (CDN)

Another service that's critical is a content delivery network. Earlier I wrote about Accelerate Your Content Delivery With KeyCDN for Envato Tuts+ and then decided to switch to them.

Image Optimization

Regularly reducing the dimensions and file size of images across WordPress is time-consuming yet critical.

I regularly use Acorn as a lightweight tool to quickly scale down images for the web. I laughed when someone tweeted recently that they'd just opened Photoshop and would be available for phone calls for awhile while it loaded—Acorn is small and fast. That Adobe subscription model is so slow to load—sorry, subscribers.

There are also automated image optimization plugins like WP-Smush. I recently began experimenting with KeyCDN's new Optimus. Also, here's WPMU's summary of the 10 Best Image Optimization Plugins to Speed Up Your WordPress Site.

Increasingly, I also access images on my post externally from Flickr. For example, when my post about Seattle's Amazon-driven neighborhood growth went viral on Slashdot, there were no performance issues or bandwidth costs for all the photos, because Flickr handled it.

You can read Google PageSpeed's Image optimization Guide, but I've increasingly found that Google help is overly research oriented (which is nice to have as a resource) but not very useful for resolving issues on your own. There may be one too many PhDs there and one too few actual users.

My Updated PageSpeed Scores

While I've always had W3TC and Varnish, adding KeyCDN and Optimus increased my PageSpeed to Mobile 72 and Desktop 82, a good improvement from 65 and 64:

Interestingly, Google's image caching complaints seem as if they can go on indefinitely, no matter what you improve. For this tutorial, I experimented with optimizing some of the identified remaining offenders to see what would happen. The result was interesting, and I'll tell you more about it shortly.

The PageSpeed Optimization Challenge

If you've done all the major basics above, improving your PageSpeed with WordPress turns out to require significant effort and can be quite time-consuming. 

The Challenge of WordPress

A static site usually has one file with CSS and JS includes that can be easily minified and combined. WordPress is a lot more complex.

So much is created dynamically through WordPress's—ahem—less than perfect architecture. It can take time to find where files are being created, whether they are in the themes or plugins, and how to address these issues. It turns out that when you have seven plugins including JavaScript files and you want to minimize and combine them into one include while allowing regular plugin upgrades, it's quite a challenge.

Using Minification

HTML Minification

Updating my W3TC HTML minify settings quickly resolved PageSpeed's complaint about that.

CSS Minification

For CSS, I had to individually add the files PageSpeed alerted me about to W3TC's CSS File Management. W3TC then began minifying my CSS and combining the named files into a single file to include.

This resolved PageSpeed's CSS minification requirement.

It also reduced the number of CSS files being reported for render blocking from seven to four theme-related files (listed first under Optimize CSS Delivery):

The three remaining files were from plugin directories outside of my theme (which we'll explore later):

I hope this gives you a sense of the rabbit's hole that WordPress PageSpeed optimization quickly becomes. 

JavaScript Minification

While minifying and merging CSS is generally pretty easy, JavaScript tends to fail a lot when you try to do this, creating major, site-breaking bugs.

Interestingly, PageSpeed now offers complete zipped downloads of its compressed versions of your files which it doesn't like.

It listed ten of my JS files that it wanted me to fix:

For reference, here are more of Google PageSpeed's minimization resources for HTML, CSS and JS. I also made use of Refresh SF, which provides easy web access to various compression tools.

Compressing and combining JavaScript can definitely create bugs, so I had to take things step by step. Using W3TC's JS File Management, I minified and combined the seven JS files within the Construct theme:

This didn't allow me to address my plugins' JS files or problems I was seeing with a mysterious unfindable externally hosted base.js file. Let's move on to Render Blocking problems and then return to JS minification after.

Eliminating Render Blocking

If you have a large variety of files that need to be loaded to style (CSS) and activate (JS) the functionality of your web page, most browsers will slow down after four resources are requested in parallel. 

Here's an example of the CSS render blocking complaint in PageSpeed:

While W3TC had combined many of them into its include.c46b63.css, the next three above were from my plugins.

Blogger Justin Tadlock offered some guidance explaining how to ask WordPress not to load the CSS files that my plugins had enqueued for loading. The answer is to deregister them and then load a combined file on your own.

Here's my Table of Contents plugin enqueuing its JS and CSS files:

1

/**

2

* Register and load CSS and javascript files for frontend.

3

*/

4

function wp_enqueue_scripts()

5

{

6

    $js_vars = array();

7

8

	// register our CSS and scripts

9

	wp_register_style( 'toc-screen', $this->path . '/screen.min.css', array(), TOC_VERSION );

10

	wp_register_script( 'toc-front', $this->path . '/front.min.js', array('jquery'), TOC_VERSION, true );

11

12

	// enqueue them!

13

	if ( !$this->options['exclude_css'] ) wp_enqueue_style("toc-screen");

14

15

	if ( $this->options['smooth_scroll'] ) $js_vars['smooth_scroll'] = true;

16

	wp_enqueue_script( 'toc-front' );

Following Tadlock's suggestion, I deregistered my plugin includes in my theme's functions.php, first the CSS—you have to find the references used by the plugin developer:

1

  add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

2

3

  function my_deregister_styles() {

4

      wp_deregister_style( 'toc-screen' );

5

  	wp_deregister_style( 'blogsynthesis_jss_css' );

6

  	wp_deregister_style( 'edd-styles' );  	

7

  }

I manually created a combined CSS files with those three plugin stylesheets. Then, I asked W3TC to minify and combine that file into its own mega-stylesheet:

There is a major issue here in that when I update my plugins, I may need to update this combined CSS file and its accompanying JS files.

Here's a blog post with some other approaches you can use for these challenges. 

Using Tadlock's approach, here's what the PageSpeed render blocking looked like afterwards:

I followed the same steps for JS files, just a bit more carefully. Gradually, my PageSpeed's JS complaint for my site became fairly minor:

However, as you can see below, it was also complaining about browser caching issues with JS files I couldn't find links to in my codebase such as ad_status.js from Doubleclick.

Removing a Legacy YouTube Player Embed

Eventually, I figured out that both the JS minification issue and this caching issue were related to my use of an external YouTube video player.

While I was curious to try a small fix suggested here to prevent video from loading without user action, I decided to just remove the video from my home page slideshow.

It's likely that the way my Construct theme embedded YouTube files was a legacy solution. YouTube's HTML5 support may work a lot better now. Still, it's kind of funny how a Google service impacts performance scoring of another Google service.

Removing the one feature on my home page that embedded a YouTube video solved a few problems:

Since I don't want you to miss out on seeing my better half before I was corrupted by WordPress, I'll include the video here. I used to be a nice guy.

NBC Nightly News on Habitat Espresso

Here's what was happening:

• The externally hosted s.ytimg.com base.js file it wanted compressed was generated by this YouTube video embed.
• And the static.doubleclick.net/instream/ad_status.js was too. It took a while to track the location of this file down. The Safari developer console helped, with me seeing both base.js and ad_status.js within the YouTube frame (so deep in the PageSpeed improvement rabbit hole was I now that Alice introduced herself to me):

Once the earlier JS changes were made and the video removed, the JavaScript minification problem resolved for my PageSpeed master:

The browser caching error with Doubleclick shown below disappeared too.

Using Browser Caching

Now, I actually only needed to cache gpt.js and ga.js, two more externally hosted Google services:

This turned out to be quite a big obstacle and required a lot of complexity to fully resolve these issues. The best solution is to locally host a copy of Google's scripts for Analytics and DFP and use cron scripts to regularly update them on your server. Alice began to get bored with me—hope you're still following along.

I looked at other themes I use with the Google Analytics Plugin (Construct has settings for Analytics) and they didn't address this either.

So, I made local copies of the scripts for Google Analytics and Google DFP, and shortly after, my browser caching was resolved in PageSpeed:

Here's more information from Google on Browser Caching, again a very deep technical resource without much guidance for WordPress administrators. 

Google could provide common groupings of its popular JavaScript files minified and combined to better support publishers' PageSpeed. It would help too if they weren't loading their files individually and obscurely in scripts.

Let's briefly return to PageSpeed image size complaints before wrapping up.

Returning to Image Optimization

Google PageSpeed's image suggestions can actually weaken the usability of your site. Here's one example, a featured image I hosted on my home page. 

For my posts to appear in Facebook with a thumbnail image, the social network requires minimum dimensions of 200 pixels on its shortest side. My version is 281 x 200 (shown here slightly adjusted for Tuts+ requirements):

And, here's the version provided by PageSpeed in its zipped download:

You can see that the quality is even worse, but more importantly PageSpeed wants me to shrink the image to a dimension that Facebook wouldn't accept to show in its posts.

Ultimately, I chose to leave my site with a handful of PageSpeed image optimization complaints, lowering my scores.

In Closing

After all of this work, where did my site end up?

My Final PageSpeed Scores

Mobile PageSpeed

The final PageSpeed scores included Mobile 70, showing some of the remaining complaints below:

Here are the image optimizations remaining:

And here is a summary of all the passed rules:

Also, here are the final UX scores. Most sites don't have big problems with these, so I didn't address them today:

Desktop PageSpeed

The final Desktop score was 86, not bad:

JavaScript is finicky. I was never able to successfully minify and combine those last two files into the first. Even leaving them uncompressed never worked. Working with themes and plugins is hard. It would have required several days of dedicated work to resolve this.

Here are its image file size complaints:

Ultimately, optimizing my PageSpeed took a lot of time and effort and left my site vulnerable to future plugin and Google script updates. A lot of this work is quite confounding, detail-oriented and time-consuming. It's also a bit crazy-making and mind-numbing. Thanks Google.

The PageSpeed of Other Major Sites

PageSpeed isn't everything. Content matters too. Here are a few well-known sites and their PageSpeed. The results will surprise you.

John Gruber's Daring Fireball

Daring Fireball (DF) is one of the fastest content-focused blogs. It promotes advertisers in a minimal way. The pages run light and fast. Gruber's CMS is a customized version of Movable Type. The scores are just a tad better than my site. DF also generates a ton of revenue with minimal advertising.

The New York Times

Obviously a major news organization, they have terrible PageSpeed scores:

The Seattle Times

Astoundingly, our local rag with its awful advertisement and subscription bounce model is much worse:

B&H Photo

A popular e-commerce site, B&H Photo, has a terrible mobile score and a desktop score just below mine:

Amazon

You might have heard of this company in my recent essay How to Make WordPress Sites Different by Geography—they sell a lot of stuff online. My PageSpeed scores are significantly higher than theirs:

What's Next?

In the future, I'll be looking at a few more enhancements to improve my site's PageSpeed:

• Migrating to a new WordPress theme. Primarily, I'm looking for a cleaner, higher performing and responsive design with fast PageSpeeds.
• Upgrading my server to PHP7. The upgrade promises nearly 2x performance improvements. It's not simple to upgrade prior to the bundled Ubuntu release, but it's not too difficult.
• Upgrading my server to Varnish4. The upgrade requires some reworking of configuration files, and I'm unsure of its compatibility with W3 Total Cache, but I'm willing to give it a try.
• Review my PageSpeed on all the pages of my site, not just the home page.

If I don't migrate themes shortly, I'll need to go implement that cron script to synchronize my self-hosted Google scripts for Analytics and DFP and figure out how to monitor plugin updates for JS and CSS changes. I might have to revert these specific PageSpeed gains, honestly.

If you have questions, please post them below. Or, you can contact me on Twitter @reifman. Please check out my Envato Tuts+ instructor page to see other tutorials I've written, such as my startup series (Building Your Startup With PHP).

Related Links

• Google PageSpeed
• Web Page Test
• The Moz Guide to Page Speed