What is First Contentful Paint?

A customer decides if a website is “slow” or “fast” by multiple moments experienced during the load of the website.

Definiton

First Contentful Paint (FCP) is a performance metric which measures the time from navigation to the time when the browser renders the first bit of content from the DOM. It provides feedback that the page is actually loading.

First Contentful Paint entry contains a DOMHighResTimeStamp which highlights the time when the browser first rendered any text/image or SVG, canvas or text with pending webfonts. (it excludes iframes). Try to understand more about Google Lighthouse here.

This is the first time users could start consuming page content, and this moment is useful for user experience assessment and quite important cause it marks the moment when a user can consume website’s content – More details here https://w3c.github.io/paint-timing/#first-contentful-paint

LoadFocus monitors websites performance, analyzes & compares it to competitors, collecting modern performance metrics and insights on best practices using Lighthouse.

First Contentful Paint time still has its drawbacks – the loaded content may not be meaningful for the user that loaded the website.

First Meaningful Paint (FMP) is another performance metric which will be available, where the focus will be on content desired by the user.

First Contentful Paint vs. First Meaningful Paint

First Contentful Paint is usually used as an approximation of the First Meaningful Paint, the downside of this performance metric is that it often catches no very meaningful paints in the web page, like headers, footers, different scrolling or navigation bars, that are non very meaningful in terms of overall loading experience. The user cannot understand much about what the website is about, or cannot see yet the content that he/she was looking for.

Recent studies discovered that half of users are likely to abandon a website load in more than 3 seconds.

Apparently, 1 second delay in response time translated in 7% less conversions.

E-Commerce companies are the ones most affected by loading times, and this can actually mark the difference between losing a potential customer or finishing a sale.

That’s why the most important metrics nowadays are the ones that directly affect your customers, how they perceive your website, their confidence that the whole experience is smooth-less.A fast website does not only refer to the landing page, but you should pay attention the every page that is required as part of a user workflow.

How to Improve First Contentful Paint (FCP)?

• Change the way your web fonts load – add font-display: swap; to your @font-face rule, will tell the browser to load first the system fonts when the DOM is rendered, and the swap to the custom web fonts you want to use.
• Optimize images and load them with the expected resolution and in the order your users really need them – resize the images and use the right resolution

This change improves your First Contentful Paint (FCP) and your First Meaningful Paint (FMP), and it’s supported by all major browsers (excluding Internet Explorer and Edge 🙂 )

First Contentful Paint (FCP) and First Meaningful Paint (FMP) are some of these metrics can make your website faster if you pay attention to them and continuously monitor them.

first contentful paint first meaningful paint modern performance metrics