How to Score 100/100 in Google PageSpeed Insights with WordPress

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 partially 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 a Shared Hosting Site

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 a low-budget shared host.

While this is a small site, it is a good foundation to at least understand a little bit about how Google PageSpeed Insights works.

100 score google pagespeed insights

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

We also have Google Analytics running within the <body> of our header.php file. The only modification we have made is we added a featured image to the default dummy “Hello world!” blog post. We run our test site through Google PageSpeed Insights and out of the box, we get a 69/100 desktop score and a 58/100 mobile score. So we definitely have some improvements that should be made here. Let’s dig through each one of these to see how we can fix them.

shared hosting google pagespeed insights

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.

google pagespeed insights enable compression

Enable compression warning

According to Google, to fix this we need to enable Gzip compression. Unfortunately, the shared host doesn’t have this automatically enabled already on their servers, so we have to do it manually.

All modern browsers support and automatically negotiate Gzip compression for all HTTP requests. Enabling Gzip compression 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.

There 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.

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>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/
  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

Ensure that you add it below the current contents of your .htaccess file. Example below:

add gzip code

Add GZIP compression code

If you happen to be running on NGINX, simply add this to your nginx.conf file.

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;

A tool like  Check Gzip Compression can actually show you how my bytes were saved by enabling Gzip compression. Here is an example below of what we saved on our test site.

gzip compression savings

GZIP compression savings

If we run our site through Google PageSpeed Insights again we can see that the Gzip compression warning is now gone and it has raised our desktop score from 69/100 to 80/100 and our mobile score from 58/100 to 67/100.

google pagespeed after gzip compression

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.

pagespeed insights optimize images

Optimize images warning

This is a very important and useful warning. According to HTTP Archive, as of November 2016, images made up for on average 65% of a webpages total weight. Optimizing your images can be one of the easiest ways to see performance improvements with your WordPress website.

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 image with affinity photo

Compress images with Affinity Photo

If we run our site through Google PageSpeed Insights again we can see that the Optimize images warning is now gone and it has raised our desktop score from 80/100 to 88/100 and our mobile score from 67/100 to 73/100. We are making progress!

google pagespeed insights after image compression

PageSpeed Insights after image compression