Core Web Vitals and Site Speed

We were not worried about our Site’s speed until Google Search Console added a new feature:

  • Core web vitals.

It replaced the “Speed” tab.

Google Search Console “Core web vitals” tab.

 

We had everything under control…

 

But now, instead of using the FCP metric as a reference, they use the LCP:

  • But what is the LCP?
  • What is the difference between FCP and LCP?
  • What means LCP issue longer that 4 s?
    • And most important: How can you solve it?

 

Calm down: you are about to find out.

LCP and FCP: Why you should care about them

First of all, we’ll explain our experience with the FCP Issue and how we solved it.

  • To understand why Google now uses LCP, you must first understand what FCP is.
    • Everything is related.

 

Then, we’ll explain you what LCP is and why, if you follow the steps we are about to tell you, you have nothing to worry about.

 

If you improve the Speed of your site by following the instructions we are going to provide, your LCP problems will be automatically solved.

 

How?

  • Keep reading and you’ll discover exactly How, Step by Step.

Increasing your PageSpeed Insights speed

LCP and FCP are Speed-related metrics and that is something that confused us.

Why?

 

Because at the beginning, although we scored of 96% in GTMetrix, our PageSpeed Insights results (Google’s reference) were not very good.

 

Our PageSpeed Insights results were:

  • Desktop: 66.
  • Mobile: 29.

 

We then tried different things in order to improve these numbers and:

  • We finally understood what FCP and LCP are.
  • Our slow URLs started to decrease.

Our PageSpeed Insights results improved remarkably both in Desktop and Mobile versions:

We have used our “Product Mix” page as reference for this study.

 

Here, we want to show you, step by step, what we did and what we learned:

  • What is the LCP?
    • Why is Google Search Console now using it as a reference instead of the FCP?
    • How can you solve the LCP issue longer than 4 s?

 

  • What is the FCP?
    • Is it related with your Page Speed?

 

  • How you can improve your PageSpeed Insights speed easy and effectively.
    • In simple Steps you can follow.

 

  • Finally, we’ll tell you which Plugins and Theme we use.

 

Let’s begin:

In case you don’t know, we have an entire section where we share our experience while building this Site from scratch: Website building and SEO Diary.

There, you will find dozens of Posts (indexed by Topic) talking about:

  • Our SEO strategy.
  • Error solving.
  • Plugins and Themes we use… and much more.

Moreover, we share our real data, and how our Page Views have evolved since we started this Site.

What is the FCP?

The “First Contentful Paint”, or FCP; is nothing but the amount of time it takes a Page to be displayed.

It measures the time required for its first render.

  • It is not the amount of time it takes a Page to be completely loaded.

 

Since it measures the page’s “first render”, the less content you have in your heading, the better the FCP will be.

Google Search Console FCP issue: longer than 3s

 

When Google Search Console used FCP as its main metric, the FCP Issue occurred when your FCP was longer than 3 seconds.

  • We talked in the past tense because that has just changed: Now, Google uses the LCP.

Therefore, the easiest and fastest way to improve your FCP is by placing your “Heavy” Elements (Images, Videos, etc) at the bottom of your Page.

  • Now, you’ll understand why Google now uses LCP instead of FCP.

What is the LCP?

The “Largest Contentful Paint”, or LCP is the amount of time it took to render the Largest element on your Page.

  • As you may have already guessed, it penalizes Sites with Heavy Elements.

 

With this metric, it doesn’t matter if you place you big pictures at the bottom of the Page.

 

That is why Google Search Console now uses this metric:

  • Because many people “cheated” on the FCP by having “light Headings” but “Heavy Footers”.

Google Search Console LCP issue: longer than 4s

 

Now Google Search Console uses LCP as its Speed metric reference.

 

That is because, as we mentioned earlier, many users placed Heavy Elements in the Footers in order to cheat on the FCP.

 

But, but if you keep this in mind you have nothing to worry about:

  • If you have a fast Site with no Heavy Elements, you’ll have no problems.

 

Maybe, as it happened with the FCP Issue, the first few weeks, you’ll probably see that your results are not very good but, over the weeks, if you have good Page Speed results, your LCP issues will disappear.

  • Google Search Console has introduced this Tool very recently.
    • Therefore, they may have to crawl your site multiple times before getting accurate results.

 

In addition, the “acceptable” speed criterion has changed from: FCP = 3 seconds to LCP = 4 seconds.

 

We believe that if you have a relatively fast site without heavy elements, this new criteria is easier to achieve.

  • For an average Site, of course.

As you can see, what you should focus on is having a fast website. Nothing else.

But… How can you increase the Speed of your Site?

 

Now, we’ll tell you what we did, Step by Step, and what results we obtained.

How to increase your Site’s speed step by step

As we mentioned before, our starting point was:

 

PageSpeed Insights results:

  • Desktop: 66.
  • Mobile: 29.

 

Before we start with the first Step, we should give one previous advice:

Use light images and clean designs

It is obvious, but we have to mention it.

 

All our images are relatively light.

  • Our biggest image is 50Kb (maybe we have 1 or 2 bigger than that).

 

Moreover, if you “load” your Site with Videos, Sliders and big Images, your speed will drop drastically no matter what we explain next.

 

Remember: Since now Google Search Console focuses on the LCP, the less heavy elements you use, the better.

  • The LCP measures the time it takes to render the Largest element on Page.
    • No matter where you place it.

 

However, if you also want to improve your FCP you should keep light Headings and “top of pages”, at least.

 

Being said that, let’s start:

1. Install and configure properly Autoptimize Plugin

We’re not sponsored, we promise.

We already had this Plugin Installed but, we hadn’t configured it properly.

Autoptimize’s best configuration for increasing your Page Speed

In its Main Tab (JS, CSS & HTML) you should check:

  • Optimize JavaScript Code.
  • Optimize CSS Code.
  • Optimize HTML Code.

 

In the Images Tab:

  • Check the “Lazy load images” option.

Our PageSpeed Insights results after doing this:

  • Desktop: 77.
  • Mobile: 41.

 

But… Is Autoptimize Plugin necessary?

As we told you before, we already had this Plugin installed (although not properly configured).

We uninstalled it in order to check its real effectiveness and our results were:

  • Desktop: 48.
  • Mobile: 17.

Since we use a Visual Editor (WP.Bakery) our site is plenty of CSS: the colored headings, the text boxes…

Maybe in other sites it wouldn’t be that important but, if you have plenty of CSS and JavaScript, it is very effective.

2. Install and configure “Async JavaScript” Plugin

Again, we are not sponsored.

This Plugin has been created by the same authors as Autoptimize.

 

It is useful for deferring JavaScript and many other things.

Since we are not experts in this field, we’ll just tell you what we have done and the results we obtained.

  • We tried different configurations, and this is the one that has given the best results.
    • We don’t know if it makes sense or not, but it is the best configuration we have tried so far.

Best Async JavaScript Plugin configuration

Async JavaScript’s Main Tab (inside WordPress’s Settings side menu):

  • Enable Async JavaScript: check.

  • Async JavaScript method: Async.

  • JQuery method: Async.

Enable Autoptimize Support: Enabled.

  • jQuery method: Defer.

We know that it doesn’t make sense since we tried the Async option for jQuery before.

But, as we told you before, this configuration in the one that has given the best page-speed results.

 

Async JavaScript configuration in our Dashboard (it is a Summary):

Our PageSpeed Insights results after doing this:

  • Desktop: 80.
  • Mobile: 44.

3. Deactivate and Uninstall useless Plugins

This is something obvious, but we still had 3 Plugins that we didn’t use.

 

Be careful: Even if you think that one not-being-used Plugin wouldn’t slow your Page down, it will.

 

We uninstalled:

  • rt Media Plugin.
  • SQ Sidebar Generator.
  • Envato Market Plugin (we update our Theme manually).

 

Our PageSpeed Insights results:

  • Desktop: 85.
  • Mobile: 51.

Check the improvement by just uninstalling 3 unused Plugins.

4. Use regular Fonts and forget about Google Fonts

This is the measure that was more difficult for us to take.

 

We were using “Crimson text” Font, from Google Fonts and we loved it.

 

At the beginning, we used some Autoptimize options  that allowed us to improve a little bit our Page’s speed:

Now we have the option “Remove Google Fonts” checked since we finally used a regular Font; we are not sure if this option improves anything if you no longer use Google Fonts.

We tried:

  • Combine and link in head (fonts load fast but are render-blocking).
  • Combine and preload in head (fonts load late but are not render-blocking).

 

With these 2 options, the PageSpeed Insights results obtained were:

  • Desktop: 87.
  • Mobile: 55.

The asynchronous option works well. Even better. But the first render is done with a different Font than yours, so the result is a bit ugly.

 

However, one day we tried a regular Font (rather than a Google Font) and the results were much better (the ones we showed you before):

  • Desktop: 93.
  • Mobile: 68.

 

We now use Arial as our Font.

One last advice for your Page Speed: Keep everything simple

We use WP.Bakery Plugin (Visual Composer) for editing our content.

  • If you are interested, we made a review in this Post.

 

Our theme is: KLEO Theme.

  • We analyzed it in this Post.

 

Both this Plugin and Theme help us with our Pages’ designs, colors, boxes, etc, etc.

 

The other “heavy” Plugins we use are:

  • BuddyPress.
  • bbPress.
  • Monster Insights.

 

  • We don’t use Yoast nor any other SEO Plugin.
    • If you want to know why, check this Post.

 

We obtained that good results with all these Plugins installed, so don’t worry if you have several Plugins in your Site.

 

What we have found out to be important is: Don’t mess with CSS, styles or php files.

 

If you have one Plugin for your Fonts and styles, don’t use more CSS or any other Plugin for doing so (in a duplicate way).

 

At the beginning, we “played” with our Customize menu, adding styles, colors, sizes…

It is fun, we know, but the more code you add (if you are not an expert) the more errors and speed problems you can generate.

  • Unless you are an expert, it is better to rely on one Plugin than “start inserting codes everywhere”.

 

Remember: Keep it simple and clean.

©2020 - consuunt

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending

Log in with your credentials

or    

Forgot your details?

Create Account