PageSpeed Insights Ranking is NOT the Bible
The very first and most important question is — What do you want to achieve? Do you want a fast and user-friendly website loading for your website visitors? Or do you want to please Google so that it gives you better score?
Make a choice.
PageSpeed Insights is used by many developers. It primarily evaluates the page loading speed on mobile device and desktop PC and it also helps to identify certain issues the developer may have overlooked. It might be a problem with website caching or unoptimized images etc… It also attempts to provide you with factual recommendations that should lead to better evaluation results. For achieving good results you need to use i.a. the following:
- Minified files
- UglifyJS for Javascript
- Compressed images
It happens quite often that PageSpeed Insights behaves against the human logic. I will explain.
Render Blocking CSS
Google PageSpeed Insights is ruthless when evaluating the CSS loading method. It is not enough to put part of the styles in-line within HTML which are displayed within above the fold. As soon as you include other styles via external link, you’re busted. Google will evaluate it as render blocking CSS — and it penalizes your website. Even when CSS has the size of only 4kb!!! Personally, this misstep cost me minus 40 points out of the overall score…
Sometimes the design of the website itself is complicated enough and therefore separating the style for above the fold only is very complex.
The right solution does not exist
Unfortunately, there is no unabiguous solution for CSS loading. If all the styles were stated inline, it would take too much time for them to load (bad for Google). In addition, it would be complete nonsense to proceed this way as CSS styles are very robust nowadays.
Ideally, the correct solution should be explained directly in HTML specification. However, using of attributes is not the standard and not all the browsers support it (especially older browser versions).
Therefore various experimental solutions are available.
It is usually bypassed by having the rest of the web page, outside of above the fold, loaded by Javascript. Most often via a third-party CSS library, e.g. LoadCSS. This method is used by e.g. Smashing Magazine. But is this the right way? Should not it be done differently?
Furthermore, it is a time-consuming implementation and therefore it is questionable if it is worth doing it… whether it really pays off investing so much time and energy for Google’s greater satisfaction :-)
And most importantly — why is Google even evaluating the CSS loading if there is no correct procedure explicitly defined anywhere?
Too large pictures
Another typical problem is the size of images. Image optimization significantly affects the page speed, no doubts. No one will wait for long tens of seconds for the website’s content to be loaded.
But what to do if you’ve already reduced the size of all your images, but it’s still not enough for the speed checker?
For one of my websites, after the 70% reduction of image size, speed checker recommended further 4% reduction. So I optimized them further in an hour and speed checker was finally happy. But this was no longer the case on the following day. PageSpeed Insights requested further image size reduction by additional 13%?! You can see that it is quite questionable to what extend such results can be trusted.
By the way, the website evaluation via PageSpeed Insights tool was different every time I tried to run it. As well as results depended on the server the website was saved at the time of testing.
Not all pictures can be repeatedly compressed
On some illustrative photos, users won’t notice any big difference when the photo is compressed. But there are certain types of product photos, like detailed shots of the product parts (e.g. iPhone 7’s screen edges), which cannot be reduced in size too much as they would become blurry.
However if you do not reduce the size of such photos, PageSpeed Insights will strip few points of your score and your ranking will get worse. At the same time can you imagine using bad quality, low resolution photos for your product presentation? I can’t.
You would loose 90% customers immediately at their first visit.
Why you shouldn’t blindly follow PageSpeed Insights’ recommendations
PageSpeed Insights is a very helpful tool to get an approximate picture on your website’s speed and optimization. However it is not an idol that you should hold at all costs. On the one hand it is questionable how real the results are — if one minute the image optimisation is satisfactory and an hour later not. It’s also not fair that Google evaluates CSS style loading without having a clear solution. And it is nonsense too that it doesn’t take into account the total size of CSS.
PageSpeed Insights is like a fire… it’s a good servant but a bad master.
However, the biggest problem is that it “forces” the developer into such solutions that might be technically correct, but counter-productive for the end-users. Ultimately it is the website users who are to become your customers and who will pay for your services. Not Google.
Did you know that even apple.com doesn’t reach full score for its mobile version?
A big paradox
Although Google is trying to dictate how you should optimize your website, it does not have its own websites optimized either. For example Google products has only 62/ 100 points. Quite funny, isn’t it?
Therefore you should not blindly follow all the recommendations and try to reach full score…
Btw. how many points does your website have? Do you think it is sufficient or is it low? Are you planning to do something about it?
If you enjoyed this article, hit the ❤ button below — or FOLLOW me!
The following article will be on UI elements that should not be used anymore (but that are still implemented by designers into their websites).
