The Google Search Console has started displaying suggestions to optimize your site for FCP issues. One common error that webmasters can see in the Search Console account is “FCP Issue Longer Than 3 Seconds”.
Before I offer the suggestions to fix this FCP issue, you should know some details related to FCP, Page Experience, and the Core Web Vitals.
Let’s begin!
What Is FCP?
FCP stands for First Contentful Paint. It is one of the seven metrics measured by Google to determine the speed of a web page. The other metrics are Speed Index, Largest Contentful Paint (LCP), First Input Delay (FID), Time To Interactive, Total Blocking Time, and Cumulative Layout Shift.
FCP measures the time taken by the browser to render the first piece of DOM (Document Object Model) content after the visitor navigates to your site. DOM content represents images, test CSS, fonts, and other scripts on your site. It does not include <iframe>.
The below image represents the loading of an FCP or the first visible content on your site.
What is a Good FCP Score?
The below table displays good FCP scores and the color-coding it represents in the Google Page Speed Insights tool.
| FCP time (in seconds) | Color-coding | FCP score |
| 0–2 | Green (fast) | 75–100 |
| 2–4 | Orange (moderate) | 50–74 |
| Over 4 | Red (slow) | 0–49 |
If you are seeing the “FCP Issue Longer Than 3 Seconds” error in your Google Search Console then your DOM loading speed is over 3 seconds, probably in the red category. This needs immediate fixing or else your site’s organic rankings might get affected by the Page Experience update.
How To Measure The FCP Score Of My Website?
Before you can fix the FCP issue of your website, you need to measure the actual FCP score.
Here is how you can measure the FCP score of your site:
- Visit The Google Page Speed Insights Tool, enter the URL, and click on analyze.
- Under the lab data section, you will see your FCP score.
The below image displays the FCP score of my website which is around 6.1 seconds. Remember, your FCP score should be less than 2 seconds to pass the Core Web Vitals test.
In the Page Speed Insights tool, you will see two different sets of FCP related data namely the Field Data and the Lab Data. Both the Field Data and Lab Data will show you different FCP scores.
Besides, you will see different scores for desktop and mobile. You can check either the Desktop FCP scores or the Mobile FCP scores depending on the error status displayed in your Search Console.
What is Field Data In Page Speed Insights Tool?
Field Data is performance data that is collected from the real world (such as your site visitors when they interact with your website).
Field data consists of a set of four performance metrics namely First Contentful Paint (FCP), First Input Delay (FID), Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS).
Here are the advantages of Lab Data for page speed improvement:
- It helps to capture the real-world user experience like how your server and website elements are loaded when the browser requests them.
- Improvement in Field Data performance score directly impacts your business KPIs.
What is Lab Data In Page Speed Insights Tool?
Lab data is performance data that consists of a set of six performance metrics namely First Contentful Paint (FCP), Speed Index, Largest Contentful Paint (LCP), Time To Interactive, Total Blocking Time, and Cumulative Layout Shift (CLS).
The performance scores displayed in the Lab Data column are captured within a controlled environment having predefined network settings.
Here are the advantages of Lab Data for page speed improvement:
- It helps to identify and fix performance issues.
- Offers a strong debugging environment for controlled testing.
Steps To Fix The FCP Issue Longer Than 3 Seconds
Follow the below steps to fix the FCP Issue Longer Than 3 Seconds:
Step 1: Identify Example URLs That Are Responsible For The FCP Issue
The first step is to identify the example URLs that are responsible for the FCP Issue Longer Than 3 Seconds.
Login to your Search Console account and navigate to the Core Web Vitals section located under the Enhancements Tab.
Open Report to see the total number of URLs affected by the FCP issue.
Thereafter, click where it’s written: FCP Issue Longer Than 3 Seconds.
In the details section, you will see the status of the affected pages like Slow, Moderate, or Fast, the type of error, and the number of URLs that have the error.
Step 2: Check The FCP Time Of Your Page
Once you have copied the example URL, paste it in the Page Speed Insights Tool, and click ‘Analyze’.
Make sure to enter the exact example URL because the FCP timings are different for your home page and example URLs.
The tool will return the FCP time of your page once the test is finished.
The FCP score is different for mobile and desktop. You need to check your scores depending on the error you are seeing in the Search Console. Often, fixing your mobile FCP automatically fixes the desktop FCP issue.
In my case, the average FCP is around 6.1 seconds which is greater than the recommended 2 seconds.
There is also an origin summary that says “over the last 30 days, all pages served from this origin do not pass the Web Vitals Assessment”.
Passing the Web Vitals Assessment test is the prime requirement to fix the FCP issue of individual pages on your site.
Step 3: Identify The Opportunities To Fix FCP Issue
Slide down to the Opportunities section in the Page Speed insights tool. Here, you will see some useful suggestions to improve your page load speed. Although these suggestions don’t directly affect the performance score they have an impact indirectly. Hence, you need to fix each and every suggestion for better and faster results.
The first suggestion in my case is “Defer offscreen images”. Implementing the suggestion will help me save around 51.9 seconds in the overall page load time.
You might see different opportunities and suggestions depending on the issue that is causing high loading times.
The first opportunity suggests me to use a lazy-load plugin to add the ability to defer any offscreen images from loading.
The tool also returns the list of images wasting the server resources including the image size and the amount of potential savings that can be earned by lazy loading the images.
Similarly, the second suggestion that Google gave use video formats for animated content instead of GIFs. Preferably, converting GIFs to HTML5 video can do the trick.
Check every suggestion in the Opportunities section and take the help of your developer to implement them one by one.
You can also take the help of other tools like Pingdom, GTMetrix, and WebPageTest to view even more recommendations to improve page speed.
Step 4: Tell Google The FCP Issue Is Fixed
Once all the changes are made to your site based on the suggestions provided by the Google Page Speed Insights tool, recheck your page(s) once again.
See, if your website pages pass the Core Web Vitals Assessment test. Repeat the process of implementing the suggestions until your pages clear the test.
Upgrade to a VPS Hosting or Dedicated Hosting to have super fast server load times.
Once, your pages clear the test, visit your Search Console and click on “Validate Fix” located in the Core Web Vitals tab.
Clicking on “Validate Fix” will tell Google that you have fixed the FCP issue and the first content of your site now loads within 2 seconds.
Have patience, because it might take a few weeks of time for Google to check and validate the FCP issue.
How To Improve Your FCP Score?
It is vital to keep your FCP score high preferably around below a second. Although it sounds easy, however, doing so is tough.
One of the best ways to keep your FCP score high is to make sure your text remains visible during the font load. The key is to load the web font as fast as possible.
Some of the web browsers hide text until your web font loads causing an issue of invisible text. The issue of invisible text is known as FOIT or Flash of Invisible Text. Just make sure, your web fonts do not flash invisible text.
You can fix the issue of FOIT or invisible text by displaying a system font to load your text.
Here is the code to add in your @font-face style:
**Code starts
@font-face {
font-family: ‘Pacifico’;
font-style: normal;
font-weight: 400;
src: local(‘Pacifico Regular’), local(‘Pacifico-Regular’), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format(‘woff2’);
font-display: swap;
}
**Code Ends
Fixing the FOIT issue will have the maximum impact on improving your FCP score.
