The New Google PageSpeed Insights: A Perfect 100 Is Now Super Easy

Google PageSpeed Insights just got an update and scoring a perfect 100 is way easier. This is excellent news for agencies and freelancers with site management packages.

Trying to explain Google’s flawed scoring system to clients who see their PageSpeed score as a pass-fail system has always been tricky. “Why are you okay with a 73!? Isn’t that a C-?”

The Pros of Google’s New Page Speed Engine

PageSpeed Insights now uses Lighthouse as its analytics engine alongside field data from CrUX. This shift not only lets Google look at the code, but also allows them to factor in actual performance results.

This means Google no longer scores your site based on what you can do to improve your site, they are rating your site based on how it is actually performing.

Excellent…right?

A flashback to the old Interface:

And the all new interface running Lighthouse:

As a bonus, using Google Analytics and Google Fonts no longer penalizes your score (yay for compatibility). For OCD site speed junkies like myself, this is a big upgrade.

But PageSpeed Insights was never really about gaming the system with a one hundred or making you feel better about yourself. It’s about improving the user experience and in turn increasing traffic and conversion rates on your website.

The Newer, Better, And Not So Perfect Scoring System

The good news is your site may have a sexy new 100 score, but that doesn’t mean your site is fully optimized.

A big difference in the new Google PageSpeed Insights is that you can have both a perfect 100 page speed AND there can still be opportunities to improve.

This update is a game changer and means we need to adjust the way we read the results of PageSpeed Insights.

What Hasn’t Changed: Speed Is Still Important

While the old results were very rigid and hard to get right, these new results may have end users missing some of the quick wins for further improving site performance. A 100 no longer means you have done everything possible and your site is fully optimized.

Things to consider:

• Are you using a quality host? – This can be affecting your speed (more on this later).
• Have you implemented every speed optimization “opportunity” humanly possible?
• Do you understand how your plugins, themes, or other third-party services are affecting your speed?
• Are you able to make intelligent compromises that accomplish your site goals both for performance and functionality?

The biggest problem is that most of us blindly accept our scores, for better or for worse. In this post I want to walk through the Opportunities available for landing (or surpassing) the 100 :)

If we can’t get to a 100, by the end of this read you’ll have the knowledge you need to troubleshoot slow load times and the ability to set realistic goals around user experience and page speed based on your, or your clients, needs.

Getting Your Hundred Google PageSpeed

So, you’ve run your first check with Google’s PageSpeed Insights and it came back with a 73 and a list of optimization opportunities.

Confused yet? Don’t run away!

Here’s an overview of what they mean and how to fix them.

Pro tip: remember when checking your score to toggle between both the mobile and desktop results. By default Google shows the Mobile results.

Honey, I Shrunk The Code (Minify Your Code)

While minification sounds like the byproduct of an invention from an early 90’s sci-fi movie, it actually is just the process of making your source code more compact. The basic idea is that all unneeded code is removed (i.e. white spaces, new lines, comments, etc.) and everything falls into 1 big line.

Unminified CSS Example:

     body {
          background: #fff;
          color: #333;
          font-family: Lato,sans-serif;
     }

Minified CSS Example:

body{background:#fff;color:#333;font-family:Lato,sans-serif}

Basically, everything we do to make code easily read by the human eye is unnecessary. Minification creates a version of your file that is smaller and in turn faster for servers to deliver.

The good news is you don’t need to do this manually. A plugin like Hummingbird will automate this process for you. And don’t worry, the unminified version will be there if you need it for edits and human readability.

You Have Render Blocking Resources…Oh My!

This means you have CSS or JS resources loading before your content. They are considered ‘render blocking’ because they have to load before a user can see the content of the page.

There are a couple options for resolving this. You can make your CSS and JavaScript code inline instead of using the .css and .js files.

Another option is to have critical CSS and JavaScript files load asynchronously or deferred to load after the page is already parsed.

Sounds complicated? If you’re not a code ninja this may be the hardest suggestion to manually execute or to get right with a plugin. Thankfully, with a good optimization tool, this can be as simple as toggling, testing and the process of elimination.

Optimize Your Images

There are already a ton of posts dedicated to WordPress image optimization so I am not going to spend a lot of time here. Mostly because even savvy speed optimization specialists automate much of this process with tools like Smush.

Of course, this can all manually be done and you should scale and compress your images before uploading (especially if you’re on a mission for the perfect 100).

Here are the key factors for raising the red flag and losing points on your Insights test.

1. Scale images to fit the width of the container it will be used in.
2. Images should be compressed with a lossy ( jpeg ) or lossless ( png / gif  ) format to reduce their file size.

But what about those big 2x images for retina screens? Create custom images and familiarize yourself with <srcset> tagging.

It takes a little extra time to do image optimization right. But that’s why your clients pay you the big bucks… am I right?

Prioritize Visible Content

This is exactly as it sounds. Your ‘main content’ should load before everything else. This gives your visitors a faster user experience.

Here’s a classic WordPress example. If your HTML code has the <sidebar> before the <main-content> then the user has to wait for the sidebar to load first, making it a ‘blocking’ element. The HTML should be rearranged so the <main-content> is situated ahead of the <sidebar>.

Note: This doesn’t necessarily change the way your website will look if correct CSS rules are added.

If you’re not proficient with code make sure you choose a theme that is optimized or you can use your Hummingbird install to rearrange the files.

Ain’t Nothin’ But a Gzip Baby (Enable Compression)

Compression allows your server to send smaller files by automatically ‘compressing’ them before delivery.

Think of it in the exact like a .zip you create when trying to send a large file or folder to a friend.

If this is not already set up on your site gzip compression can be easily added and activated. This is another quick win usually activated by a simple toggle control.

Browser Caching

Browser Cache tells the users browser to store temporary files locally so it will load faster the next time they visit the page.

Again, nothing fancy here. Your host may provide a browser caching tool, you can use a plugin or you can implement this manually.

Pro tip: be aware of any cache tools when you’re making changes or updates to your site design. If you don’t flush the cache when testing, the old unedited content may still be delivered. It can be a bit confusing to say the least. Manually purging the cache files will resolve this issue.

I’ve Cleared Up All My Errors… Now What?

You’ve gone step-by-step and resolved every optimization opportunity possible without breaking your site, you run a new PageSpeed test and drum roll please… you’ve got an 87. Or worse you had a 100, switched servers and your site dropped to an 87. What the heck!?

Welcome to my world. That actually happened to me.

But now you’re in new territory, since you know slow page speed isn’t the problem. This is no longer ignorant slow load times. Now you’re ready to make educated decisions based on what it is that is slowing your site.

• Cheap or Low-quality Hosting – If you have a paying client and this is what is causing the issue, work with your host to see if it can be resolved. If they are unable to resolve the issue it may be time to upgrade to a dedicated host or a managed option… or both.
• Theme or Theme Framework – This may be your problem. It is never easy to move to a new theme, but if you are having a hard time making the adjustments without breaking styling it might be time to say goodbye. You can test your theme by activating a default theme and running a new PageSpeed test. *Remember to clear your cache before running the test.
• Plugins are slowing me down – The same thing as a slow theme applies here. It’s an easy test. Deactivate your plugin and run a new PageSpeed test. If this gets you to your hundred, work with the developer to resolve the issue or look for a more efficient option.

Note that Google’s PageSpeed Insights doesn’t check the speed of your site, it tests the speed of a specific page. If you put in your URL, the analysis will be of your home page. If you have other important pages on your site be sure and check them all and optimize each page as needed.

To Wrap It All Up

Building a WordPress site with a 100 Google PageSpeed is a valuable exercise for figuring out what you can control and where you need to compromise… every developer should try it at least once. But in the end, a fast site is just one part in a much bigger goal – giving your visitors an incredible user experience.

At the end of the day, going above and beyond will allow you to stand out in a crowded space where everyone can obtain a 100 and will probably stop making improvements once they do. By taking the time to optimize your images, tidy up your code and serve up the best user experience you can, you’ll be able to give your sites an edge, when everyone else is just aiming for the bare minimum.

Get all of the WPMU DEV optimization tools free on WordPress.org or take advantage of WPMU DEV’s membership free trial to try our entire suite of pro plugins, including regular automated scans. Not sure you’re getting the most out of your site? Our members get 24/7 access to support.