What is First Contentful Paint? And How To Optimize It!

Which metrics affect the user experience of your website the most? According to Google, speed is extremely valuable in terms of both ranking and UX score. If you don’t have a web page that loads quickly and gives users what they are looking for, the traffic you potentially have will be reduced incrementally, and your statistics with maximized bounce rates will give Google a rather negative signal: ”Hey, there is something users don’t like!” This is exactly why today we will talk about an important metric called First Contentful Paint.

Do you want to increase your website traffic?

Try for free to boost your website traffic!

Register Now

Explore The Steps Make Web Pages Load

The speed you provide for users is related to the loading time of your site, that’s true. But your site doesn’t load in a single step.

Have you noticed when you visit a site before: First, a blank page greets you, then very quickly the content area begins to appear in frames. Step by step, the fields that appear in this frame are also loaded and the first content of the site appears. Sometimes the buttons are still inoperative at this step. For example, when you press the “Apply” button or scroll with the mouse, the page does not respond to this. Because Time to Interaction is not at the desired level yet. Then interaction becomes possible and eventually, the page is loaded completely.

Just like the steps just described, your website goes step by step while it loads. Of course, it is in the interest of the user that these steps take place in the fastest way. The first of these steps (right after the first paint) is often called First Contentful Paint. That is, the first byte loaded on your web page associated with the content. Note that this byte does not necessarily have to give information about the content itself. Even a loading process that simply gives a hint about the general framework of the site with a color tone difference is called first contentful paint.

Test Your Website Performance!

You can quickly analyze your site in a minute

Analyze!

What is First Contentful Paint?

When used with its technical definition, First Contentful Paint means that the browser receives and renders the first byte of content from the DOM, according to the user’s request. First Contentful Paint, which makes the first feedback or hint about the page that is in the loading process become visible, gives the visitor psychology a “wait a little longer” message and this is exactly why it is very effective in improving the bounce rate.

First Contentful Paint can be obtained by loading a part of an image, background image, text, or any other similar content on your site. In short, there is no special content type rule for this. The loading process of the pending web fonts is also evaluated within the FCP. Only iFrames contents are excluded from the process.

First Contentful Paint and Google Lighthouse: What We Have?

First Contentful Paint is determined as one of the important metrics that make up Google Lighthouse’s Performance score. Your score is presented to you in seconds, as well as a number. You see green if you have a good score, red if you have a bad score, and orange if you have a moderate score.

The metrics that make up the total Performance score by combining with FCP are as follows:

1. First Meaningful Paint (We’ll talk about the difference between this metric and FCP later)
2. First CPU Idle
3. Max Potential First Input Delay
4. Time to Interactive
5. Speed Index

What Google Lighthouse does to measure First Contentful Paint is to detect the moment when the first DOM content is rendered after the user clicks the page and measure the time elapsed between the click and that moment. As you can imagine, the measurement is performed as a lab experiment. Note that Lighthouse doesn’t do a field experiment. The measurement basically takes place as follows:

Your FCP time is calculated and compared with others using information from HTTP archives of other real websites. As a result of this comparison, you are presented with an average FCP score.

Interpretation of Scores and Colors Related to FCP

Generally;

• FCP time between 0 – 2 seconds – Green – Fast site – Score between 75 – 100
• FCP time between 2 – 4 seconds – Orange – Moderate site – Score between 50 – 74
• Over 4 seconds FCP time – Red – Slow site – Score between 0-49

You can go to the related article to learn more about performance audits and Google Pagespeed metrics.

Tools to Measure First Contentful Paint

We said that Google Lighthouse measures First Contentful Paint. Screpy, as a tool that is fully integrated with Lighthouse, offers you FCP scores related to your desired web page and creates a tracking infrastructure by regularly re-measuring these scores. Unlike our competitors, thanks to the AI-based system, we know which page should be analyzed and how often, we create analysis and visualize the analysis without you needing to place an order. In this way, it becomes much easier to follow the performance of your website and make the necessary improvements.

It is possible to say that First Contentful Paint can be measured with the following tools:

1. Google Lighthouse
2. Chrome DevTools – Did you know that Screpy also integrates with DevTools?
3. Pagespeed Insights
4. Chrome User Experience Report

Google’s statements say the ideal FCP time is 1 second. If this time is 3 – 4 seconds or more, your site is considered slow. However, according to a study by Search Engine Journal, 57 percent of websites today take more than three seconds to load. This means that a good FCP score can be an extremely powerful weapon for improving your rank.

10 Ways to Improve First Contentful Paint – Best Recommendations!

If you’re ready, together we’ll explore ways to increase your UX score and maximize your performance by shortening the time of First Contentful Paint on your website. Rocket and maximize your users’ potential conversions by minimizing bounce rates, folks!

Test Your Website Performance!

You can quickly analyze your site in a minute

Analyze!

Improve Server Response Time (TTFB)

Research has revealed that 58 percent of slow websites have a problematic performance in server response time. Let us tell you what this means: Even if you fix everything by doing a lot of optimizations on your site, it will not be possible to speed up due to the delay sent by the browser to the server. Basically improving TTFB depends on:

• You should optimize the HTTP request time.
• You have to improve request processing time.
• You should improve the HTTP response time.

When these values ​​reach the level you want, they will reach a perfect result in total server response time. Remember, FCP means much more than the performance of your server. But if your server is a cause of slowness, nothing else can solve it but the server. Generally, the reasons for a slow server response time are as follows:

1. High DNS response time
2. Delay in response due to dynamic contents
3. Web traffic is much higher than the server can handle
4. Delays in processing browser requests due to network latency
5. Server configuration features and performance features are not sufficient

In addition, the fact that your server is too far from the physical location of your target audience increases the time required to transfer data and negatively affects the server response time. Contact your server provider to improve all of these.

The fast hosting provider you choose and the configuration with a high quality of features will positively affect the results you will receive. Also, using a quality CDN will affect overall performance. Finally, displaying content to users via cookies until the upload is complete also affects your First Contentful Paint score perfectly and reduces server response time, folks!

If Render-Blocking Resources Are Available, Detect and Eliminate Them!

Rendering a web page requires putting together the HTML code contained therein, scripts written in Javascript, HTML imports, and of course CSS style sheets. See also how do search engines work for more technical information. The rendering process will need to take place flawlessly so that different elements can be defined and presented to the users as a meaningful whole. Usually, the tags on the HTML document are easily parsed, read, and rendered by browsers. However, there may be more problems in rendering CSS and Javascript files on your site.

This basically relates to the following: The number and size of CSS and JS files can be higher than HTML files. Even if HTML files are rendered early and ready to be published, the browser has to wait for the JS and CSS files to be rendered as well, as the browser requests a merge. Resources that cause this waiting time and render slow are called render-blocking sources. These are files that degrade the user experience by preventing even readily available resources from being loaded.

Defer and Async Options

Of course, there are a few things you can do to improve this situation that causes you to score much lower than First Contentful Paint. If you wish, you can find the task in question among our Pagespeed task pages and examine a few methods. Let’s talk about the subject briefly here.

1. Defer option: The defer option you can use to eliminate render-blocking sources tells the rendering process: Parse CSS and JS files after HTML parsing is finished. In this way, the process can be completed synchronously.

Defer option example:

<script defer src="https://v3b4d4f5.rocketcdn.me/path/to/file/script.js">

</script>

• Async option: If you take advantage of this option, you will be telling your site to start parsing CSS and JS after all resources are downloaded. Thus, while the HTML code is parsed, other files will only be downloaded and the completion of the job will be synchronous.

Async option example:

<script async src=”/example-js-script”></script>.

You can use both of these methods in WordPress to improve FCP and eliminate render-blocking resources.

Identify Render-Blocking Sources and Inlining Them

Here is another way for optimization:

1. First, ensure that the render-blocking sources are identified.
2. Then inline them in the HTML page. You can use <script> and <style> tags for this.

Removing Unused Javascript

Increasing the workload your web page has to perform will cause the speed to slow down and the First Contentful Paint score to decrease. Accordingly, it is very important to identify and remove unused Javascript. If Javascript files are not part of the above-the-fold content or if they do not fulfill any function although they are in the code, they can be removed. To do this, you can delay JS resources or have them run only when needed. Various plugins used by adding to WordPress automatically detect and remove unused JS. You can use Flying Scripts or WP Meteor.

What About Hard-To-Load Above-The-Fold Images?

Loading images on web pages may take more time than loading text-based data. In particular, image files that are not suitable for loading quickly in terms of high size and format slow down the loading speed considerably. If you have an image-heavy site, get well soon! You have completely waived user experience on your site.

So what should you do in this situation?

Basically what we call lazy loading is this: loading of images that are not visible via the browser’s viewport is constantly delayed. These images, which start to load when the user scrolls, also cause a cumulative layout shift. We have to say that Cumulative Layout Shift significantly reduces both your user experience score and the enjoyment of the time users spend on your site.

For this, you can use various tools and plugins to disable late loading. It might be a good idea to use WP Rocket for this.

Optimizing DOM Size of Your Site

You know that your website exists in the internet world as maps with objects and trees connecting these objects, right? Okay, nice! The virtual structure that expresses all of the objects on a web page and connects them is called the DOM tree. The right nodes, the right relationships connecting objects, and more. Here is a sample DOM tree for you:

1. Tree depth: Generally, the sum of the depth in each node is called tree depth.
2. Node: Each HTML element in the DOM tree is called a node.
3. Child elements: The main element is basically called a parent element. All of the nodes under that element are considered child elements.

In general, we understood what the DOM tree is by understanding the above concepts. So let’s say this now: If you haven’t optimized your site’s DOM tree, there will be a lot of nodes that the user cannot see yet, due to confusion and workload, while loading is taking place. The browser has to wait for a while to queue, format, parse and render each of these nodes. This slows downloading, causing your First Contentful Paint score to drop. Also, an oversized DOM tree means an enormous amount of space taken up in memory.

So, what is the epitome of what we call “too big”? Let’s say right away:

1. If a parent node has more than 60 child nodes, there may be a serious problem in loading.
2. If the depth of a node is more than 32, loading slows down.
3. If there are more than 1500 nodes in a DOM tree, this points to an oversized DOM tree.

If you want to find more about reducing excessive DOM size, go to Screpy task related to this.

Tips for Reducing Excessive DOM Size

Here are some tips for reducing excessive DOM size:

1. Divide your pages with many nodes into additional subpages. In this way, you will reduce the number of child nodes belonging to a single parent node.
2. Separate comments, posts and similar content types into different pages and enable users to see the content by navigating to these pages.
3. Remove unwanted content completely and prevent it from taking up space. Hiding it with CSS instead of removing it is not a good thing.
4. Pages can load slowly and the DOM tree can grow unnecessarily due to unnecessary <div> tags.
5. Avoid using themes that perform poorly in terms of SEO, page speed, and DOM tree optimization.

Texts Remained Visible During Webfont Load

Have you reviewed the Screpy task “Text should remain during webfont load“? The slow loading of the webfont loads you use may mean slow loading of your content and FCP. However, if you make the settings on your web page so that the correct web font is loaded with a default webfont, you will eliminate this problem.

This problem, also known as Flash of Invisible Text (FOIT), which prevents text-based content from being visible during web loading, delaying the process can be solved in two ways:

1. Do not use customized web fonts,
2. Or, keep them in the loading process and make the text visible with a default web font. To do this, all you have to do is add a snippet inside the @ font-face style. This will be the snipped font-display: swap. You need to add this as follows:

@ font-face {

  font-family: 'Pacifico';

  font-style: normal;

  font-weight: 400;

  src: local ('Pacifico Regular'), local ('Pacifico-Regular'), url (https://fonts.sample.com/pacifico.woff2) format ('woff2');

  font-display: swap;

}

• This is how simple it is to accomplish. Also, if you want to use preload web fonts, you can use the code <link rel = "preload">.
• Finally, if you want to take advantage of Google fonts, simply add & display = swap to your parameter. Here is the case where the code will appear when you add this:

<link href = "https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel = "stylesheet">

But let’s give you information on this subject. Are you sure that the font you use is supported by all browsers? If your font is not supported by some browsers, this solution will not be permanent enough. For more information on how to create a decoder and meet Font Face Observer, go to Web Dev’s related page!

Multiple Page Redirect is Harmful To First Contentful Paint

What HTTP code do you use to redirect one web page to another? Let’s say: the HTTP 301 redirect code, of course. When you use this code, something like the following can appear on the console of your browser:

HTTP / 1.1 301 Moved Permanently

Location: / url / to / new / location

Think of redirect like this: When a web page is parsed, rendered, and loaded, it re-performs parsing and rendering in line with the page’s redirect request. This can multiply the entire loading process several times, causing the FCP to be really badly affected. This warning, which you usually encounter as “avoid multiple page redirects” in Google Lighthouse audits, will mean hundreds of milliseconds of slowdown. Learn more by going Critical Rendering Path.

Here is an example about optimized rendering and unoptimized one and their effect on first contentful paint score of any web page:

Minification and Compression of Text-Based Elements

It is its HTML, CSS, and Javascript files that make your website renderable by browsers. So if a file is unnecessary, it should be removed. But let’s consider that this file is necessary. However, whitespaces that are not required in the file may contain additional code snippets that make no sense. In this case, you can reduce the size of the files by using minification and compression programs and make them easier to load. In this way, the browser needs a shorter time to render and load source files. In the end, this will affect the FCP score quite positively.

• Check out what you can do by browsing our content on CSS minification.
• Learn more about Compression.

Is First Contentful Paint and First Meaningful Paint Same Thing?

No. Let’s examine the basic concepts for this:

1. First Paint: The first time the render is detected by the browser, it is directly named as first paint. Generally, a simple background color change is called first paint. There is no loading of content here, but the image gives hint that rendering has started.
2. First Contentful Paint: The time required for the first content byte rendered by the browser through the DOM tree on the website is called first contentful paint. This byte, also called FCP, is the first piece of an image, text, canvas, or other type of file on the Document Object Model (DOM). This paint is not expected to give the user any information on the subject of the content.
3. First Meaningful Paint: It is the first time the primary content on the web page is loaded in a way that the user can understand and benefit from. When First Meaningful Paint is installed, the user begins to use the site on a large scale. It also easily understands whether the site provides the information it is looking for.

FAQ

Test Your Website Performance!

You can quickly analyze your site in a minute

Analyze!

You May Also Like

• First Contentful Paint
• What are Google Pagespeed Insights? Metrics and Data Types!
• Reduce Excessive DOM Size
• Core Web Vitals: What Are They and Why They Matters
• Page Speed and SEO: Improved Google Rankings, Stronger Performance