Here at Kinsta we work with a lot of agencies and freelancers that deal with clients on a daily basis. It is not uncommon for clients or even a CEO of a company to ask their agency or WordPress developer to increase their Google PageSpeed Insights score. Google does a good job at marketing this tool to consumers, and many times, they don’t always understand that a perfect score isn’t the end of the world. This can definitely be frustrating at times. However, today we want to share with you some tips and strategies that can help you score a 100/100 in Google PageSpeed Insights with your WordPress site.
How Important is Google PageSpeed Insights?
Google PageSpeed Insights is a web performance tool created by Google to help you easily identify ways to make your site faster and more mobile-friendly, by following recommendations on best web practices. A very important thing to remember though is that you shouldn’t always obsess over scoring 100/100. This might not even be possible in all scenarios, depending upon how your WordPress site is setup. With a lot of multipurpose themes and sites with dozens of external scripts, you simply will have an almost impossible time trying to achieve a perfect score. Which is perfectly OK.We recommend looking at the speed of your site, more than the scores. Scores with tools like Pingdom, GTMetrix, and Google PageSpeed Insights can sometimes lead you astray. Especially since some of them don’t even support HTTP/2 yet. What really matters is ensuring your site loads fast and that the perceived performance is also up to par. Perceived performance is how fast your website feels like it loads to users.
Does Google use PageSpeed Insights when it comes to SEO and the page speed ranking factor or pure response speed? This was an interesting question brought up by an SEO over at FDP Group Leeds and discussed on Search Engine Roundtable. Gary Illyes, Webmaster Trends Analyst for Google, responded with saying “I’ll go with both.”
This is partialy due to the fact that in most cases when you have a slow website, you are most likely going to have a lot of warnings in Google PageSpeed Insights. A lot of the recommendations go hand in hand with how they relate to your pure response times. They don’t always correlate 100%, but what Gary is most likely saying is that if you have a slow website, yes, it probably will affect your rankings.
Scoring 100/100 on Both Shared Hosting and Kinsta
We thought it would be fun to explore the new Twenty Seventeen theme in WordPress 4.7. This is the first default WordPress theme that is aimed at businesses instead a typical blog, which is exciting! So today we are going to show you how to score that perfect 100/100 on both Desktop and Mobile. We have installed common tools and services that many WordPress sites use, such as Google Analytics, Akismet, Yoast SEO, etc. We ran tests on both a low-budget shared host and on Kinsta to show you just how much difference there can be when it comes to fine-tuned Google Cloud hosting vs a shared hosting environment.While this is a small site, it is a good foundation to at least understand a little bit about how Google PageSpeed Insights works. If you are interested in seeing some optimizations on a larger multipurpose theme, check out our post on optimizing the Total WordPress theme.
100 score on Google PageSpeed Insights
100/100 in Google PageSpeed Insights with Shared Host
Our first test site, we have WordPress 4.7 with the Twenty Seventeen Theme running on a popular low-budget shared host (Apache). SSL is configured and the following plugins are installed.- Yoast SEO
- Akismet
Shared hosting score on Google PageSpeed Insights
Enable Compression
We will start with desktop first as many of the fixes will also apply for mobile. The very first Google PageSpeed Insights recommendation that we need to fix is the Enable Compression warning.
Enable compression warning
All modern browsers support and automatically negotiateThere are a couple ways you can go about doing this. The first and one of the easiest is by using a caching plugin that supports enabling Gzip. WP Rocket for example adds Gzip compression rules in your .htaccess file automatically using the mod_deflate module. W3 Total Cache also has a way to enable this for you under it’s performance section.Gzipcompression for all HTTP requests. Enabling Gzipcompression can reduce the size of the transferred response by up to 90%, which can significantly reduce the amount of time to download the resource, reduce data usage for the client, and improve the time to first render of your pages.
The second way to enable Gzip compression is by editing your .htaccess file. Most shared hosts use Apache, in which you can simply add the code below to your .htaccess file. You can find your .htaccess file at the root of your WordPress site via FTP.
<IfModule mod_deflate.c>Ensure that you add it below the current contents of your .htaccess file. Example below:
# 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>
Add GZIP compression code
36 gzip on;
37 gzip_disable "MSIE [1-6]\.(?!.*SV1)";
38 gzip_vary on;
39 gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;
GZIP compression savings
PageSpeed Insights after GZIP compression
Optimize Images
The next Google PageSpeed Insights recommendation that we need to fix is the Optimize images warning. Our default “Hello world!” blog post has a featured image which is throwing up this error.
Optimize images warning
There are a couple ways you can fix this. The first is to use an image optimization plugin. A plugin can actually go through and bulk optimize your entire WordPress media library and also automatically optimize them when you upload them. We actually have an entire guide on how to optimize your WordPress images. Below are a few popular image optimization plugins:
Those plugins will fix the issue, or you can also compress them before you upload them in a tool like Adobe Photoshop, Gimp, or Affinity Photo. Below is the featured image that is throwing up that warning. We can compress it before-hand by both scaling it down and lowering the quality. It is best to keep your images as small as possible. This image was originally 2.32 MB, after down-scaling and compression, it is now 99.38 kB. Remember, it is best to upload images at scale and not rely on CSS to resize them. This slows down your site.
Compress images with Affinity Photo
PageSpeed Insights after image compression
Eliminate Render-blocking JavaScript and CSS in Above-the-fold Content
The next Google PageSpeed Insights recommendation that we need to fix is the Eliminate render-blocking JavaScript and CSS in above-the-fold content warning. We actually have an entire in-depth post on the render-blocking JavaScript and CSS issue.
Eliminate render-blocking JavaScript and CSS warning
As far as Render-blocking Javascript, Google has three recommendations:
- If you don’t have a lot of JavaScript, you can inline it to get rid of this warning. You can inline JavaScript with a plugin like Autoptimize. However, this is really only valid for very small sites. Most WordPress sites have enough JavaScript where this could actually slow you down.
- The second is to load your JavaScript asynchronously. Async Javascript essentially downloads the file during HTML parsing and will pause the HTML parser to execute it when it has finished downloading.
- The third is to defer your JavaScript. The defer attribute also downloads the file during HTML parsing, but it only executes it after the parsing has completed. Also, scripts with this attribute execute in order of appearance on the page. Read more about the differences between async and defer.
Async Example
<script src="file1.js" async></script><script src="file1.js" defer></script>
Async JavaScript
Async exclusions
/*function to add async to all scripts*/Here are two additional posts that discussing adding async or defer without a plugin:
function js_async_attr($tag){
# Add async to all remaining scripts
return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );
- Async with WordPress Enqueue
- Add Defer And Async Attributes To Render Blocking Javascript In WordPress
Optimize CSS delivery warning
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:300,300i,400,400i,600,600i,800,800i" rel="stylesheet">
Google Fonts embed
Google font in WordPress footer
Optimize CSS Delivery query strings warning
Autoptimize WordPress plugin
After installing the plugin, click into the settings and select “Optimize CSS Code.” Then click the advanced tab and also enable “Aggregate inline CSS” and “Inline All CSS.” Note, depending on what theme you are doing this on, it might not be recommended to use this method. For large sites, inlining can be bad, in which case it would be actually better to simply ignore that particular Google PageSpeed Insights warning. And remember that with HTTP/2, concatenation can sometimes actually slow your site down.
Optimize CSS code
Optimize HTML code
PageSpeed Insights after JS and CSS optimization
Leverage Browser Caching
The next Google PageSpeed Insights recommendation that we need to fix is the Leverage browser caching warning. We actually have an entire in-depth post on the leverage browser caching issue, as it pertains to WordPress.
Leverage browser caching warning
You don’t necessarily need to add both of the headers, as this is a little redundant. Cache-Control is newer and usually the recommended method, however, some web performance tools like GTmetrix still check for Expires headers. These are all examples, you can change file types, expire times, etc. based on your needs. Here are some options below. We are going to simply add expire headers in Apache on our shared host for this tutorial.
Adding Cache-Control Header in Nginx
You can add Cache-Control headers in Nginx by adding the following to your server config’s server location or block.location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 2d;
add_header Cache-Control "public, no-transform";
}Adding Expires Headers in Nginx
You can add Expires headers in Nginx by adding the following to your server block. In this example, you can see how to specify different expire times based on file types.location ~* \.(jpg|jpeg|gif|png)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}Adding Cache-Control Headers in Apache
You can add Cache-Control headers in Apache by adding the following to your .htaccess file.<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>
Adding Expires Headers in Apache
You can add Expires headers in Apache by adding the following to your .htaccess file.## EXPIRES HEADER CACHING ##Remember we enabled Gzip compression earlier? Below is what our .htaccess file below now looks like after also adding the expires headers. We simply place it below the compression block.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##
Expire headers code
Leverage browser caching with Google Analytics
CAOS WordPress plugin
Just install the plugin, enter your Google Analytics Tracking ID, and the plugin adds the necessary tracking code for Google Analytics to your WordPress website, downloads and saves the analytics.js file to your server and keeps it updated using a scheduled script in wp_cron(). We recommend also setting it to load in the footer. Note: This plugin won’t work with other Google Analytics WordPress plugins.
Local Google Analytics
PageSpeed Insights after fixing leverage browser caching
Reduce server response time
The next Google PageSpeed Insights recommendation that we need to fix is the Reduce server response time warning. A lot of times this happens when someone is on a slow budget shared hosting plan. The server is not fast and Google knows it. So to fix this we need to implement some type of caching to speed things up. There are a lot of great caching plugins out there. In our example, we are going to be using the free Cache Enabler plugin from the team over at KeyCDN.
Cache Enabler WordPress plugin
If we run our site through Google PageSpeed Insights again we can see that the Reduce server response time is now completely gone! And we have raised our desktop score from 97/100 to 99/100 and our mobile score from 96/100 to 99/100. We are about to cross the finish line.
PageSpeed Insights after response time fix
Minify JavaScript
The last Google PageSpeed Insights recommendation that we need to fix is the Minify JavaScript warning.
Minify JavaScript warning
Optimize JavaScript code
100/100 Google PageSpeed Insights score
100/100 Google PageSpeed Insights mobile score
Before PageSpeed Insights Optimizations Speed Test
Here is a speed test from Pingdom before any optimizations were done on the shared host.
Speed test before PageSpeed optimizations
After PageSpeed Insights Optimizations Speed Test
Here is a speed test from Pingdom after optimizations were done on the shared host.
Speed test after PageSpeed optimizations
100/100 in Google PageSpeed Insights with Kinsta
Our second test site is configured the exact same way as the 1st. It is simply on a different domain. We have WordPress 4.7 with the Twenty Seventeen Theme running on our Kinsta servers (NGINX). SSL is configured and the following plugins are installed.- Yoast SEO
- Akismet
- Enable Compression (Kinsta already has Gzip enabled on all servers, no need to enable)
- Reduce server response time (Kinsta is already blazing fast, already well within Google’s acceptable parameters without any optimizations)
- Expires Headers (No need to enable because Kinsta has caching headers enabled at the server-level)
PageSpeed Insights with managed WordPress host
- Optimize images
- Eliminate Render-blocking JavaScript and CSS in Above-the-fold Content
- Leverage Browser Caching
- Minify JavaScript
100/100 PageSpeed Insights with Kinsta
100/100 PageSpeed Insights mobile with Kinsta
Before PageSpeed Insights Optimizations Speed Test
Here is a speed test from Pingdom before any optimizations were done on Kinsta. Notice that the un-optimized site on Kinsta was over 200ms faster than the optimized shared host!
Speed test before PageSpeed optimizations
After PageSpeed Insights Optimizations Speed Test
Here is a speed test from Pingdom after optimizations were done on Kinsta.
Speed test after PageSpeed optimizations
Additional PageSpeed Improvements
We are simply optimizing for Google PageSpeed Insights in this tutorial. In fact, we could have shaved off more from our load times if we also did the following:- Remove Query Strings
- Add a CDN to speed up content delivery
- Further optimize our images with even great compression
- Lazy load images
Summary
The point of this tutorial was to better explain and understand what the Google PageSpeed Insights warnings mean and what you can do to fix them. Once you understand these better, you can go about applying some of these strategies to your larger sites. Of course, with big sites you probably won’t ever score that perfect 100/100, which is perfectly OK! Or if you do, it will take some work. We simply recommend implementing what you can and you will most likely see speed improvements. Remember that the speed of your site, along with perceived performance is what really matters. Don’t obsess too much over scores.It is also important to note the differences above when it comes to shared hosting and Kinsta’s fine-tuned WordPress environment. We are faster out of the box than most shared hosts after optimization. You should ask yourself, how much is your time really worth? If you simply want fast out of the box, Kinsta’s managed hosting environment can do that for you.
The next time a client asks you to improve their scores, you now have some up to date tips on how to do that. And if we missed anything important, just let us know below in the comments. Stay tuned for larger-scale case studies with Google PageSpeed Insights that we will be doing in the future.