In 2019, Google announced that they’ll rank websites on the basis of two more performance metrics: First Contentful Paint & First Input Delay.
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:
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.
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.
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.