Google PageSpeed Insights - Scoring 100/100 with WordPress

Running speed tests with tools like Google PageSpeed Insights, WebPageTest, or KeyCDN's Website Speed Test is always a good way to help gauge your website's performance.

Look how we effortlessly achieved a score of 100/100 using WordPress and Google PageSpeed Insights. But also learn why simply achieving this score should not be overstated.

Many website developers and owners seem obsessed with achieving a 100/100 score on Google PageSpeed Insights and overlook the most important thing: Google PageSpeed Insights recommendations. These are great for finding problematic spots on your site so you can optimize them and reduce not only your actual load time - but in some cases, more importantly - the perceived performance of your visitors.

How does Google PageSpeed Insights work?

Google PageSpeed Insights is a tool that allows you to test and analyze your website performance.

Enter the URL of the website you want to have checked. Google then assigns an overall score between 0 and 100, based on various best practices for optimizing performance. Among other things, factors such as performance, progressive web applications, and accessibility of your website are evaluated.

As mentioned above, the total score is not the most decisive factor. Above all, look at Google's recommendations for improving your website's quality.

Under Google's Measure tool, you can also find a comprehensive rating by Lighthouse (Google's open source tool for overall website optimization) for your URL. The performance audit is similar to that of Google PageSpeed Insights, but you'll also get an assessment of best practices, accessibility, and analysis related to your SEO (search engine optimization).

The Google PageSpeed Insights result certainly influences your ranking in the search engine results pages (SERP). However, Google also takes more than just the number into account here. If you score 100/100, it doesn't mean you are automatically assured of a top spot in the SERPs. Therefore, looking at the 100/100 metric behind the scenes is even more important.

Why care about page speed?

There is a multitude of reasons why you should care about page speed. Everything from ranking higher in Google search results to providing your visitors with a better user experience, thus increasing conversions, all comes into play.

We've said it before, but it's worth reiterating that as web page load times increase, so does the likelihood of your visitors. Take these statistics from Google's industry benchmarks for mobile page speed:

That same guide also goes into detail regarding the page speed and page weight, as well as additional insights on specific industries, such as automotive, technology, and retail. According to Google, the best practice for a website's speed is to keep it under 3 seconds load time. As we can see from the graph below, this best practice is far from being met for sites based in the United States.

Furthermore, as the growth of web page size continues, Google's recommended best practice of keeping a website under 500 KB in size is also nowhere near being met, on average.

The constant growth in web page size is likely a contributing factor to why static sites have been increasing in popularity as of late. Static sites don't require a backend or database and are much simpler to manage. They're also, on average, much smaller in size. Therefore if your site doesn't require dynamic content, moving to a completely static site may drastically help improve your overall page speed and page weight. Read more about static site generators and how to host a static site with a CDN.

How page speed affects the bottom line

As we've already discussed, page speed affects many areas of a website that can change (for better or worse) how much revenue your business produces online (given you are selling something). However, knowing just how much money your business is potentially losing out on provides a much greater incentive to make a change.

That's why Google created a performance revenue calculator that estimates how much additional revenue you could make if your site was faster. Take the example below. A site that loads in 2.6 seconds has 200,000 monthly visitors, collects an average order value of $20, and has a conversion rate of 2%. If the site owner were to improve the speed of that site by just 1 second, they could potentially increase their annual revenue by almost $44,000 USD.

That's a fair amount of money for doing something that doesn't take too much effort. That being said, there are a lot of different optimization suggestions out there, and knowing how to implement each one can take some time. However, as the section below mentions, don't base your efforts solely on the PageSpeed Insights metrics. Your goal here isn't to score 100/100, just to have 100/100. The goal is to improve your site's overall performance.

Don't obsess over the 100/100 metric

Many people 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 and think about why we are trying to achieve that 100/100 score. Don't think of it solely from a metric point of view. Google developed PageSpeed Insights as a guideline on best web performance practices to provide recommendations to optimize your site. 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 on how your environment is set up.

WordPress and Google PageSpeed Insights

We all know WordPress is not the fastest platform out there, especially from a developer's point of view. When it comes to trying to speed up WordPress, it can sometimes be quite tricky. The way scripts are enqueued and third-party plugins operate can make this somewhat of a nightmare, especially when compared to standalone frameworks. We decided to experiment with our test site, and after some tweaking, we could easily 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!

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 plugin, an image optimization plugin developed and maintained by KeyCDN. This plugin focuses on smart compression, which means it combines lossless and lossy compression techniques. It has a bulk optimization feature, so you can compress your entire media library with one click after it's first installed. From there on out, it will automatically compress your images upon upload. We also use the plugin to convert our images to the WebP format. This allows for even faster download times!

Be aware that PageSpeed Insights can show two different recommendations for image optimization; these include:

1. Optimize Images: "Compressing ... could save 4.7 KiB (30% reduction)."
2. Optimize Images: "Compressing and resizing ... could save 5.8 KiB (51% reduction)."

The first recommendation is focused solely on compressing your image, whereas the second recommendation is focused on compression and resizing. This recommendation will be triggered if your image dimensions are too large and should be scaled down for the browser. Here is more information about both PageSpeed Insights image optimization suggestions.

2. Minify JavaScript and CSS

Google PageSpeed Insights tells 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 use KeyCDN's free Cache Enabler plugin to deliver the WebP formatted images we converted earlier for faster download times. Make sure to check the "Create an additional cached version for WebP image support" setting in the settings.

3. Render-blocking resources above the fold

Google PageSpeed Insights tells us we have JavaScript and CSS above the fold. There are three common scenarios most people run into here: 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 our JavaScript and CSS files that are above the fold, making them render-blocking. To fix this, we actually went back into the Autoptimize plugin we installed earlier and saved the following settings.

1. Under JavaScript Options, uncheck "Force JavaScript in <head>?"
2. Under CSS Options, check "Inline all CSS?"

Font Awesome

Many people who use Font Awesome take the CSS file and place it in their header. The problem is that if you put this into your header, it becomes render-blocking as CSS is render-blocking. Instead, we take the following code and move it down to our footer, right before the </body> tag.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/fontawesome.min.css" rel="stylesheet">

Google Fonts

The third issue is with our Google Fonts. By default, WordPress uses a hook called wp_enqueue_scripts that loads the font in your header. This automatically results in it becoming render-blocking. To fix this, we installed a free plugin called Disable Google Fonts. If you use a custom theme, this may vary slightly, or you can ask your theme developer how to disable Google Fonts.

We 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'>

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

We are now receiving a warning about leveraging browser caching. We are using KeyCDN, integrated with our free CDN Enabler plugin, which means that any assets delivered from the CDN already have Cache-Control headers. However, one file 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=604800, public"
</filesMatch>

Here is the code if you are on an Nginx server:

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

Google Analytics

Another issue we run into is Google Analytics. The funny thing is that this is a warning from their own script (https://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 it. 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.

A solution would be to host a local version of analytics.js. Google doesn't recommend this, but it probably wouldn't be an issue if you set up a script to grab the latest version. There is a free WordPress plugin called Complete Analytics Optimization Suite, which sets up a cron job to sync across periodically the newest version of analytics.js. This allows you to serve it from your CDN, such as KeyCDN. This will eliminate 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

Finally, there is a reduce server response time warning. The best recommendation is to use a fast web host and implement a CDN, such as KeyCDN.

And that's it! If you could follow everything above, you should now have a 100/100 in Google PageSpeed Insights with your WordPress site.

7. Remove query strings (optional)

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 significant 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 Remove Query Strings From Static Resources.

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.

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.