SEO GLOSSARY

First Contentful Paint FCP

Volt Studios

What Is First Contentful Paint FCP

First Contentful Paint (FCP) is when the browser renders the first bit of content from the DOM, providing the first feedback to the user that the page is actually loading.

It’s also known as a “first paint” or “first load”. It’s an important event in web application development because it shows us which resources are ready and available for use.

The FCP is an excellent way to determine whether your application will be able to respond quickly enough to user actions. If a page isn’t loaded fast enough, users will notice that something’s wrong and leave your site.

In FCP, we show the loading indicator while still loading content by requesting a paint. This gives us enough time to download all of our CSS, JS, and images before we actually show them. As such, FCP is a very important part of JavaScript performance. It’s also important because it can be used to measure performance changes in your web application and understand why certain pages load faster than others.

SCENARIO

The first call to the server is when your content is loaded. The browser will then download all of the assets, like images and stylesheets, and render them on the page. First Contentful Paint (FCP) is when the browser renders the first bit of content from the DOM, providing the first feedback to the user that the page is actually loading.

The next step in this process is when a user clicks or touches some element on a page – this event triggers a request for more data from your server. This event is known as a ‘mouseover’.

Next, we have an ‘active state’ where an element has been clicked or touched, and now has focus. For example, if you were to tap on a button, that would be considered an ‘active state’ because you’ve tapped on something and it’s now focused (and what happens next).

Finally, there’s ‘focusout’ – when an element loses focus and falls out of focus state (e.g., if you change pages)