Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design en consultancy

blog

  1. Home
  2. blog
  3. lees
  4. Hands On Improving Google PageSpeed
  • like 9 28

    Hands On Improving Google PageSpeed

    1. April 2016
    2. Daily
    3. gelezen 938

    Final product image
    What You'll Be Creating

    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:

    Optimizing PageSpeed - Initial Mobile

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

    Optimizing PageSpeed - Initial Desktop

    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.

    MySiteMyWay Discontinued - User Forum Erupts

    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.

    Google PageSpeed improved with 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.

    Optimizing PageSpeed - KeyCDN Dashboard

    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:

    Optimizing PageSpeed - Updated Scores

    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.

    Optimizing PageSpeed - Minify HTML with W3TC

    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.

    Optimizing PageSpeed - Minify CSS

    This resolved PageSpeed's CSS minification requirement.

    Optimizing PageSpeed - Post HTML and CSS Minify Scores

    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):

    Optimizing PageSpeed - Render Blocking After Minifying CSS

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

    Optimizing PageSpeed - CSS Files from Plugins

    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.

    Optimizing PageSpeed - Download optimized files

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

    Optimizing PageSpeed - Downloaded Files

    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:

    Google PageSpeed - W3TC JS File Management

    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:

    Google Page Speed - CSS Render Blocking

    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:

    /**
* Register and load CSS and javascript files for frontend.
*/
function wp_enqueue_scripts()
{
    $js_vars = array();
	
	// register our CSS and scripts
	wp_register_style( 'toc-screen', $this->path . '/screen.min.css', array(), TOC_VERSION );
	wp_register_script( 'toc-front', $this->path . '/front.min.js', array('jquery'), TOC_VERSION, true );
	
	// enqueue them!
	if ( !$this->options['exclude_css'] ) wp_enqueue_style("toc-screen");
	
	if ( $this->options['smooth_scroll'] ) $js_vars['smooth_scroll'] = true;
	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:

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

  function my_deregister_styles() {
      wp_deregister_style( 'toc-screen' );
  	wp_deregister_style( 'blogsynthesis_jss_css' );
  	wp_deregister_style( 'edd-styles' );  	
  }

    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:

    Google PageSpeed - W3TC Combine CSS

    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:

    Optimizing PageSpeed

    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:

    Optimizing PageSpeed - JavaScript Minify Results

    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.

    Google PageSpeed - Leverage Browser Caching

    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:

    Optimizing PageSpeed - Troublesome YouTube on my home page

    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.

    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):
    Optimizing PageSpeed - Safari Developer Console

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

    Optimizing PageSpeed - Minify JavaScript Resolved

    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:

    Optimizing PageSpeed

    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:

    Optimizing PageSpeed - Local use of Google Scripts

    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):

    Jeff Reifman Featured Image on Home Page

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

    Google Page Speed Recommended Jeff Reifman Featured Image on Home Page

    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:

    Optimizing PageSpeed - Final Scores Mobile

    Here are the image optimizations remaining:

    Optimizing PageSpeed - Final Scores Mobile with Image issues

    And here is a summary of all the passed rules:

    Optimizing PageSpeed - Final Scores 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:

    Optimizing PageSpeed

    Desktop PageSpeed

    The final Desktop score was 86, not bad:

    Google PageSpeed Final Desktop Score

    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:

    Google PageSpeed Final Desktop Score Image 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.

    Daring Fireball PageSpeed

    The New York Times

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

    PageSpeed for New York Times

    The Seattle Times

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

    Google PageSpeed - The Seattle Times

    B&H Photo

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

    PageSpeed BH Photo

    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:

    PageSpeed Amazon

    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

    Photo

    martijn broeders

    founder/ strategic creative bij shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    telefoon: 434 210 0245
    9
    Plaats reactie...
    4elements
    Comments

Per - categorie

Op - datum

Copyright © 1999 - 2026 Shineyrock web design en consultancy, Alle rechten voorbehouden / Algemene voorwaarden / Sitemap: XML, HTML, Images, Mobile, News