What is First Contentful Paint?

Almost everyone asks themselves “What is First Contentful Paint?” Let’s talk about it.

First Contentful Paint (FCP) is a metric that measures the time that takes to load, and be shown (rendered) to the user, the first element of the website: could be text or an image.

FCP is a user-centric metric that measures the human perceived page load speed. First Contentful Paint is the metric that indicates that the user can see anything on the screen. It is super important because these metric “tells” the user that the website it’s not broken, and the contents are loading at the back. That’s why we call the FCP metric a human-perceived metric. The faster the content loads, the better the user experience will be.

Websites don’t load all elements at once. The more complex a page is, the longer it takes for the robots to render all its elements. And even more complex is when the images aren’t optimized or they are very heavy. That’s why Google has created some metrics to measure the speed of a website.

In this article, you’ll understand everything about First Contentful Paint (FCP). If you want to improve your Core Web Vitals (we will talk about them later) and the user experience of your website, read on.

How do you measure First Contentful Paint?

To measure FCP and have a general idea of the status and performance of your website, try with Page Speed Insights or GTMetrix.

It will look similar to this capture, and you will find super important information.

This capture is taken from GTMetrix, and you will find many tabs with different data. The summary is the one that will tell you super visual and simple when is occurring the FCP and other important metrics such as:

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

What is the difference between FCP and LCP?

In comparison with the FCP, the Largest Contentful Paint (LCP) measures the time that takes to load the biggest content on a website. Most of the time, the biggest or heaviest element of a website is an image or a video.

We recommend starting with solving the LCP and optimizing all visual contents of your website. Other important metrics you should consider in terms of web performance.

How to improve First Contentful Paint

Heavy images, big sliders, videos, heavy and complex Javascript libraries, and many other elements could have a negative impact on your web performance and of course, that means all the metrics that are important for Mr. Google (including FCP).If you pay attention and optimize all of them you would be likely to Google. We recommend starting by running a one-click test and see how much faster and optimized your website could be. Don’t forget to pay attention to all the images, videos, and media content to improve a better experience for the user.

After you tested your website and you know which images you should optimize, continue with:

• Using Priority Hints.

• Use Lazy Loading.

• Reduce or remove JS and unnecessary plugins.

• Improve Website Responsiveness

• Remove unnecessary CSS styles

Don’t forget about choosing the correct size and format for your images. You can hurt the image quality if you compress them very much. The complete Image Optimization guide tells you how to take care of your images, optimizing them, choosing the correct size and format for your website (depending on your users) but without losing quality.

There are many image formats you should consider before changing them. AVIF, WebP, are the ones we recommend if you want a super-fast experience.

What are the Core Web vitals?

The Core Web Vitals are a set of metrics created by Google that measure the web performance of any website prioritizing the user experience. Core Web Vitals are a group of KPIs (Key Performance Indicators) that allows a marketer, developer, or any person that wants to see how his website is performing in terms of speed and how the experience is optimized for the user.

These metrics are focused on three aspects: loading, visual stability, and interactivity.

You can monitor and visualize your Core Web Vitals with the following tools:

• Google Search Console
• Page Speed Insights
• Lighthouse

You could also download the Chrome Core Web Vitals extension for a better experience. Don’t loose the Core Web Vitals article with the most relevant metrics you should track for a better and faster experience.

Why measuring only FCP isn’t enough

First Contentful Paint is one of the metrics you should know and track about your website. But it is not the only one and even less, the most important one. It takes de 15% of the total score of the website, but there are some other metrics that will make bigger changes to our users.

Here is an article that compares Page Load time and First Contentful Paint, and other aspects you should consider about FCP.

Web Performance is a way to call all the elements and metrics you should track to improve your performance. Don’t lose the “Web Performance for Humans” article written by Nico Bistolfi, the CEO of Piio.

Now that you know What First Contentful Paint is, optimize your results using Piio! See you there!