Google PageSpeed Insights - Scoring 100/100 with WordPress

Running speed tests with tools like Google PageSpeed Insights, WebPageTest, or KeyCDN’s site speed test are always a good way to help gauge your website’s performance. While these metrics can be very helpful it is also important to keep this data in perspective. While they can provide valuable information to help optimize your website, don’t forget about perceived performance, specifically the user’s experience. With that being said, see how we easily achieved a 100/100 score with WordPress and Google PageSpeed Insights.

Don’t Obsess Over the 100/100 Metric

A lot of people try and strive for that 100/100 score on Google PageSpeed Insights. Some do it because they are trying to speed up their site and others because a client is demanding they meet this metric (yes, this happens more than you think). It is important to take some time though and think about why we are trying to achieve that 100/100 score. Don’t think of it solely from a metrics point of view. The whole reason Google developed PageSpeed Insights was as a guideline on best web performance practices to provide recommendations to optimize your site. And by following the guidelines hopefully you will achieve a faster website.

It is also important to remember that achieving that 100/100 might not always be possible depending upon how your environment is setup.

WordPress and Google PageSpeed Insights

When it comes to trying to speed up WordPress, it can sometimes be quite tricky. We all know WordPress is not the fastest platform out there, especially from a developers point of view. And the way scripts are enqueued and 3rd party plugins operate can make this somewhat of a nightmare, especially when compared to standalone frameworks. We decided to experiment with our test domain, perfmatters.io, and after some tweaking we were easily able to achieve a 100/100 score on PageSpeed Insights. This includes a 100/100 Speed and 100/100 User Experience score on mobile as well as a 100/100 Desktop suggestions summary.

Here is what we did to our WordPress installation. Feel free to copy it! We are using the default Twenty Fifteen theme in our example.

1. Optimize Images

Google PageSpeed Insights is telling us we need to optimize our images. To fix this warning, we simply install and run the Optimus Image Optimizer plugin which is developed and maintained by KeyCDN. This plugin focuses on lossless compression, which means you won’t sacrifice any quality in your images. It has a bulk-optimization feature so after you first install it you can compress your entire media library with one click. And from there on out it will auto-compress your images upon upload. We are also using the plugin because it converts our images to .webp. This allows for even faster download times!

2. Minify Javascript and CSS

Google PageSpeed Insights is now telling us we need to minify our JavaScript, CSS, and HTML. To fix this problem we install the free Autoptimize plugin. In the plugin’s settings you will want to check the following:

Optimize HTML Code
Optimize JavaScript Code
Optimize CSS Code

We also are using KeyCDN’s free WordPress Cache Enabler plugin to deliver the .webp images we converted earlier to visitors in Chrome browsers for faster download times. In the settings make sure to check “Create an additional cached version for WebP image support.”

3. Render-Blocking Resources Above the Fold

Now Google PageSpeed Insights is telling us that we have JavaScript and CSS above the fold. There are three commons scenarios most people run into here, and that is your JavaScript/CSS files, Font Awesome, and Google Fonts. Fonts are render-blocking as we discussed in our case study on web font performance.

Files

The first issue we have to deal with is all of our Javascript and CSS files that are above the fold, making them render-blocking. To fix this we actually go back into the Autoptimize plugin we installed earlier and save the following settings.

Under JavaScript Options uncheck “Force JavaScript in <head>?”
Under CSS Options check “Inline all CSS?”

Font Awesome

KeyCDN sponsors the free Font Awesome CDN project where you can grab the latest version and integrate it into your site. The problem is that if you put this into your header, it becomes render-blocking as CSS is render-blocking. So we take the following code and we move it down to our footer, right before the </body> tag.

<link href="https://opensource.keycdn.com/fontawesome/4.5.0/font-awesome.min.css" rel="stylesheet">

Note: Doing this will result in FOUT, which is a flash of unstyled text.

Google Fonts

The third issue is with our Google Fonts. In the WP Twenty Fifteen theme they include the Noto Serif font. By default WordPress uses a hook called wp_enqueue_scripts which loads the font in your header. This automatically results in it becoming render-blocking. To fix this we install a free plugin called Disable Google Fonts. If you are using a custom theme this might vary slightly, or you can ask your theme developer how to disable Google fonts.

We then include our Google font with the following code in our footer, right before the </body> tag.

<link href='https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

Note: Doing this will result in FOIT, which is a flash of invisible text.

You could also load your Google fonts asynchronously by using Google’s Web Font Loader. Simply place the following code below in your footer.

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Noto+Serif:400,400italic,700,700italic' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

4. Leverage Browser Caching

Files

Now we are receiving a warning about leveraging browser caching. We are using KeyCDN, deployed with our free WordPress CDN Enabler plugin, and this means that any assets delivered from the CDN already have cache-control headers. However with the Twenty Fifteen theme there was one file which wasn’t getting delivered with the CDN. To fix this we simply add cache-control headers to our origin server by adding the following code to our .htaccess file.

 <filesMatch ".(ico|pdf|flv|jpg|svg|jpeg|png|gif|js|css|swf)$">
 Header set Cache-Control "max-age=84600, public"
 </filesMatch>

And here is the code if you are on a Nginx server.

location ~* \.(js|css|png|jpg|svg|jpeg|gif|ico)$ {
    expires 2d;
    add_header Cache-Control "public, no-transform";
}

Google Analytics

Another issue we run into is with Google Analytics. Funny thing is that this is a warning from their own script. http://www.google-analytics.com/analytics.js. The problem occurs because their script has a cache lifetime of only 2 hours. Google has already said that they won’t fix this. Which leaves almost everyone running analytics with a warning that they cannot fix. The most frustrating part of this is probably for people that deal with clients asking for Google PageSpeed Insights improvements. Telling a client you can’t fix something because Google won’t let you in their own tool sounds a little crazy.

One solution we have found so far to fix this is Jesse Luoto’s ga-lite script, a small subset of Google Analytics that uses the Google Analytics Measurement Protocol REST API. You can use his version delivered from jsdelivr, who KeyCDN sponsors. This automatically sets the appropriate headers to the script so you can get the remaining GA issue solved. Copy the following code below into your footer, just before the </body> tag. Make sure to update it with your UA tracking ID.

<script src="https://cdn.jsdelivr.net/ga-lite/latest/ga-lite.min.js" async></script> <script> var galite = galite || {}; galite.UA = 'UA-XXXXXX'; // Insert your tracking code here </script>

Note: there are a few issues to be aware of with this script. But it does seem to work fine for page views. Feel free to open up an issue on Github if you find bugs.

Another solution would be to host a local version of analytics.js. Google doesn’t recommend this but if you setup a script to grab the latest version it probably wouldn’t be an issue. There is free WordPress plugin called Host Analytics.js Locally which sets up a cron job to sync across periodically the latest version of analytics.js. This then also allows you to serve it from your own CDN, such as KeyCDN. Whether you use the ga-lite script or host a local copy, this will get rid of the “leverage browser caching” warning with Google Analytics.

Read our in-depth post on how to host Google Analytics locally.

5. Enable Compression

We already had Gzip enabled on our origin server and by default Gzip is enabled on all KeyCDN edge servers from where assets are being delivered. Below are instructions if you need to enable it on your origin server.

Apache

You can enable compression by adding the following to your .htaccess file.

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Nginx

You can enable compression by adding the following to your nginx.conf file.

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

6. Reduce server response time

And finally, the reduce server response time warning. The best recommendations for this is to use a fast web host and also implement a CDN, such as KeyCDN.

And that’s it! If you were able to follow everything above you should now have a 100/100 in Google PageSpeed Insights with your WordPress site. Feel free to check out our test domain results.

7. Remove Query Strings – Optional Step

Another thing we recommend is to remove query strings from your static resources. Resources with a “?” in the URL are not cached by some proxy caching servers or CDNS, which could result in a large missed opportunity for increased speeds. One way to do this would be to add the following to your functions.php file.

function _remove_script_version( $src ){
$parts = explode( '?ver', $src );
return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

Another option would be to install a free plugin like Query strings remover.

This plugin removes query strings from your static resources like CSS and JavaScript files. It will improve your cache performance and overall score in Google PageSpeed Insights, YSlow, Pingdom and GTmetrix. Just install and forget everything, as there is no configuration needed. But make sure to clear your cache after installing this plugin.

Before and After

So does the 100/100 actually help us achieve a faster page speed? In fact all of the optimizations we applied per Google PageSpeed Insights recommendations did decrease our load time. We thought we had a pretty fast site already, but manually going through each one of these and treating them like a checklist did shave off some additional time. See the difference below.

Before Google PageSpeed Insights Recommendations

We used both Pingdom and WebPageTest to show you the before and after. Remember, Pingdom doesn’t yet support HTTP/2. But some people still prefer seeing these tests as they have easier to understand metrics. We ran the tests five times and got a median as usual.

Pingdom (test results)

WebPageTest (test results)

After Google PageSpeed Insights Recommendations

Pingdom (test results)

WebPageTest (test results)

Here is a comparison of the results.

Testing Tool	Before (s)	After (s)	DIFFERENCE %
Pingdom	0.328	0.277	– 15.55%
WebPageTest	1.839	1.537	– 16.42%

As you can see the total download time decreased on average around 15-16% by following all of the Google PageSpeed recommendations. We are also able to get rid of 9 HTTP requests, although this becomes less important with HTTP/2. Note: We were serving .webp images before and after.

Summary

As you can see the recommendations from Google PageSpeed Insights are valuable and if followed can help optimize your site. Again, we don’t recommend obsessing over these numbers. If you can’t score a 100/100 it isn’t the end of the world. Our best advice is to simply implement as many optimizations as you can in your individual environment. And don’t forget to test for user experience. Just because a tool says your site loads fast, it could be the exact opposite experience for an actual person browsing your site.

We also highly recommend reading our complete guide on how to speed up WordPress which contains additional optimization tips. The PageSpeed Insights team also recently launched a new website speed test tool on “think with Google” which you might want to check out. One nice feature is the beautiful reports that it generates. Can be great for sending to clients.

Google PageSpeed Insights – Scoring 100/100 with WordPress was last modified: June 13th, 2016 by Brian Jackson

Web News & Insights

Google PageSpeed Insights – Scoring 100/100 with WordPress

Don’t Obsess Over the 100/100 Metric

WordPress and Google PageSpeed Insights

1. Optimize Images

2. Minify Javascript and CSS

3. Render-Blocking Resources Above the Fold

Files

Font Awesome

Google Fonts

4. Leverage Browser Caching

Files

Google Analytics

5. Enable Compression

Apache

Nginx

6. Reduce server response time

7. Remove Query Strings – Optional Step

Before and After

Before Google PageSpeed Insights Recommendations

Pingdom (test results)

WebPageTest (test results)

After Google PageSpeed Insights Recommendations

Pingdom (test results)

WebPageTest (test results)

Summary

Related Articles