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.
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:
- PageSpeed Insights
- Chrome DevTools
- 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.
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
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.
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.
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.