Increasing your PageSpeed Insights speed

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

  • Speed.

 

After some days, we started receiving some results, and they were not very good:

  • We had FCP Issues everywhere.
    • We didn’t even know what that was.
  • We had 120 Slow URLs.

 

Although we had a score of 96% in GTMetrix, our PageSpeed Insights results (Google’s reference) were not very good.

We had just:

  • Desktop: 66.
  • Mobile: 29.

 

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

  • We finally understood what FCP is.
  • 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 learnt and what we did:

  • What is FCP Issue?
    • Is it related with your pagespeed?
  • How you can improve your PageSpeed Insight speed easy and effectively.
  • 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 the 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

As you may have already realized, Google Search Console’s FCP Issue takes place when your FCP is longer than 3 seconds.

But there is a problem:

  • It is the time it took you users, on average.

If you have a Site with few traffic, Google won’t have enough data for showing your FCP.

 

If you check your PageSpeed Insights, you’ll realize that it doesn’t tell you your FCP.

  • Again, if your Site doesn’t have enough traffic yet.

In our PageSpeed Insights results we don’t have these FCP results shown (nowadays).

We just analyzed a random famous website for obtaining these numbers.

However, unless you have big and “heavy” pictures or videos in your Pages’ Headings, the easiest way you have for improving your FCP is by increasing your Pages’ speed, using PageSpeed Insights as reference.

GTmetrix vs PageSpeed Insights

We don’t know exactly how they measure page speeds.

But we know that, having a 97% of page speed in GTmetrix, our PageSpeed Insights results were very poor.

  • In fact, we published a Post where we explained how to obtain good results in GTmetrix. Check it out here.

PageSpeed Insights is much more demanding and, since it is Google’s reference… It is the one we are currently having also as our reference.

Now, we’ll tell you what we have done, step by step, and which results we have obtained:

How to increase your Site’s speed step by step

We’ll tell you exactly what we did, and which results we obtained:

 

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 had to mention it.

 

All our images are Gif, light JPEGs and PNG.

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

 

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

 

Remember: the FCP is the “first render” load time.

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 we obtained:

PageSpeed Insights results:

  • 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