One of the latest trends on page optimization is the Google PageSpeed. For those of you not familiar with this tool, we could say that PageSpeed is a tool to assist webmasters, developers, bloggers, … to optimize their websites for desktop and mobile in order to achieve the most engagement experience as possible. You can read more about it at Google PageSpeed developers page.
In this article, I will show you how to increase the Google’s PageSpeed score, through a couple of plugins and online tool for Critical CSS, without the need to code and any changes to your themes.
You might want to check also our article on a more in-depth coding pagespeed optimization, to learn how to get speed optimization using Node.JS and Gulp.
As a lot of people, I was committed to having Biitlog.com getting the so wanted 100/100 mark. But before going straight to optimizations, let me say that I’ve research several articles on this subject, but the large majority of them, need to code the WordPress theme. Those not coding were using 3 or more plugins to achieve it. Neither the first nor the second were good enough for me.
I would like to achieve the 100/100 target, with a couple of plugins only and no code at all! And this is the main reason why I’m publishing this article. Hope you enjoy it.
Some notes to bear in mind. In this tutorial, I’m going to focus on the homepage of biitlog.com. Although, the point of Google PageSpeed, is not only your main door but the whole site. So, by having a high score on the homepage, doesn’t mean your other pages have the same score. Actually, they don’t. It will depend on the content of it. For instance, a post page with a lot of images not compressed will definitely rank lower than a page without pictures or with optimized pictures.
Having said this, my advice on Google’s PageSpeed optimization is that you focus first on the pages you get more people visiting you. Depending on the main source of your visitors, maybe most part of you will realize that actually, the most important pages of your site are not the homepage, but an app page or a very popular article.
Is Google and it’s partners, paying attention to PageSpeed?
A peculiar and interesting fact is that Google recommends 3 website site builder providers for responsive websites which should perform good and high score on all devices.
I then took the chance to check each of these company websites. They should have a very high score, right? Well, that was not the case, at least for two of them.
Checking Wix website it ranks really low as you see below.
Checking Weebly, and the result was a bit better compared to Wix.
They are mobile friendly indeed, but on what speed concerns, they are not enough optimized for google!
The true crown jewel is dudamobile. It ranks +90 on any segment.
And, what if we check the thinkwithgoogle.com website? I mean, definitely, they should give the example. Let’s see…
Huh?!?! No way! No 100% score in any dimension? So, actually, the site that gives recommendations doesn’t follow it’s own guidelines? This remembers me an old saying “Do what I say, don’t do what I do!”.
Maybe the reasons behind of these results take to what I’ve mentioned before. The fact a website ranks low doesn’t necessarily mean it is bad.
Well, let’s give some honor to Google. If we try Test My Site page, results will be pretty good.
Anyway, the point is, don’t be frustrated if you are unable to achieve the 100/100 target. You don’t need it to be better than google, right?
We could also test Amazon or Microsoft and other very well-known websites. You will be amazed at how those sites rank low.
But why it might be so important to have a speedy website?
According to Google, Mobile PageSpeed is a Visual Designer’s Problem. Why? Because designers haven’t changed much in the last 20 years, while media have evolved rapidly. Furthermore, the internet now as reached almost every corner of every street in the globe, although is good to remember that there is a big gap between technology used, around the world. According to this Google’s article, in 2020, 70% of the cellular or mobile network, will be based on 3G technology. Yup, most parts of the western countries have implemented 4G networks and are currently preparing for the 5G. But even within these countries, there are certain areas that are not covered by the latest generation.
Bearing in mind that 53% of people will leave a page if it takes longer than 3 seconds to load if you speed up your website, means that you are reducing the potential visitors bouncing rate.
And why is this so important for Google?
Isn’t obvious? I mean, more people visiting every website? It’s all about advertisement.
For a company that is focused in one country, when they reach certain market share, they need to expand their radius of business to external markets, right? Otherwise, they will stagnate. No one enjoys that, especially Nasdaq! So, Google already covers all the world, and unless NASA discovers a real cool extra planet with other 6 billion people, it will be difficult to increase the number of potential consumers. Therefore, if they start to force people to get their sites faster, means that those sites will have more people to click on their ads! Easy, right?
But now, how do I get my site faster?
There are 10 points Google’s PageSpeed Insights covers, and those are the ones we need to look for improvement.
- Avoid landing page redirects;
- Enable compression;
- Optimize images;
- Prioritize visible content;
- Reduce server response time;
- Leverage browser caching;
So, we will need to cover every of these points to get a speedy website.
How it was before optimizing
This was how it looked like Biitlog before performing Google PageSpeed optimizations. It should be mentioned that Image Optimization and Jetpack were already running before this optimization exercise, which improved the initial score.
Although, still a lot to be done, especially on what mobile is concerned.
As you can see, HTML is Minified, and compression too. This is mainly due to the fact it is being used Jetpack, Cloudflare. This one is particularly important in the final of the optimization process, to obtain the so wanted 100 mark.
Avoid landing page redirects
How? If you use responsive web design, you don’t need to bore with this. Otherwise, avoid using subdomains for mobile versions of your website like www.biitlog.com to m.biitlog.com. This is not good. If you check, for instance, Dudamobile, you will notice that actually, they suggest m.mysite.com redirection. Not sure why!
Use Jetpack or AMP. Dislike the last but love the first. In fact, if you are having Jetpack installed on your blog, it is half way to get the 100 mark of Google PageSpeed! Really!
On the other hand, every time AMP was activated or deactivate, it was writing to the .htaccess file root commands, which was making loops, taking the URL to return 500 error!
To Optimize Images, we are currently using EWWW Image Optimizer Plugin. Besides it allows to convert automatically any picture upload to the media, it also allows optimizing all the other images already in the gallery. Furthermore, there are a lot of other options you can use such as webP. So, from those I’ve seen, this one was free and with a lot of interesting features.
Enable compression and reducing server response time
Within several cache plugins for WordPress, usually, the ones people choose are W3 Total Cache and Automattic’s plugin WP Super Cache. Any of those, are good. But I’ve tried a couple of others. Namely, Comet Cache and WP Fastest Cache.
Could get good results with Comet, but with WP Fastest Cache was even better. With no other changes, got instantaneously 70/100 on mobile and 87/100 on Desktop. Realy good result.
This is how I’ve configured Fastest Cache plugin. You will notice that haven’t selected the Combine Js option. If we don’t’ do this, it will not be possible to defer it to the footer, in the next step.
This is the result with these settings
Why haven’t I choose the two most known Cache plugins?
Regarding W3 Total Cache, I got some issues, since I was making several changes to open permissions on .htaccess. This took me to several 500 errors, besides, I’ve seen once all my website being deleted. Still not understanding why. With WP Super Cache I couldn’t get it working as I wished. These two have several options and tweaks, but the point is that they were not taking me to the point I wanted, so I just quit for it.
Eliminating the render-blocking
We could actually try to solve it with WP Fastest Cache, but that option belongs to the premium version so, we don’t want that. We still have alternatives.
In order to optimize these points, we will go to use Above The Fold Optimization. This is the best plugin for Google PageSpeed optimization available. And it is totally free. As you could remember, in the WP Fastest Cache, we couldn’t Minify Js, only reduce it trough Combine Js option.
What is Critical CSS
Before configuring this plugin, it is useful to understand what means and what it does Critical CSS.
Every time a web page is rendered pushes a CSS file, which can increase a lot the time to fully load the page. This matter gets’s even more relevant, when the themes you are using, have extremely big CSS files. But what if we could render first the top part of the screen, so the visitor could immediately see your site and only after, render the full CSS? Critical CSS
Critical CSS is the part of the web page that the user can see when they load it. So, if we load this part first, we will need fewer resources, therefore, less time to renderer it. This is what is called Above the Fold.
There is a cool article at Smashing Magazine about Critical CSS using Grunt, which is a Node.js package. If your hosting allows deploying Node.js, maybe you want to read it and give it a try.
Setting Above the Fold Plugin
In order to create the Critical CSS, you must first copy your main CSS (CTRL+C) from the editor in your WordPress. Go to Appearance – Editor.
Now, go to this Critical Path CSS Generator, fill the URL of your main page and paste the CSS code to the 2. FULL CSS box. Click 3. Create Critical Path CSS. You will see a new box with a minimal CSS. This is your Critical CSS.
You can see the Critical CSS is minimal, compared to the full CSS. This has a direct impact on the size of the file. We have ended up with a 7.24 KB CSS file size.Getting back to the Above the Fold plugin, select the Critical CSS tab and past your Critical CSS to the Global CSS.
Getting back to the Above the Fold plugin, select the Critical CSS tab and paste your Critical CSS to the Global CSS.
You might want to use the Beatify, Minify and Validate tools that this plugin offers. In this example, I’ve minified it.
You can also add additional Critical CSS to specific Pages/Posts. This is a real cool option since we can have different pages which do not use the general theme. For instance the Login page.
One of the issues I frequently faced using other plugins, was the fact I was unable to add the Google Fonts script to minify Js process. This was resulting in fix warning and consequently a lower score.
With this plugin, you are able to get it included. First, go to CSS tab and select Optimize CSS Delivery. Select Enhanced loadCSS and in the position option chooses Footer.
Now enable Optimize Web Fonts option. Choose Async from Google CDN and defer it to the Footer. In the Google Web Fonts, check in your theme which Fonts are you using and insert them here. Don’t forget to choose also the different sizes. Save it.
Now let’s see what it happens.
Nice! No Render Blocking!!! And almost getting Mobile results on Green!!!
Don’t know why Jetpack CSS is not getting combined or minified. With any of the tried solutions, there is always something from Jetpack that is not included in the process. But still prefer this one, as we still have a card to play. CloudFlare.
In the last article was about Cloudflare, we have covered how to setup this service. Besides the improvement in the safety of the website, it also helps to deliver the content faster to your visitors, it works like a CDN (Content Deliver Network).
But the most interesting thing is that offers some features which also helps the load time of the pages to be improved. Those features are Rocket Loader and Auto Minify! So, if you have not yet applied for CloudFlare, go for it. It is free.
Now, let’s see what is the result!
Here it is the big 100!
Please, make sure you purge your cache every time you make a change. It is important since otherwise, you are not getting the result. For CloudFlare, make sure you set dev mode while you make the changes in your site. Only when we reach the last point, you should disable the dev mode.
Google Page Speed is only one of the tools to check how good our pages are. Although I suggest that you give a try to GTmetrix which will give you additional data and test options.
Let me know what you think about this and the results you have obtained. Suggestions? Of course!