We don’t like to wait. If people have to wait when visiting your website, they’ll get tired of it and will go visit another one. Your web loading fast is an essential requirement nowadays. But how can we know if a website is slow or fast?
I know, this question seems a bit stupid. You can know whether a web is fast or slow by measuring its loading time, duh. The difficult thing is to know if the value resulting from this analysis can be classified as “slow” or “fast”. Waiting 2 seconds may not be a problem, but if my website loads in half the time, that would be absolutely better, wouldn’t it? Specially if you take into account things like your website might only take 2 seconds to load on your Internet connection, but what about those who hve slow connections?
All this is a more complex problem than it may seem at first. In order to establish comparable measures, there are evaluators of the optimization level of the websites, such as Google PageSpeed Insights or GTMetrix, just to mention a few.
These evaluators are able to analyze a web page and give it a grade on a scale of 0 to 100 depending on its level of optimization. In addition, they detect the characteristics of the web and indicate suggestions that we can carry out to improve its grade and, supposedly, its speed.
However, seeking perfection can be counterproductive. Searching for excellence in Google PageSpeed Insights can neglect other aspects of your website that are also important, such as the user experience.
Searching for Excellence in Google PageSpeed Insights
We have recently rewritten the theme of our website from scratch and have transformed all of our pages using blocks from the new WordPress block editor. It has been an exercise to better understand the characteristics of the block editor and also see their shortcomings, learning by doing.
Taking advantage of this task, we have analyzed our website with Google PageSpeed Insights to try to improve its final grade and get as close as possible to the desired 100. Next we will see some of the points that we have been improving thanks to the indications of Google and our conclusions about it.
Use an appropriate size for the images
We have already discussed this topic in our blog. Remember that you should try to use image sizes compatible with what your theme needs. Don’t use giant images because they are not necessary.
If Google PageSpeed Insights complains about your images, the good thing is that it will tell you what images cause the problems so you can fix them. It is a laborious work to do but whose results have a direct impact in the loading time of your web.
Nelio Unlocker
Switch to WordPress safely while keeping your design and content
Improve your SEO today and boost your site speed by converting your pages into HTML, CSS, and WordPress standards. With zero technical knowledge required, you’ll only pay for what you need.
Postpone the load of images that do not appear on the screen
For all those images of your page that to be seen the visitor has to scroll down, what is recommended is to apply lazy loading.
What you get by using lazy loading is that you only ask the server for an image when the visitor scrolls and needs to see it. In this way we avoid overloading the server in the initial request and reduce time, making the web load faster. I recommend you this article about it. If you want to use a plugin for lazy loading, maybe this one will help you.
In our case, the SiteGround optimization plugin includes lazy loading, so we didn’t need anything else to activate this technique on our website.
Make sure the text remains visible while the web font is loading
If you use Google Webfonts, as we do, it is ironic to check how the script that Google gives you to load the fonts is detected by Google PageSpeed Insights as improvable.
According to Google, you should use the CSS font-display in @font-face for users to see the text while loading the web font. In particular, you must put font-display:swap in the loading of the fonts so that the browser does not block the rendering of the text until the font is available. You can download Google fonts and import them directly using font-display as explained here.
With this the visitor is able to see the text from the beginning, even if the specific font by Google is not loaded. At the moment in which the font becomes available, the browser will apply it to the text, transforming its style to the desired one.
Remove resources that block rendering
CSS styles and JavaScript scripts are increasingly used to change the content design and make it dynamic, respectively.
If we load the CSS and JS in the <header> of the web, the normal thing is that the content rendering is blocked and the web doesn’t load contents until the styles and JavaScript files are processed.
One option to avoid this is to move these files to the <footer> of the web. By doing this, all the content that goes in the <body> will load and render first, without being blocked.
Also it is recommended to use the attributes defer and async in JavaScript scripts so that the load is deferred or asynchronously done.
Another aspect that helps to improve the final score of Google PageSpeed Insights is the fact of minifying and compressing the CSS and JS files, as well as combining them in a single CSS and JS file respectively. However, be very careful with the combination because if you combine them in an incorrect order you can suffer flaws in the styles and break the execution of the JavaScript code.
You can use this plugin to get better results, but again, use it carefully.
Downsides of Improving the Speed of Your Website
After applying solutions to the suggestions proposed by Google using the Google PageSpeed Insights reports, the loading time of the website is reduced. However, this has a price that it is not clear if we want to pay.
One of the side effects of lightening our website is that the user experience a visitor gets might not be as good as it was. Let me further elaborate …
For the content of our website to be rendered as soon as possible in the browser of our visitors, we have postponed the loading of JavaScripts and CSS styles in the footer of our web (they have gone from the header to the footer). And we have also allowed the text to load before having the web font.
All this causes the visitor to quickly see the content of the web without style. Which means that they see everything quite flat and ugly. In addition, they will notice how the font of the text is changed when it is already available. Visitors will also see some flickering when the CSS and JavaScript styles are applied and executed.
Before, in a common WordPress installation, the visitor saw the web load without any problem. Now he will see that it loads a little faster, but all this flickering that he experiences reduces the user experience and it is possible that it makes the visitor think that the web is loading weirdly. Or even that something is broken on the web because every time you navigate to a page the flickering appears for a moment.
Is it worth providing this weird feeling to visitors just to win a handful of milliseconds in loading time and a few extra points in the Google PageSpeed Insights? We don’t think so. And for this reason we have return to the common way of loading styles and scripts that WordPress does by default.
Whether or not this has a negative effect on other aspects, such as SEO, the truth is that we don’t know (and we do not believe anyone knows for sure). Nor are we clear if the evaluation of Google PageSpeed Insights has as much weight as some people believe.
It is clear that there are aspects that need to be improved, such as the correct size of the images, use minified files to reduce their weight or avoid loading everything that is not going to be used on the page.
Don’t go crazy with the evaluators of the optimization of your website and with getting the maximum score. After all, your target visitor is made by flesh and blood, unable to appreciate minimum differences in tenths of a second. Once your grade is mostly correct, focus on something else.
Featured image from Taun Stewart on Unsplash.
Leave a Reply