What is First Contenful Paint (FCP) & Why is it Important?

2 years ago 89

ARTICLE AD BOX

Page load velocity is 1 of the astir important metrics utilized by Google erstwhile evaluating a site’s performance, arsenic good arsenic a cardinal constituent of its leafage acquisition algorithm to find hunt motor rankings.

However, looking done a Page Speed Insights oregon Lighthouse study tin beryllium overwhelming owed to the sheer fig of method presumption utilized successful those analyses.

In this blog post, we mean to interruption down 1 of the cardinal metrics utilized by Google successful those 2 reports – First Contentful Paint.

💡 In This Article:

What is First Contenful Paint?
Why is FCP Important?
How to Test FCP
What Causes Slow FCP Scores?
How to Improve FCP

What is First Contentful Paint?

Contributing to 10% of a website’s wide show score, First Contentful Paint (FCP) is simply a cardinal metric to beryllium alert of arsenic you oregon your webmaster spell astir trying to optimize your website’s leafage velocity and idiosyncratic experience.

First Contentful Paint is an important, user-centric metric for measuring perceived load speed, marking the archetypal constituent successful the leafage load timeline wherever the idiosyncratic tin spot thing connected the screen. This tin see thing from images, text, logos, inheritance graphics, oregon non-white <canvas> elements

A accelerated FCP helps reassure the idiosyncratic that thing is happening.

Here is simply a illustration from Google of however images and substance elements load connected the screen. The substance that appears successful the 2nd framework is the FCP.

Here is simply a illustration from Google of however images and substance elements load connected the screen.

First Contentful Paint is antithetic from different likewise named Core Web Vitals specified arsenic Large Contentful Paint (LCP). LCP marks the constituent successful the leafage load timeline erstwhile the page’s main contented has apt been loaded.

What is simply a Good FCP score?

According to Google, a bully tract volition person First Contentful Paint show wrong 1.8 seconds oregon less. To guarantee a leafage is loading for users wrong this timeframe, a bully threshold to purpose for is the 75th percentile of leafage loads, segmented crossed mobile and desktop.

A higher people indicates that the FCP loads slower connected a page, whereas a little people indicates the FCP is loading quickly.

What Is a Good FCP score?

The representation beneath shows the FCP for a tract tally connected Page Speed Insights:

Why is FCP Important?

FCP is 1 of the six metrics utilized successful Google’s Lighthouse Performance Report alongside the pursuing others:

Time to Interactive
Speed Index
Total Blocking Time
Largest Contentful Paint
Cumulative Layout Shift

All of these metrics screen an facet of leafage load speed. FCP, and by extension, leafage load speed, are important factors for website performance, arsenic a dilatory leafage load velocity tin origin a idiosyncratic to permission the leafage earlier converting.

A 2019 survey commissioned by Google and performed by Deloitte corroborates this, arsenic decreasing mobile tract load times by conscionable 1 tenth of a 2nd resulted successful large increases successful conversion rates for some retail (8.4% increase) and question sites (10.1% increase).

Though it whitethorn look similar splitting hairs, the tiny improvements made to your site’s leafage load velocity tin marque a batch of quality successful the agelong run.

How to Test FCP

FCP tin beryllium measured 1 of 2 ways. “In the Lab” means that Google uses tools to simulate a leafage load successful a consistent, controlled environment. “In the Field” tests connected existent users really loading and interacting with a page.

Google recommends utilizing some methods to guarantee bully performance.

In the Lab:

In the Field

What Causes Slow FCP Scores?

A assortment of issues tin origin dilatory FCP scores, including, but not constricted to:

Slow font load time
Slow server effect times (TTFB)
High petition counts and ample transportation sizes
Render-blocking resources
Unused oregon inefficient CSS
Script-based elements supra the fold
Lazy loading supra the fold
Not inlining images supra the fold
Excessive DOM size
Multiple leafage redirects

How to Improve FCP

You tin fig retired what improvements you request to marque to amended your FCP by reviewing the Opportunities and Diagnostics information of the Lighthouse report.

The representation beneath is an illustration of the types of recommendations that Lighthouse whitethorn marque connected a fixed website:

Google besides provides champion practices to assistance amended your FCP arsenic well, including:

As mentioned earlier, FCP lone accounts for astir 10% of a Lighthouse show people and is not a halfway web captious successful the mode Largest Contentful Paint is.

According to Google, LCP accounts for 25% of a full Lighthouse show score. Therefore, it would beryllium much businesslike to walk clip optimizing your LCP oregon your Cumulative Layout Shift (CLS), arsenic some are leafage acquisition signals which are utilized by Google to assistance find leafage rank.

While First Contentful Paint is not a halfway web vital, it is inactive an important idiosyncratic metric that tin diagnose and code loading acquisition issues connected to halfway web vitals specified arsenic Largest Contentful Paint.

Addressing leafage velocity issues tin get precise complicated, truthful you volition privation to scope retired to your web improvement squad to spell implicit however to travel done connected Google’s recommendations.

Additional Resources

Page Speed and Core Web Vitals lone screen 1 facet of leafage acquisition signals that Google utilizes to assistance find hunt rankings.

Read connected to larn much astir what different steps you tin instrumentality to guarantee your website is providing the champion acquisition imaginable for users: