What is “First Contentful Paint”?

When you check your website on speed monitoring software you see the reports along with other speed indicators with First Contentful Paint and First Meaningful Paint. These are valuable user-centric metrics that can inform you a lot about how much the content is waiting for your users.

Now you must be wondering what really first contentful paint means. If you don’t know already then read this below article.

In this article, we are going to explain about First Contentful Paint and how you can improve it to speed up your website.

Definition

First contentful paint (FCP) is the first content shown on the display when the website is browsed by users. It analyses the time from navigation to when the browser is rendering the first piece of content identified in the Document Object Model (DOM). It can be a script, a picture, or a canvas.

First Contentful Paint is enabled when the Document Object Model (DOM) initial portion of the content is shown. 

Since the main point is on content, the concept is that this metric provides you an idea when your user receives usable details like text, visuals, etc.

How can you measure First Contentful Paint?

You can measure First Contentful Paint either in the lab or in the field with the help of the following tools:

Lab tools

  • Lighthouse
  • PageSpeed Insights
  • Chrome DevTools
  • WebPageTest

Field tools

  • Chrome User Experience Report
  • PageSpeed Insights
  • Firebase Performance Monitoring (beta)

What is a good performance score for FCP?

Sites should have First Contentful Paint appear within 1 second of the page starting to load, in order to have a successful user experience. To guarantee you reach this target for most of your visitors a reasonable goal to calculate is the 75th percentile of page loads, segmented between mobile and desktop devices 

How to improve First Contentful Paint?

Here are the four recommendations through which First Contentful Paint can be improved by speeding up the time it needs to download resources and eliminating obstacles that prevent the user from registering DOM material.

1. Reduce the number of render-blocking external stylesheets and scripts

First, you need to know What is render blocking? 

After a visitor loads a website, everything that gets in the way of rendering the DOM is considered render-blocking. They’re code obstacles that the browser will first bypass before anything else can be performed.

They are significant, often. For example, your CSS files are render-blocking but they’re important.

Other times, the resource that blocks the render can delay. That’s why if they aren’t required to render the DOM, you can transfer JavaScript files from your webpage header. Load them after the DOM to enhance user experience.

2. Use HTTP Caching 

Caching is a safe way to increase site speed. Store data in a cache for quicker access for your visitors. There are several caches.

With the help of HTTP caching, the browser keeps a backup of the assets in its cache that the user downloads through HTTP so that it can be recovered without creating an additional trip to the server.

3. Compress text-based assets to speed up their download time

Your webpages comprise text-based HTML, CSS, and JavaScript files. When you can not remove a file because it is important, then you should reduce the size of the file as much as necessary.

Here are two methods to compress files:

  • Reduce your file size:

Once you minify your text files, you delete all extraneous characters and spaces, producing a lightweight file that is much harder to read for humans. The browser is not concerned about the lack of readability and will be able to download the file much faster.

  • Compress your files:

Compressing your files is identical to compressing your photos. The compressor identifies patterns and repetition in the text file while the compression process and encodes them much more reliably.

With the minifying and compressing of your text files eliminates additional bytes which do not adversely impact your website but reduce paint times.

4. Do less JavaScript work on page load

JavaScript is the main threat to get the web slowed down. For one, as compared with other assets, JavaScript files require more time to load.

For this, you can break the code into bite-sized chunks using a technique known as code-splitting which is much easier. You can then push the chunks that aren’t important out of your site’s head, minimizing the first paint time.

Tree shaking is also a method, a way to reduce your JavaScript files is to prune out code that is not in use. You put in code snippets as the site develops, but not everything is utilized in the long run. You should go through your JavaScript code regularly, and delete what you don’t need.

        You can use the above methods to reduce First Contentful Paint time.  For the best user experience, First Contentful Paint should be less than a second. Since these metrics are user-centric metrics that can tell you a lot about how long the content is waiting for your visitors. Test the page speed of your site at Google’s PageSpeed Insights or other tools, and see the ratings.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

Skip to toolbar