WordPress: SEO and Site Speed importance

For good SEO results, you need good site speed. Keep your site as fast and user-friendly as much as possible. How to speed up WordPress site, and where to look if you experiencing poor results?

For this tutorial, I’m going to show you my site-speed results from GTmetrix. This web service I find legit for site-speed testing purposes. If you like, you can check your site speed using Google PageSpeed Insights also.

GTmetrix site speed
Check site speed using GTmetrix

GTmetrix results are >90% which is great. Any value less than 90% in my own opinion requires the site owner to take an action. Don’t ignore bad Performance or Structure score. Keep your site healthy to take all the SEO benefits from that.

The picture under this paragraph shows really good results measured with the Google PageSpeed Insights. To be clear, these results are made by testing my own site. Later on, I’m going to write about fixing some other sites and making them as good as possible.

Google Speed Insights
Google PageSpeed Insights

Site-speed importance is not something to negotiate. Google stands clear about it and it is something every site-owner needs to be familiar with. In case you experiencing any site performance misbehave take it seriously and try to fix any issue you run into.

Where to look for more speed?

The first step is to check for the hosting plan. Make sure your site is well hosted and that there are no significant issues with hosting your site. If you find problems of that kind, try to fix them.

Next thing is to make sure that the WordPress theme isn’t a troublemaker. Check for the theme you’re using and make sure it behaves well. Responsive WordPress themes are complex in a way, and you should go for a theme with good reviews and a legit brand.

Note: Don’t ever go trying nulled theme no matter if it is WordPress, Joomla or any other theme.

Make sure you’re using only plugins that you actually need. Don’t just randomly install plugins. If you have plugins already installed, and you’re noticing strange behavior, try to turn off all the plugins and then turning them on one by one. While turning plugins back on, try to figure out if the problem has gone. In that way, you can isolate the problem, in case one of the installed plugins is actually faulty.

Any remote source (JavaScript, Fonts, Images, etc…) affecting website loading speed. It is good to know that, so you can prepare your strategy for loading speed improvement. Later on, I’ll write a post on how to revoke Google AdSense script load. The trick that I’m willing to share later on works perfect for WordPress site speed, and it only applies to those sites using Google AdSense Automatic code.

Google Search Console Core Web Vitals

This is a sample from another WordPress site, where Google Search Console displays warning regarding poor URLs. What does it mean? Google is constantly tracking your site performances and based on those results your site can receive better SERP positions or vice versa.

Google search console poor urls
Search Console Web Vitals

Search Console keeps tracking Web Vitals for both, Mobile and Desktop site versions. Mostly you give ahead for mobile SEO, but don’t neglect the importance of the desktop site.

Sometimes it is hard to track all the causes, however, through the long time period you really should keep all your site URLs in the green area. Goog URLs are welcome, and now I’ll try to show you how to make that happen.

The line in red represents a really bad site vitals, and those we don’t want to see at all. Keep reading and find out how to deal with poor URLs and website speed in general.

Poor URL and URLs need improvement

What I can say from this picture is consistency. Almost every URL is marked poor URL (Mobile) or URLs need improvement (Desktop). My conclusion based on these metrics is that website in general needs to be improved. To make it more clear, I’m saying that not just one or few posts are in bad shape. It seems like something bothers WordPress code, and it needs to be fixed in that way.

By analyzing Google Search Console this is what I found:

  • CLS issue (mobile)
  • LCP issue (mobile)
  • LCP issue (desktop)

The CLS stands for Cumulative Layout Shift and it is measured inside Google Search Console, under the Core Web Vitals. This measure represents the value of unexpected layout shifts that affect the user experience on a webpage. Mostly they occur when webpage content moves around without prior user input.

In this particular case, I’ll show you an example. The following picture is actually taken from the site I’m working on and trying to fix the CLS issues.

AdSense code is causing CLS issue
Google AdSense moving content on the webpage

If you take a closer look at the picture, you can see Google AdSense appears on the top of the content. It is all good, but the problem is that the ad appears after all other content has been shown. After the content loads completely Google Ads appears and moves all the content requiring space to show. This behavior is something we want to avoid. To do that we can simply make a space holder for Google AdSense.

How to fix the CLS issue inside Google Search Console?

This is how I did it. Keep reading and try to understand what was the problem, and what is the solution for that. Original Google AdSense code has been wrapped inside JavaScript to get certain delays on showing (loading) ads. That is quite a good approach to get some extra WordPress site speed.

The original AdSense code causing CLS issues

<ins class="adsbygoogle"
data-ad-client="ca-pub-#############"
></ins>
<script type='text/javascript'>
(function() {
var done = false;
var script = document.createElement('script');
script.async = true;
script.type = 'text/javascript';
script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
var createScript = setTimeout(
function(){
document.getElementsByTagName('HEAD').item(0).appendChild(script);
}, 5000
);
script.onreadystatechange = script.onload = function(e) {
if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
(adsbygoogle = window.adsbygoogle || []).push({});
}
};
})();
</script>

New AdSense code without causing CLS issues

The problem occurs because of that delay and moving elements on the webpage. Just one line of code should stop moving elements. Take a look at the second line in the code under. That code is a placeholder for Google AdSense, keeping all other elements in their position, without unexpected layout shifts. Adjust style= to your site design and try it out.

<ins class="adsbygoogle"
style="display:block; min-width:400px;max-width:100%;width:100%;height:200px"
data-ad-client="ca-pub-#############"
></ins>
<script type='text/javascript'>
(function() {
var done = false;
var script = document.createElement('script');
script.async = true;
script.type = 'text/javascript';
script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
var createScript = setTimeout(
function(){
document.getElementsByTagName('HEAD').item(0).appendChild(script);
}, 3000
);
script.onreadystatechange = script.onload = function(e) {
if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
(adsbygoogle = window.adsbygoogle || []).push({});
}
};
})();
</script>

Google AdSense behaves well. I have moved up this ad unit and make setTimeout 3000 instead of 5000 like it was before.

Add a Google AdSense without CLS issues
Google AdSense with a placeholder

WordPress speed check

Site speed measured using Google PageSpeed Insights
WordPress site speed measured

The site is fast and behaves as I want it to. Now it is time to tell Google that we have made some changes. Go to Google Search Console, Core Web Vitals, and start the Validation process. The Validation process can take up to 28 days. Google will monitor your site through that period to ensure that the issue is fixed.

I’ll let you know when I receive the results.

I’ll post it here, as an update for this tutorial. Not only I want to see CLS results, but I’ll also monitor website speed, and check to see how new ad position generates income.

Till then, let us see what to do about this LCP issue.

How to fix the LCP issue in Google Search Console?

Unlike CLS (Cumulative Layout Shift), the LCP issue stands for Largest Contentful Paint. It measures the time needed for the largest visible element of a webpage to be shown.

LCP issue Server Response time
Reduce Initial server response time

LCP should be less than 2.5 seconds. If you are seeing the LCP issue: Longer than 4s (Desktop) or (Mobile) error in your Search Console, it means that the server is taking more than 4 seconds to render the largest visible element in the viewport.

If you have issues inside Google Search Console try to fix them.

First, try to identify the exact URL which causes an error. Then copy that URL and analyze it through the Google PageSpeed Insights tool. By analyzing URLs you’ll get both, mobile and desktop results. You should focus on just one, preferable on mobile results. Solving these issues on each one you have solved the issue on the other one also.

Check for the Google PageSpeed Insights result and identify which element has the highest load time. Inside the report, I’m working on, the Server response result is something to deal with. This is the message I see: Reduce initial server response time = 0.97 s. It is time for a detailed inspection. I’ll do it a bit later, in a few days period. This post is done for now. Hope You have learned something, and there is more to come.