Google PageSpeed Insights is a great way to get a quick overview of the optimization potential of your site . Today I'll 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.
The colleague Caspar Hübinger has found some time ago in one of his blogposts post, let's say, very clear words for his Google PageSpeed Insights-result. And he criticizes not only the tool, but also the use of the tool by the users. After all, if you don't know how to interpret and fix each optimization suggestion, you can quickly get lost in the nonsensical pursuit of a 100 score. That, however, would be unwise. Because utopically high Google PageSpeed ratings are mostly a waste of time. More important is the optimization of the loading time.
Fully responsive, loads in 500 ms, and Google's shiny shittool tells me my mobile performance is "fair", bc of render-fucking-blockhead CSS.
- Caspar Hübinger (Glueckpress)
Today I'll show you how to interpret the most important error messages from Google PageSpeed Insights and optimize your site 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 often experienced that users were strongly fixated on their PageSpeed score without having an eye on the loading time of their site .
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 solely on the results or error messages from Google PageSpeed Insights . Because the Google tool does not measure the most important parameter of your site : the page load time. To measure this correctly, I recommend Webpagetest.org.
Only if you have the page load time in mind from the beginning when optimizing your site, you can 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.
From a user perspective, faster page load times and smaller page sizes are always beneficial. The patience and attention span of the average user continues to decrease(as this study by Microsoft shows) - this is especially crucial for e-commerce - and more and more visitors are coming via 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 sites is therefore appropriate.
Google PageSpeed, however, only gives hints on optimization potentials of your site and allows only few conclusions on the user experience. The low significance 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 the browser caching of your site at all. So the error message has no relevance for the user experience of your site , 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 missing browser caching shows very well why you should not let yourself be put off by a supposedly bad PageSpeed result.
If you have included Google Maps or Google Analytics on your site , 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 site at PageSpeed Insights , this point is chalked up. That is, we know that this factor always negatively biases our results, so we simply ignore it.
For the SEO of your 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 load time of your site , you will automatically work on many of the areas that are important for Google. An improvement of the load time and the Google PageSpeed score are therefore related in a certain 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.
Meaning: This error message indicates that the CSS files of your site can still be compressed (or in the case above, that this has already been done successfully). Such a reduction 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 hint seems daunting, the implementation is conceivably simple. In principle, there are two possible solutions for this case: If you yourself are fit in CSS, you can manually reduce the number of CSS files and use a shorthand notation when creating them. You can also reduce the CSS files yourself using online tools such as CSS Compressor or CSS Minifier.
Of course there is also the comfortable solution by means of CSS minificationPlugins in WordPress . Some Plugins make directly an all-round blow and can compress and optimize not only CSS, but also JavaScript and HTML.
More Information
With HTTP/2, merging CSS does not necessarily make sense.
The just mentioned Minify-Plugins are widely used. This is because they are convenient and take care of compressing and merging CSS (and much more) fully automatically. Until recently, merging CSS files also made a lot of sense. 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 the data no longer necessarily has to be combined, since with HTTP/2 several data packets can be exchanged simultaneously. HTTP/2 must, for example, have been set up by host 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 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 that block rendering
Also this message drives many users the beads of sweat on the forehead, because it is not so easy to implement and also one of Google PageSpeed's eternal points of criticism.
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. And that even with already very well optimized sites (as the case 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. This increases the loading time of your site , but mainly affects the user experience, as the site feels like it takes longer to load.
Umsetzung: Eine gängige Lösung ist die Umsetzung einer Daumenregel: CSS in den Header. Das bedeutet, dass du CSS-Code vom Hauptteil des HTML Dokuments, dem <body>, an den Anfang des Dokuments, den <head>, verschiebst und dort als <style> einbindest.
An diesem Beispiel wird deutlich, was ich meine. Der Codeschnipsel unten definiert unsere spezifische Hintergrundfarbe für den Blog. Das <style>-Element wird im head des HTML-Dokuments geladen. So lädt der Seitenhintergrund nicht erst am Ende des Dokuments und erzeugt einen unschönen Farbsprung oder blockiert gar das Rendering.
<head>
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #f5faff; }
</style>
</head>
Again, 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. Again, Plugins like Better WordPress Minify will help you out here.
The MinifyPlugin 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.
The Plugin Autoptimize, on the other hand, goes all out: Here you select the options for all CSS files that are 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: 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.
Significance: Many users underestimate the role of the image size for the loading time of their site . 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 site slim.
The more comfortable solution is of course also here a Plugin. Add-ons 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 error message from Google PageSpeed is very quick to fix and can significantly reduce the load time of your site .
Meaning: You have already reduced the images and CSS of your site as much as possible. 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 compressed, 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 or you have to activate it yourself. If you are a Raidboxes customer, you don't have to worry about anything. This is because we have activated the particularly strong Brotli compression as standard.
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: Delivering Static Content with an Efficient Cache Policy
In my opinion, the reference to browser caching is by far the most annoying on 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.
Meaning: Browser caching means that the browser saves a static version of your site and does not have to request it from the web server when you visit it again, but the site is already loaded.
Implementation: Either your host already has browser 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, which means that the static version of your site 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>
The following also applies here: 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 the images of your site , reduced CSS, compressed and put them in the right order and made the browser of your visitors cache the site . All these measures shorten the page load time of your site .
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 stores the contents of your WordPress site and ensures that the entire site does not have to be reloaded every time. Instead, a static, i.e. already rendered variant of your site is delivered from a cache. This bypasses the slow PHP and the database in particular.
Implementation: Again, either your host already has a server-side cache set up, or you are using a cachingPlugin. Here there are some very powerful Plugins, which cache large parts of your site and lead to a significant reduction in loading time for returning website 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're running a comparatively simple website, then minimalist solutions may well be better than caching behemoths. One of these slim Plugins 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 to measure your successes properly when optimizing. No matter if you optimize by hand or via Plugin . Use PageSpeed Insights as a first point of reference to identify the weak points of your site . Then measure the loading time of your site before the optimization. Only after this recording of the initial situation does it really make sense to optimize your site step by step. Because only if you know the loading time before the optimization and after each optimization step, you can also determine what the individual optimization measures have brought.
