Indicates the time when the first text or image becomes visible. After clicking or any other action by the user, it can only be said that your site has FCP or the first color of content that is understandable by the user. FCP is considered one of the main criteria of Lighthouse, and in this article, we discuss this criterion and the limitations and factors that increase the speed of FCP.
Table of Contents
What is FCP?
First Contentful Paint (FCP) is one of the six metrics tracked in the Performance section of the Lighthouse report. Each metric captures some aspect of page load speed.
How is FCP measured?
Your FCP score in Lighthouse is measured by comparing real-time FCP and your page FCP for real website data stored by HTTP archives. Your FCP will increase if it is faster than other HTTP archive pages.
What elements can be part of FCP?
The time it takes to render the first visible element to the DOM is FCP. Everything that happens before a non-white content element renders to the page, except iframes, is accounted for in FCP.
Since iframes are not considered part of FCP if they are the first content to be rendered, FCP continues to count until the first non-iframe content is loaded, but the iframe loading time is not counted in FCP.
Also, in the basic principles related to FCP, you should pay attention to the loading time of fonts and texts and give some tips on improving the loading of texts.
How can we know when FCP starts?
One of the easiest ways to find out when a browser first serves something after browsing is to ask the browser itself. It’s called the “first color” and one of the first web performance metrics.
However, First Paint can be misleading: “paint” is from the browser’s point of view, not the user’s. And a browser can implement a color that is not visible to the user. For example, if an element is rendered with a default foreground-background, First Paint will start as such.
Using First Paint to track your page performance does not guarantee that something will be usable for your visitors when it is displayed.
How can we focus on what makes sense to the visitor?
This is the question that the first colorful content tries to answer. According to the specifications of Paint Timing:
FCP is when the browser renders the first bit of content from the Document Object Model (DOM), which may be text, an image, an SVG, or even a canvas element.
In the case of First Paint, the browser returns the information when browsing the rendering of web elements, but also checks the element type (text, image, SVG, or canvas). The first color of content can be found in Dareboost, WebPageTest, or in Google services such as Lighthouse or Chrome UX Report, where data is used in PageSpeed Insights. Currently, FCP is only available in Chrome and Opera. Firefox also plans to support it.
How Lighthouse Determines Your FCP Score
Your FCP score is a comparison of your FCP time and the FCP time of your page for real websites, based on data in the HTTP archive. For example, sites operating at 190% render FCP in about 1.5 seconds. If your website’s FCP is 1.5 seconds, your FCP score is 99.
Lighthouse Updates: Web Core Vital
On May 5, 2020, the Chromium project announced a set of three benchmarks by which the Google-backed open-source browser will measure performance.
The metrics, known as Web Vital, are part of a Google initiative designed to provide unified guidance for quality signals.
In July 2020, with the release of Chrome 84, the Lighthouse v6 unit benchmarks were adopted across Google products.
The Chrome DevTools control panel has been renamed to Lighthouse. Pagespeed Insights and Google Search Console also refer to these single metrics. Web Core Vital accounts for 55% of Lighthouse’s weighted performance score.
How to define FCP using Chrome Devtools
Open the page in Chrome.
Go to the Dev Tools action panel Command + Option + I on Mac or Control + Shift + I on Windows and Linux.
Click on the FCP indicator in the Timings section.
The summary tab has a timestamp with FCP in milliseconds.
How to improve FCP
For content to be displayed to the user, the browser must first load, parse, and process all external style pages it encounters before it can display or render any content to the user’s page.
The fastest way to get around external resource latency is to use inline styles for the content beyond the limit.
Keep your site consistently scalable, and use automated tools like Penthouse and Apache’s mod_pagespeed. These solutions require some testing with some performance limitations and may not be suitable for everyone.
Globally, we can all improve our site time for First Contentful Paint by reducing the scope and complexity of style calculations.
If a style is not used, remove it. You can identify unused CSS with Chrome Dev Tool’s built-in Code Coverage feature. Use better data to make better decisions.
Similar to TTI, you can capture real user metrics for FCP using Google Analytics to correlate improvements with KPIs.
FCP tracking on real user devices
To learn how to measure real-time FCP on users’ devices, visit Google’s user-centric performance page. The Tracking FP / FCP section describes how to programmatically access FCP data and send it to Google Analytics.
To learn more about collecting real-world user metrics, see Assessing Google’s Real-Life Download Performance with Navigation and Resource Scheduling.
Limitations of FCP
First, it doesn’t take into account iframes, which can be problematic if your main content relies on loaded iframes (but this is an edge case to avoid). In the second step, FCP can be biased by the text node waiting to render the Webfont. For example, we assume that FCP is fired at about 900 ms because we see no content before then:
The actual value of FCP is around 600ms because at this time the text node is first rendered by the browser even if the font is not yet loaded, so the text remains “empty” (invisible) for a while. This phenomenon is called Flash of Invisible Text (FOIT).
To avoid this behavior on your websites, make sure you use the @font-face CSS directive with a non-default value for the font-display descriptor. If you use Google Fonts, please note that the service now encourages its users to use font-display: swap value. Make sure your Google Fonts import declaration sets a value for the “display” parameter in the URL request.
One of the main limitations you may encounter with First Contentful Paint is that the measurement criteria are not limited to the display port. Whenever a piece of content is displayed, it triggers FCP, even if the content is not over the limit and therefore not visible to the visitor.
To keep track of when we’re sure something is rendered and visible to the user, we need to use another metric: render start. The Start Render algorithm is based on the video analysis of the page loading and looks for the first changed pixel in the Viewport.
Even if the Start Render starts regardless of the content type (as the first color), it’s a great way to track when the user can perceive the page loading, while avoiding keeping track of the “technical” colors of The browser prevents
Start Render is only available through synthetic monitoring tools as video analysis is required, while FCP and First Paint can be requested directly from the browser, also making them usable in real user monitoring (RUM).