min read

First Contentful Paint (FCP)

Written by

Joe Krug

Edited by

TL;DR:

FCP is a Web Vital metric that measures the speed of the first content rendered on the web page.

What is contentful paint?

In web development, "contentful paint" is any content appearing on any web page. The headings, text, images, videos, and any other content or components are part of your contentful paint.

What is First Contentful Paint (FCP)?

First Contentful Paint (FCP) is a performance metric that calculates the initial loading speed of the first piece of content that is visible on the screen. It measures what comes first and how quickly it comes.

This measures the perceived speed of web page loading. FCP calculates the amount of time the first "content" of a page becomes visible to the user.

"Content" can be text, images, SVG elements, and any non-white canvas elements to calculate how quickly the first element loads.

Does FCP influence SEO?

Neither FCP nor Web Core Vitals are ranking factors for search engines. While Web Vitals metrics will not directly affect your website rankings, they are important principles for great web developers to understand. Bad scores that indicate a bad user experience may hurt your SEO if users bounce from your website.

What is a great FCP score?

Google considers times below 1.8 seconds for first content paint a good experience. If FCP is higher than 3 seconds, it's considered a poor experience. A fast TTFB will help you score a high FCP.

How to optimize Webflow websites for FCP?

“Eliminate Render-Blocking Resources” is a common error message for this metric. This is asking us to load JavaScripts and CSS files asynchronously so they don’t block the rendering of the page, which then improves our FCP.
Remove as many unnecessary third-party scripts as possible. If you can’t remove certain third-party scripts, apply async or defer.
Optimize, compress, and minify JS and CSS. Use more modern and efficient image formats like WebP instead of JPEG or PNG.
Use a Content Delivery Network (CDN) that specializes in delivering your files efficiently
Optimize image sizes to make sure they are not larger than required for the resolution. Prioritize “in the viewport" content. Do a review of your assets to make sure the initial image uploaded is not larger than it needs to be—For example, using a 1200px width image that displays at 300px.
Prioritize “in the viewport" content.
Use preloading techniques like <link rel=”preload”> tags to tell the browser that this resource is needed soon after the page load. The browser will prioritize this file when it loads.
Use fetchpiority attribute to tell the browser what the most important element is.
Optimize font loading. Fonts can block text rendering… which can hurt your FCP. Upload your own fonts for best result. Use font-display: swap to make sure text is visible when font is loading.