First Contentful Paint (FCP) measures how long a page takes from the initial load to the first rendered content displaying on the screen.
In 2019, Google announced that they’ll rank websites on the basis of two more performance metrics: First Contentful Paint & First Input Delay.
Later on, Google introduced three Core Web Vitals: First Input Delay, Cumulative Layout Shift.
In this article, we’ll talk about First Contentful Paint since it has continued to be an important user experience metric and accounts for the overall performance score of a website.
What is the First Contentful Score?
A website’s First Contentful Paint is when the browser retrieves and renders the first DOM element of the page. Canvas elements, images, or tex, non-white elements, and SVGs are considered DOM content.
In simple words, FCP is the time it takes for a website user to see any content on their browser once they’ve clicked on the website link.
Hence, a blazing fast FCP ensures that users find something useful as soon as they land on the page.
We recently published a post on First Input Delay. If you’ve read it, you might wonder what is the difference between First Contentful Paint and First Input Delay?
Difference between First Contentful Paint & First Input Delay:
First Input Delay (FID)
FID measures interactivity: the time a website takes to respond after the visitor interacts (for example, clicks on a button or link) with it.
First Contentful Paint (FCP):
FCP measures how long a page takes from the initial load to the first rendered content displaying on the screen.
Some of you may wonder how first paint is different from first contentful paint. Let’s take a look:
First Paint vs. First Contentful Paint:
For the unversed, First paint is when a render is detected by the browser. This render could be as subtle as the background color.
- First Paints:
First Paints are triggered very early in the page load but they do not deliver any information or ‘content’ to the users. The background color is usually painted fast, whereas the actual content takes longer time to appear on the screen.
First paint timing is thus not as useful since the site doesn’t really display any useful information.
- First Contentful Paint:
First Contentful Paint signifies loading of any ‘content’ that is informative for the end users. It is triggered when any content is painted; text, image, or canvas render.
First Contentful Paint timing gives a useful insight on how soon your users get to know about your website since it represents the loading time of actual content on the page. Since, the focus is on ‘content,’ it is a more useful metric as compared to first paint.
How to Measure First Contentful Paint?
Webmasters or publishers can measure the First Contentful Paint of their website through multiple tools including:
What is a good FCP score?
According to Google’s guidelines, the first contentful paint of a webpage should occur within 1.8 seconds. When a web page loads within 2 seconds, it ensures a good user experience to the visitors since they can access the information faster.
If a website’s first contentful painting takes longer than 3 seconds to load, it is considered slow.
Google rate FCP timing in three different categories:
- Good – between 0 seconds and 1.8 seconds
- Needs Improvement – between 1.8 seconds and 3 seconds
- Poor – over 3 seconds
How To Improve First Contentful Paint (FCP) time:
Now that we’ve understood what FCP is and why is it important, let’s take a look and how one can improve the FCP timing:
- Eliminate Render Blocking Resources:
Render blocking resources are the files that on a website that must render. These may include fonts, CSS files, JavaScript, and HTML. These files are called ‘render blocking’ because they take priority over other elements of the page (for example, the images, text, or other user-facing content).
This delay creates a sudden increase in FCP since render blocking files are usually large in size, and they don’t even contain site content.
FCP time can be reduced if you remove render resources from the critical rendering path, defer non-critical resources, or remove unnecessary JS. - Reduce Server Response Time:
TTFB or Time to first byte is the total time it takes for a browser to receive the first byte of a page content. If TTFB is less, the FCP timing will be less too.
Here’s how,
FCP = TTFB + Render Time + Content Load Time
As you can see, FCP is dependent on the TTFB. Hence optimizing TTFB would automatically improve the FCP score. You can reduce the TTFB by using a quality CDN, enabling caching for your website, and choosing a fast hosting provider. - Remove Unnecessary CSS
If you’ve files in your stylesheets that aren’t being used, but take significant speed, there’s no point keeping them. Hence, any unused or old code should be removed so that it doesn’t impact the loading time of your site.
- Minify HTML, JavaScript, and CSS
Minification of HTML, JavaScript, and CSS can significantly reduce the FCP time of your website. Minification is removing all extra characters such as spaces from your site’s CSS, HTML, and JavaScript files. While spacing helps readability, browsers don’t need them. These spaces in fact take up bytes and minimizing them would decrease page size and improve First contentful paint timing.
The Bottom Line:
Since Google values page speed as an important performance metric, First Contentful Paint will continue to be an important metric for websites.
Having a low FCP timeline not only keeps users on your site but also enhances overall user experience.
We agree, FCP can be a tough metric to nail down but a little optimization on reducing FCP will certainly increase UX and your site’s overall loading times.
FAQs
First Contentful Paint (FCP) measures how quickly visitors can see actual content (text, images, videos, etc.) on your page. Our Legacy Reports already tracked FCP, which is related to your page’s load speed.
During the First Contentful Paint (FCP), the browser renders the first bit of content from the DOM, giving the user the first indication that the page is loading.
Based on data from the HTTP Archive, your FCP score compares your page’s FCP time to that of real websites. FCP renders in 1.2 seconds for sites performing in the ninety-ninth percentile, for example. Your FCP score is 99 if your website’s FCP is 1.2 seconds.
Shubham is a digital marketer with rich experience working in the advertisement technology industry. He has vast experience in the programmatic industry, driving business strategy and scaling functions including but not limited to growth and marketing, Operations, process optimization, and Sales.
