Session 6 – What is First Contentful Paint + improve it

What is FCP and how can we improve its score?

In this tutorial we are going to say in simple language what is First Contentful Paint or FCP inside Gtmetrix tool and what to do with this error? How to improve? Is this an error?

I am the author of this article, I am Pouria Ariafar from SEO teaching, this is not a translation article from other sites, we tried to gather a good article for you from the knowledge and experience we had along with a series of reputable sites. We are happy to be with us.

In the previous article, we talked about what a Cumulative Layout Shift is and how to optimize it, but the FCP factor, the First Contentful Paint factor, was initially used by Google in the Google Lighthouse, and after a while the Gtmetrix tool considered this as one of its factors. In general, no matter what Google does, everyone else will act according to it, whether they read it or not.

It is noteworthy that speed factors are no longer as simple as in the past, and to solve many of these SEO factors requires high expertise (in the field of programming and SEO and sometimes UX) and just reading a few Persian and foreign articles is not a special task. کرد. I said this first so that we do not expect too much from ourselves or the article

 

What is First Contentful Paint?

If you look at the first Performance Report parameter in gtmetrix, it is the First Contentful Paint criterion. To better understand the concept of First Contentful Paint or FCP, I must first give you a definition of First Paint.

The First Paint metric, which has been available for years in GTmetrix and some other site speed testing tools, زمان indicates the time of the first rendering on the page by the browser. In simpler terms, First Paint is when the first change is made to the page and the user may be able to see it. Yes, it is possible. Because maybe the First Paint of a page only involves creating the background color of that page and this color is not recognizable to the user. So web developers have come to the conclusion that First Paint is not a very good measure of speed and, of course, user satisfaction, and consider a new measure called First Contentful Paint.

The difference between First Paint and First Contentful Paint (as the name implies) is in the content display. In fact, FCP (First Contentful Paint) is when the first content is displayed on the screen. Content can be text, photos, videos, or <svg> or <canvas> elements, and so on. So at this point, the user will definitely see the content on the page and will be relieved that the page is loading. So the FCP benchmark is more focused on UX or user experience. Of course, this criterion has existed in GTmetrix tools since 2017 and is not new.
The GTmetrix site in this photo shows the difference between First Paint and FCP well.

Let’s give a real and good example.
Search in Google and its main page Larry Page and in the second frame Google search box is displayed, ie FCP has occurred. In the second frame, a content is created, which is actually the same as the search box.

In the second frame, not all the contents of the site are processed and displayed, and when we calculate the time of displaying the first content to all the contents, it is as if we have considered the middle of the two criteria, FCP and LCP.

Where is FCP other than GTMetrix?

FCP is almost everywhere, as mentioned in the Console Search Tutorial. You can see this metric in Google PageSpeed ​​Insights, Google Lighthouse, and the Core Web Vitals Search Console report.

First Contentful Paint’s contribution to the Performance Report

Remember that the purpose of site speed monitoring tools like GTmetrix is ​​to help us create a better user experience. So the FCP benchmark directly affects the Performance Score in the new GTmetrix and is 15% of the FCP Performance Score.

How good is the FCP?

The GTmetrix site provides the following classification on what the proper amount of FCP should be:

  • Less than 0.9 seconds: Good
  • Between 0.9 and 1.2 seconds: Acceptable, but requires optimization
  • Between 1.3 and 1.6 seconds: Slightly longer than standard
  • More than 1.6 seconds: Much longer than standard

 

How to optimize FCP or First Contentful Paint?

I wish we could give you a magic code in this article and put it on the host and your site speed would be below 0.9 seconds, but it is not easy and we do not have this kind of code like before. FCP or First Contentful Paint is not an error, if your site time is high in this criterion, it indicates a set of site speed problems, in which case you should check each of the following items and factors and then try to fix them.

  • Reduce server response time (TTFB)
  • Using a Content Delivery Network (CDN) with the correct settings –
  • Proper use of cache – Serve static assets with an efficient cache policy
  • Avoid Multiple Redirects – Avoid multiple page redirects
  • Use preconnect and dns-prefetch in third party services – Preconnect to required origins
  • Compress CSS files – Minify CSS
  • Remove unused CSS
  • Use rel = “preload” in sources such as GSS, CSS or fonts – Preload key requests
  • Avoid long pages with heavy data (this in itself becomes a long article) – Avoid enormous network payloads
  • Reduce the number of consecutive CSS and JSs – Minimize critical request depth
  • Use font-display in fonts – Ensure text remains visible during webfont load
  • Eliminate render-blocking resources – Eliminate render-blocking resources
  • The heavier the page DOM, the slower the page, JS topics – Avoid an excessive DOM size
  • Keep file size small, such as the optimize images error (this is a long article in itself) – Keep request counts low and transfer sizes small
  • FCP time largely depends on the technical quality of your server and the coding done on your site. Get the best host and know if Iran hosts
  • are good for you or abroad.

 

Summary First Contentful Paint

What is First Contentful Paint? The First Contentful Paint criterion, abbreviated FCP, specifies when the first page content is displayed to the user. This criterion constitutes 15% of the Performance Score.

To improve FCP, you need to consider a series of important factors, which are at least 10 factors, and we mentioned above, in other words, improving and optimizing the FCP factor by giving a code is not solved and is not simple.

Finally, it is recommended that you seek help from an SEO expert or someone you trust and know to get better results. You can also ask questions in the comments of SEO teaching site.

Be sure to follow the instructions for fixing SEO teaching gtmetrix errors. Or if you are interested in technical SEO, follow the technical and technical SEO topics.

Leave a Comment