Shut up Google PageSpeed! Troubleshooting the most important error messages

Tobias Schüring Last updated on 21.10.2020
11 Min.
Google PageSpeed Insightserror messages
Last updated on 21.10.2020

Google PageSpeed Insightsis an excellent tool to get a quick overview of the optimization potential of your site website. 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.

Some time ago, our colleague Caspar Hübinger one of his blog posts postlet's say, very clear words for his Google PageSpeed Insights-result found. And he criticizes not only the tool, but also the use of the tool by the users. Because if you don't know how to interpret and correct the individual optimisation suggestions, you can quickly lose yourself in the absurd hunt for a 100 rating. That, however, would be unwise. Because utopian high Google PageSpeed ratings are usually a waste of time. More important is the optimization of the loading time.

Today I'll show you how to interpret the most important error messages from Google PageSpeed Insightsand optimize yours site accordingly.

But before I show you how to interpret the individual error messages and how to fix the errors, I would like to explain how to use Google PageSpeed Insightscorrectly. Because we have often seen that users are very fixed on their PageSpeed score without keeping an eye on the loading time of theirssite .

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

Google PageSpeed error messages are not always correct and important

You should never rely solely on the results or error messages from GooglePageSpeed Insights . The Google tool does not measure the most important parameter of your site page: the page load time. To measure this correctly, I recommend webpagetest.org.

Only if you keep the page load time in mind site from the beginning of the optimization process, you can make meaningful statements about the success of the optimization. Because the goal of every 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.

NOTICE!

Always measure the page load time first before you optimize the performance of yourssite . This is the only way you can estimate how successful the optimization was.

From the user's perspective, a faster page load time and smaller page size are always an advantage. The patience and attention span of the average user is constantly decreasing (as this study by Microsoft shows) - this is particularly crucial for eCommerce - and more and more visitors are coming via mobile devices. Already in 2016 56 percent of Germans use the Internet regularly via smartphones or tablets called. Connection speeds and data volumes are not always unlimited. Slim, fast sites ones are therefore appropriate.

However, Google PageSpeed only gives hints about the optimization potential of yours site and allows only few conclusions about the user experience. The low significance of Google PageSpeed error messages is reinforced by the fact that the tool cannot be shut down in certain areas or only at considerable additional expense.

For example, the reference to browser caching will always appear when external resources - including Google's own services - are integrated. But these resources can't be covered by your site browser caching. The error message has no relevance to your site user experience, 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 judge primarily by the Google rating, but by the loading time. This is the only really important variable.

But what about my Google ranking?

The example of the missing browser caching makes it very clear why you should not be unsettled by a supposedly bad PageSpeed result.

For site example, if you have Google Maps or Google Analytics integrated on yours, they will cause the following error message:

Typical Google PageSpeed Insightserror messages: Browser caching is allegedly not used properly

The same applies to other third-party services. For example our support chat.

So every time we PageSpeed Insightstest ourssite , this point is chalked up. That means we know that this factor always distorts our results negatively and therefore simply ignore it.

For the SEO of yours site this means: Also for the ranking at Google the loading time and the user experience are much more important than the concrete PageSpeed rating.

Because if you optimize the loading time of yourssite , you will automatically edit many of the areas that are important to Google. So improving load time and Google PageSpeed score are related in some ways.

But in my opinion you should not lose yourself in the hunt for a 100 rating.

But now to the optimization steps!

Error message 1: Compress CSS

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

Shut up Google PageSpeed! Troubleshooting the most important error messages

Meaning: This error message indicates that the CSS files of yours site can still be compressed (or in the case above, that this has already been done successfully). Such compression will reduce the number of characters in the documents. This shrinks the file size. For example, comments, spaces, and formatting are deleted.

Implementation: Even if this reference has a deterrent effect, the implementation is very simple. In principle, there are two possible solutions for this case: If you are fit in CSS yourself, you can manually reduce the number of CSS files and create a Abbreviated form use. You can also view the CSS files using online tools, such as CSS compressor , CSS Minifier...reduce it by hand.

Shut up Google PageSpeed! Troubleshooting the most important error messages

Of course there is also the comfortable solution using CSS miniaturizationPlugins in WordPress . Some Plugins of them directly do an all-round wrapping 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 in WordPress HTML, CSS and JavaScript, see in this article.

With HTTP/2 it does not necessarily make sense to combine CSS

The above mentioned minify plugins are widely used. Because they are comfortable and take over the compression and summarization of CSS (and much more) fully automatic. Until recently, merging CSS files also made a lot of sense. Now it's different: Since the HTTP/2 standard browsers are able to load multiple files simultaneously from the web server.

This means that the data no longer has to be combined, since HTTP/2 allows several data packets to be exchanged simultaneously. HTTP/2 must have been set host up by , for example, and can only be started with SSL certificate can be used.

So before you decide on one Plugin with several dozen functions and configuration options, think carefully about whether you need it at all. Especially if you think you can optimize CSS yourself.

Because an extra plugin one may make yours site slower. Especially if the other functions of the all-rounders plugins cannot develop their full potential.

Error message 2: Remove resources blocking rendering

This message also makes many users sweat, because it is not so easy to implement and is also one of Google PageSpeed's eternal criticisms.

Shut up Google PageSpeed! Troubleshooting the most important error messages

Meaning: A web page is built in a certain order. This loading order can be optimized. PageSpeed almost always complains that CSS files block this optimal loading order. This is true even with already very well optimized sites (as the Caspar Hübinger case shows). Nevertheless, the note 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. Therefore, it will not be displayed until the corresponding CSS command is loaded. This increases the loading timesite , but mainly affects the user experience, because the site perceived loading time is longer.

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

This example makes it clear what I mean. The code snippet below defines our specific background color for the blog. The



You can implement this optimization measure in two ways: You can touch the code yourself and move the CSS code into the header, or you can let one Plugin do the work. Again, you can usePlugins Better WordPress Minify can help you with this.

Google PageSpeed Insights error messages - excerpt from the plugin "Better WordPress Minify"

The Minify-Plugin shows in the options for example, which CSS files have already been moved into the header. You could also manually add more CSS resources here.

Google PageSpeed Insightserror messages - excerpt from the optimization plugin Autoptimize

The Plugin Autoptimize, on the other hand, takes a turn for the better: Here you select the options for all CSS files not excluded from the process.

The extracts from the options of the plugins show: Even the plugin variant cannot be implemented without a basic understanding of the process. Also into the plugins so you're gonna have to get used to it.

Error message 3: Coding images efficiently

Also at this point, there is a lot of complainingPageSpeed Insights. However, this case is almost always quick and easy to implement and usually brings tangible advantages in terms of loading time.

Shut up Google PageSpeed! Troubleshooting the most important error messages

Intentional meaning: Many users underestimate the role of image size in the loading time of their site . Pictures are very often one of the biggest brakes on loading time. 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 one image. automatically WordPress generates several thumbnails of the image when uploading. So if you don't use the originals on your homepage, but smaller versions of them, i.e. thumbnails or Featured Imagesthen these should of course also be optimized. Thus, one image quickly becomes several files, which also entails a multiple data load.

Implementation: Basically you have two possibilities to optimize your images. Either you optimize the images before uploading or after or during the upload. The former you can do via online or offline tools, the latter you do via corresponding WordPress Image enhancement plug-ins.

If you can sensibly integrate compression into your workflow, it makes sense to optimize the images before uploading them. For this purpose there are online tools, like Octopus.io. Or you can reduce the quality and thus the file size of your images offline, for example directly in Photoshop. That way you save extra Pluginand keep yours site slim.

The more comfortable solution is of course a Plugin. Add-ons like Optimus , 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, they plugins work with a so-called "lossless compression". This means that although the file size of the images is reduced, their visible quality does not decrease.

Error message 4: Activate text compression

This error message from Google PageSpeed can be fixed very quickly and can site significantly reduce the loading time of your website.

Shut up Google PageSpeed! Troubleshooting the most important error messages

Intentional meaning: You have already reduced the size of your site images and CSS as much as possible. That's good! But this is not the end of the story. Because now you can use another compression mechanism. You probably know this process from downloading large data packages: These are usually in zipped, compressed form. This makes the data smaller during the download and therefore the download faster. However, the data packets still have to be unpacked after downloading. Exactly the same happens during page building: The web server delivers the data packets in compressed form, 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. If you are a RAIDBOXES customer, you do not have to worry about anything. Because we have the particularly strong Brotli compression active.

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


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

Error message 5: Provide static content with an efficient caching policy 

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

Shut up Google PageSpeed! Troubleshooting the most important error messages

Meaning: Browser caching means that the browser stores a static version of yours site and does not have to ask the web server for a repeated visit, but that it is site already loaded.

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


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

Also here applies: If you are a RAIDBOXES customer, then browser caching is already active by default.

My 2 Cents: Without cache everything is nothing

Well, now you have optimized the images of yourssite , reduced CSS, compressed and put them in the right order and made your visitors' browsers cache themsite . All these measures shorten the page load time of your site .

Intentional meaning: Without a proper cache, however, you forgive a lot of this potential. Caching is and remains by far the most important performance factor. A cache stores the contents of your WordPress site between and ensures that the whole site does not have to be reloaded each time. Instead, a static, pre-rendered variant of yours site is delivered from a cache. This bypasses especially the slow PHP and database.

Implementation: Again, the following applies: Either yourhost server-side caching or you can use a cachingPlugin. Here are some very powerful Pluginsones that cache large parts of your site website and lead to a significant reduction in loading time for returning visitors.

The high potency of caching plugins is also its greatest weakness. It may well be that caching plugin slows down your site first-time visitors. The more complicated your blog or yours site is, the more complicated and extensive the cache engine that caches your blog must be. This is especially relevant for shops.

If you run a comparatively simple website, minimalist solutions may well be better than caching all-rounders. One of these slim Plugins solutions is for example cache enabler.

You should note that caching plugins usually also take over the reduction and merging of CSS or JavaScript. Therefore you should check if your caching plugin is not already using the plugins for CSS optimization is superfluous.

If you use server-side caching, it is recommended to deactivate the caching functions of plugins, like Autoptimize, or to test once, if they bring any further performance advantage.

Conclusion: Move a plugins lot with just a few

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

Be sure to take a closer look at the plugins that you use. Only if you know what happens when you use certain functions, you can optimize sensibly. Overloading the site with optimization plugins tends to bring little.

And you should make sure that you measure your successes correctly when you optimize. No matter whether you optimise by hand or via Plugin the internet. Use PageSpeed Insights as a first point of orientation to identify your site weak points. Then measure the loading time of yours site before the optimization. Only after the initial situation has been recorded does it really make sense to optimize your site step by step. Because only then, if you know the loading time before and after each optimization step, you can determine what the individual optimization measures have achieved.

As a system administrator, Tobias watches over our infrastructure and finds every possible way to optimize the performance of our servers. His tireless efforts mean he can often be found on Slack in the early hours.

Comments on this article

Leave a comment

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