Fix FCP Issue

Diagnose and Fix FCP issue in Google Search Console (Speed Report)

The new Google Search Console feature to check site’s speed with the Speed Reports introduced and with that came the FCP issue. The newly introduced, Core Web Vitals checks for the slow and fast pages on your website . The FCP (first contentful paint) is the time from when the user requests the URL until the browser renders the first visible element in the URL. You can track the new feature and diagnose FCP under Google Search Console. To fix it, you need to make your site faster and enhance it.

To enhance the speed of the website, you need to work around CSS, JS and HTML files. On WordPress, to enhance the page speed and decrease the loading time, you need to optimize your WordPress website.

Let’s first see the FCP problem and how to fix it.

The FCP issue in Google Search Console

Last month, while working on Google Search Console and navigating, we found the FCP issue. Why, we are calling it an issue? It’s because, we found 127 URLs which were slow i.e. >3s, yes, that took more than 3 seconds to load.

Note: When you open Google Search Console, reach Overview. After that, below Coverage tab, locate the Enhancements tab. This is where you will get to know about the From here, you can fetch the Speed Report as in the below screenshot.

Following is the error we saw under Google Search Console:

Google Search Console FCP issue

Now click on “Open Report” above and you will get different reports for Mobile and Desktop for your website’s FCP issues.

FCP issue – Desktop

Following is the screenshot for the website’s FCP issue on Desktop:

Google Search Console FCP issue Desktop

On clicking, Open Reports above, you will get to know the entire coverage of the issue on Desktop:

Google Search Console FCP issue on Desktop

FCP issue – Mobile

Following is the screenshot for our website’s FCP issue on Mobile:

Google Search Console FCP issue Mobile

On clicking, “Open Reports” above, you will get to know the entire coverage of the issue on Mobile:

Google Search Console FCP issue on Mobile

Check loading time before fixing the slow pages issue

Well, before even moving further, let us check the loading time of our website on the most popular website’s to check site loading time and related issues: Pingdom, GTMetrix, Google PageSpeed Insights.

Load time on Pingdom (6.64 seconds)

Pingdom Tool result

Load time on GTMetrix (4 seconds)

Load Time on GTMetrix (Before)

Load time on Google PageSpeed Insights (Desktop)

Load time on Google PageSpeed Insights (Mobile)

Pagespeed Mobile result

How to fix FCP slow pages issue?

Well, to fix the FCP issue means to fasten you website i.e. decrease the loading time.We saw above the loading time of our website is not so good. For this, you need to work around with JavaScript, CSS and HTML for your website. Easily achieve this, if you are on WordPress. Install the  Plugin”Async JavaScript” and the “Autoptimize” Plugin.

Note: Learn how to install WordPress Plugin

Fix with Autoptimize Plugin

Install the “AutoOptimize” plugin and then go to “WordPress Dashboard” -> “Settings” and under that, click “Autoptimize“.

  • Under the 1st tab, “JS, CSS, HTML“, select the checkbox for “Optimize JavaScript”, Optimize HTML” and “Optimize CSS”.
  • Under the 2nd tab, “Images“, check the “Lazy-load-images” option.
  • Under the 4th tab, “Extras“, select the “Remove Google Font” option button and remove the Google Fonts from the website. This reduces the loading time.

Save the changes and after that, check the loading time of the website. Here is the result on Pingdom, PageSpeed Insights and GTMetrix (Check for the improvements in load time):

Load time on Pingdom Improved

Pingdom Tools

Load time on GTMetrix Improved

gtmetrix

Load time on Google PageSpeed Insights (Desktop) Improved

pagespeed desktop

Load time on Google PageSpeed Insights (Mobile) Improved

Pagespeed Mobile

Now, let us install the “Async JavaScript” plugin and work around it.

Fix with “Async JavaScript” Plugin

Install the “Async JavaScript” plugin and then go to “WordPress Dashboard” -> “Settings” and under that, click “Async JavaScript“.

  • Under the 2nd tab, “Settings“, select the checkbox for “Enable Async JavaScript“.
  • Go to the bottom and support with “Autoptimize“plugin by selecting “Defer” for the “Autoptimize Javascript Method” option button.

Save the changes and after that, check the loading time of the website. Here is the result on Pingdom, PageSpeed Insights and GTMetrix:

Load time on Pingdom (2.60 seconds)

Pingdom final FCP issue fix

Load time on GTMetrix (3.9 seconds)

gtmetrix final FCP issue fix

Load time on Google PageSpeed Insights (Desktop)

pagespeed desktop final FCP issue fix

Load time on Google PageSpeed Insights (Mobile)

Pagespeed mobile final FCP issue fix

We saw above, the loading time of the website reduced by more than 50%, therefore fulfilling our purpose.

Summary

We saw how to diagnose the FCP issue on Google Search Console for website’s Mobile as well as Desktop version. Before fixing, we checked the loading time of the website and compared it with the loading time after the issue was fixed by us. We fixed the issue and enhanced the loading time by working around JS, CSS and HTML of the website. The fix definitely reduced the loading time of the website, page size and Requests by more than 50%.

If you liked this tutorial, then please share, like and comment your feedback. If you tried any other plugin and reduced the loading time, then mention in the comments section to help others. Sharing is caring!

Support us: DONATE


Read More:

5 Best WordPress Email Subscription Plugins to Help Build Email List
How to add SSL to WordPress Website (http to https)
Amit Diwan
Amit Diwan
[email protected]

Founder of Amit Thinks, a programming YouTube Channel. Also running this website studyopedia.com. Left a job offer from Accenture to follow my dream of being an entrepreneur. On our YouTube Channel, Amit Thinks, we are serving more than 1 million unique visitors/ month. With that, we have reached a whopping 2.2 million monthly organic views.

No Comments

Post A Comment








Discover more from Studyopedia

Subscribe now to keep reading and get access to the full archive.

Continue Reading