Shut Up Google PageSpeed

Shut up Google PageSpeed! Fix the Most Important Error Messages

Google PageSpeed Insights is a great way to quickly get an overview of your website's optimization potential. Today I will show you how to use this potential and increase your PageSpeed Score. But you should not slavishly follow the Google results. Because the PageSpeed error messages are not always useful.

Colleague Caspar Hübinger found very clear words for his Google PageSpeed Insights result in one of his blogposts some time ago. And he criticizes not only the tool, but also the use of the tool itself. Because if you don't know how to interpret and fix the individual optimization suggestions, you can quickly get lost in the nonsensical hunt for a 100 score. But that would be unwise. Because utopian high Google PageSpeed scores are mostly a waste of time. Optimizing the loading time is more important.

Today I'll show you how to interpret the most important error messages from Google PageSpeed Insights and optimize your website accordingly.

But before I show you how to interpret the individual error messages and fix the errors, I would like to go into how to use Google PageSpeed Insights correctly. Because we have already seen that some people were very fixated on their PageSpeed Score without keeping an eye on the loading time of their website.

If this section doesn't interest you, just skip it and learn directly how to fix the "Compress CSS" error message.

Google PageSpeed error messages are not always correct and important

You should never rely exclusively on the results or error messages of Google PageSpeed Insights . Because the Google tool does not measure the most important parameter of your website: the page load time. To measure this correctly, I recommend Webpagetest.org.

Only if you keep page load time in mind from the very beginning when optimizing your website can you make meaningful statements about the success of the optimization. Because the goal of any optimization should always be an improved user experience. In the case of performance optimization, this is of course the page load time and the perceived page load time.

REMINDER.

Always measure the page load time before optimizing the performance of your website. This is the only way to assess how successful the optimization was.

For the user experience, faster page load time and smaller page size are always beneficial. People's patience and attention span continues to decrease(as this study from Microsoft shows) - this is especially crucial for e-commerce - and more and more traffic is coming from mobile devices. Already in 2016, 56 percent of Germans regularly accessed the Internet via smartphones or tablets. Here, connection speeds and data volumes are not always unlimited. Lean, fast websites are therefore in order.

However, Google PageSpeed only provides information on the optimization potential of your website and only allows a few conclusions to be drawn about the user experience. The low informative value of Google PageSpeed error messages is reinforced by the fact that the tool cannot be quieted in certain areas, or only with considerable additional effort.

For example, the reference to browser caching will always appear when external resources - including Google's own services - are included. However, these resources cannot be covered by your website's browser caching at all. So the error message has no relevance for the user experience of your website, but is produced by the logic of the tool itself. In the worst case, the message is interpreted as if no browser caching is active.

So don't primarily focus on the Google rating, but on the loading time. This is the only really important parameter.

But what about my Google ranking?

The example of the message with the missing browser caching makes it clear why you should not be put off by a supposedly bad PageSpeed result.

If you have included Google Maps or Google Analytics on your website, for example, they will generate the following error message:

The same with other third-party services. For example, our support chat.

Therefore, every time we test our website at PageSpeed Insights , this point is chalked off. That is, we know that this factor always negatively skews our results, so we simply ignore it.

For your website's SEO, this means that loading time and user experience are also much more important for Google rankings than the specific PageSpeed score.

Because if you optimize the load time of your website, you will automatically work on many of the areas that are important for Google. So improving the load time and the Google PageSpeed Score are related in a way.

In my opinion, though, don't get lost in the hunt for a 100 score.

But now to the optimization steps!

Error message 1: Compress CSS

In our experience, this is one of the most off-putting error messages from Google PageSpeed Insights.

Shut up Google PageSpeed! Fix the Most Important Error Messages

Meaning: This error message indicates that the CSS files of your website can still be compressed (or in the case above, that this has already been done successfully). Such downsizing reduces the number of characters in the documents. This way the file size shrinks. Comments, spaces and formatting are deleted, for example.

Implementation: Even if this note seems daunting, the implementation is conceivably simple. For this case, there are basically two possible solutions: If you are fit in CSS, you can reduce the number of CSS files manually and use a shorthand notation when creating them. You can also reduce the size of the CSS files yourself using online tools such as CSS Minifier.

Shut up Google PageSpeed! Fix the Most Important Error Messages

But of course there is also the comfortable solution using CSS minification plugins in WordPress. Some plugins do directly an all-around and can compress and optimize not only CSS, but also JavaScript and HTML.

More Information

For a detailed explanation of the ways in which you can reduce HTML, CSS and JavaScript in WordPress , see this article.

With HTTP/2, merging CSS does not necessarily make sense.

The Minify plugins just mentioned are widely used. Because they are comfortable and take care of the compression and merging of CSS (and much more) fully automatically. Merging CSS files also made a lot of sense until recently. Now it's different: Because since the HTTP/2 standard exists, browsers are able to load multiple files from the web server at the same time.

This means that it is no longer mandatory to combine the data, since HTTP/2 allows multiple data packets to be exchanged simultaneously. HTTP/2 must be set up by host , for example, and can only be used with an SSL certificate.

So before you decide on a Plugin with several dozen functions and configuration options, think carefully about whether you need it at all. Especially if you are confident to optimize CSS on your own.

Because an additional plugin can make your website slower under certain circumstances. Especially if the other functions of the all-rounder plugins cannot unfold their full potential.

Error message 2: Remove resources that block rendering

This message also brings beads of sweat to the foreheads of many, because it is not so easy to implement and is also one of Google PageSpeed's eternal points of criticism.

Shut up Google PageSpeed! Fix the Most Important Error Messages

Meaning: A website is built in a certain order. This loading order can be optimized. PageSpeed almost always complains that CSS files block this optimal loading order. And this is true even for already very well optimized websites(as the case of Caspar Hübinger shows). Nevertheless, the hint can be very valuable for load time optimization. Basically, this hint tells you that JavaScript or CSS code that is important for an element to load - for example, a background color - is not yet available at the time the element is loaded. As a result, it will not be displayed until the appropriate CSS command is loaded. While this doesn't increase the load time of your website, it primarily affects the user experience, as the website feels like it takes longer to load.

Implementation: A common solution is to implement a rule of thumb: CSS in the header. This means that you move CSS code from the main part of the HTML document, the "body", to the beginning of the document, the "head", and include it there as "style".

This example makes it clear what I mean. The code snippet below defines a background color for a blog. The "style" element is loaded in the "head" of the HTML document. This way the page background doesn't load at the end of the document and create an unsightly color jump or even block rendering.

<head>
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #f5faff; }
</style>
</head>

You can implement this optimization measure in two ways: You can touch the code yourself and move the CSS codes into the header, or you can let a plugin do the work.

The plugin Autoptimize, for example, is an all-rounder: Here you select the options for all CSS files that are not excluded from the process.

The excerpt from the plugin's options shows: Even the plugin variant cannot be implemented without a basic understanding of the process. So you have to familiarize yourself with the plugins as well.

"*" indicates required fields

I would like to subscribe to the newsletter to be informed about new blog articles, ebooks, features and news about WordPress. I can withdraw my consent at any time. Please note our Privacy Policy.
This field is for validation and should not be changed.

Error message 3: Efficiently encode images

This is another point that PageSpeed Insights often grumbles about. However, this case is almost always quick and easy to implement and usually brings tangible loading time advantages.

Shut up Google PageSpeed! Fix the Most Important Error Messages

Significance: Many underestimate the role of the image size for the loading time of their website. In fact, images are very often one of the biggest load time brakes. Even if only small amounts of data are saved for individual images, the total volume saved can add up to a considerable amount of data.

Because an image is rarely just an image. WordPress automatically generates several thumbnails of the image during the upload. So if you don't use the originals on your homepage, but smaller versions of them, i.e. thumbnails or featured images, then these should of course also be optimized. One image quickly becomes several files, which also bring a multiple data load with them.

Implementation: In principle, you have two options to optimize your images. Either you optimize the images before the upload or after or during the upload. The former you can do via online or offline tools, the latter you can do via corresponding WordPress image optimization plugins.

If you can integrate compression into your workflow, it makes sense to optimize your images before uploading them. There are online tools for this, such as Kraken.io, or you can reduce the quality and thus the file size of your images offline, for example directly in Photoshop. This saves you the extra plugin and keeps your website lean.

The more comfortable solution here is of course also a plugin. Plugins like Optimus or Smush optimize not only the main image, but also all variations of it. Smush is also able to optimize all your existing images afterwards.

Among other things, Plugins works with a so-called "lossless compression". This means that the file size of the images is reduced, but their visible quality does not decrease.

Error message 4: Enable text compression

This Google PageSpeed error message is very quick to fix and can significantly reduce the loading time of your website.

Shut up Google PageSpeed! Fix the Most Important Error Messages

Meaning: You have already scaled down images and CSS of your website as much as possible. That's good! But that's not all. Because now you can use another compression mechanism. You probably know this process from downloading large data packages: You usually have them in zipped, i.e. compressed form. This makes the data smaller and the download faster. However, the data packets still have to be unpacked after the download. Exactly the same thing happens during page loading: The web server delivers the data packets in compressed form, and the web server unpacks them. This makes the data transfer faster and reduces the page loading time.

Implementation: Either the data compression is already set on the server side, or you have to activate it yourself. At Raidboxes you don't have to worry about anything. Because we have the particularly strong Brotli compression active by default.

With the following entry in your .htaccess you can also activate the so-called GZIP compression manually. Provided you have an Apache web server.

<ifModule mod_gzip.c>
 mod_gzip_on Yes
 mod_gzip_dechunk Yes
 mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
 mod_gzip_item_include handler ^cgi-script$
 mod_gzip_item_include mime ^text/.*
 mod_gzip_item_include mime ^application/x-javascript.*
 mod_gzip_item_exclude mime ^image/.*
 mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
 </ifModule>
 
 <IfModule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/x-javascript
 </IfModule>

Error Message 5: Deliver Static Content with an Efficient Cache Policy 

In my opinion, the reference to browser caching is by far the most annoying at Google PageSpeed Insights. This is because you can only set up browser caching for your own resources. Browser caching is not possible for external resources.

Shut up Google PageSpeed! Fix the Most Important Error Messages

Meaning: Browser caching means that the browser saves a static version of your website and does not have to request the web server when you visit it again, but the website is already loaded.

Implementation: Either your host browser already has caching enabled on the server side, or you can set it by manipulating the .htaccess file (remember: this setting only works on Apache web servers). For example, the example code below sets the browser cache to one month, i.e. the static version of your website will be stored in the visitor's browser for one month.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 60 seconds"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/ico "access plus 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
</IfModule>

Again, if you are a Raidboxes customer, then browser caching is already active by default.

My 2 Cents: Without cache everything is nothing

Good, now you have optimized your website's images, reduced CSS, compressed it and put it in the right order and made your visitors' browser cache the website. All these measures shorten the loading time of your website.

Meaning: Without a proper cache, however, you give away a lot of this potential. Caching is and remains by far the most important performance factor. A cache temporarily stores the content of your WordPress website and ensures that the entire website does not have to be reloaded every time. Instead, a static, i.e. already rendered variant of your website is delivered from a cache. This bypasses especially the slow PHP and the database.

Implementation: Again, either your host already has a server-side cache set up, or you are using a caching plugin. Here there are some very powerful plugins that cache large parts of your website and lead to a significant reduction in loading time for recurring website visits.

The high power of caching plugins is also their biggest weakness. It may well be that a caching plugin makes your website slower for first-time visitors at first. This is because the more complicated your blog or website is, the more complicated and extensive the caching engine that caches your blog must be. This is especially relevant for stores.

If you run a comparatively simple website, then minimalist solutions can be quite better than caching jack-of-all-trades. One of these lean plugins is Cache Enabler, for example.

You should note that caching plugins usually also take care of reducing and merging CSS or JavaScript. Therefore, you should check whether your caching plugin does not already make the plugins for CSS optimization superfluous.

If you use server-side caching, it is recommended to deactivate the caching functions of plugins such as Autoptimize, or to test whether they provide any additional performance benefits.

Conclusion: Move a plugins lot with just a few

You have already noticed while reading: For the optimization of CSS, images and the optimization of the loading order, there are plugins that take a lot of work off your hands. But not all of the work. Caching plugins also quickly deliver a noticeable effect, but are sometimes very extensive and offer many configuration options and sometimes redundant functions.

In any case, take a closer look at the plugins you use. Only if you know what happens when you use certain functions, you can also optimize sensibly. Overloading the website with optimization plugins tends to bring little.

And when optimizing, you should make sure to measure your successes properly. No matter if you optimize manually or via plugin . Use PageSpeed Insights as a first point of reference to identify the weak points of your website. Then measure the loading time of your website before optimization. Only after you have recorded the initial situation does it really make sense to optimize your website step by step. Only when you know the loading time before optimization and after each optimization step can you determine what the individual optimization measures have achieved.

Did you like the article?

Your rating helps us improve our future content.

A Comment on "Shut up Google PageSpeed! Fix the most important error messages"

  1. Hi Martin,
    du hast total Recht, dass es auf unserer Website noch einiges an Optimierungsbedarf gibt. Durch unseren Website Relaunch und unser Mehrsprachigkeitsplugin haben wir leider einige 404er und andere Errors, die Google zurecht schlecht bewertet. Wir sind aber dran 😁
    VG aus Münster
    Leefke

Post a comment

Your email address will not be published. Required fields are marked with *.