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.
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 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".
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.
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.
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:
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.
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.
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.
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.
Implementation: A common solution is to implement a rule of thumb: CSS in the header. This means that youmove 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.
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.
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.
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.
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.
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.
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.
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.
Also here applies: If you are a RAIDBOXES customer, then browser caching is already active by default.
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.
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.
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.