Know about First Paint time, Contentful, Meaningful and Time to Interactive

October 19th, 2018
04 Sep 2018
Chandru Rajendran
No Comments

 

What is First Paint?

Knowing what exactly is First Contentful Paint(FCP)

First Meaningful Paint

Know about Time to Interactive (TTI)

 

Have you ever given a thought of the basic factors that involves loading a website under the recommended time?.

I’ve done a detailed analysis of the 4 basic components, which explains how the metrics are being rendered with respect to load time.

Let’s find out how.

 

1) First Paint

After you hit the URL on the address bar, the moment you happen to see something in the white screen is called First Paint.

It could be anything, even a background color change is also called as First Paint.

 

2) First Contentful Paint

The time when you able to see some text, image or any visual appearance is called First Contentful paint (FCP).

 

3) First Meaningful paint

Once your browsers starts painting the content, all the elements will start rendering to give you a proper look.

Probably the layout should make sense to you.

Take a news website for instance. The time between you start seeing something on screen and the meaningful content. It could probably be a news headline along with the image.

 

4) Time to Interactive

Before we move further, let me give you some insights about the metrics which loads at the back whenever you load your website.

Have you ever given thought to know what really happens when you load your website?

Let’s give a shot in knowing it.

When we analyze your website in Google page speed, you’ll get the performance scores and the page load distributions.

For instant I made an analysis on a popular website https://www.linkedin.com and the results are found below:

 

 

In the report, apart from the performance score you could see that they are reporting about the page load distributions.

FCP and DCL are the two metrics when it comes to the description of the webpage.

Having said that, what exactly are FCP and DCL?

FCP (First Contentful Paint) – It is the measure when a visitor sees a first visual response while a webpage is loaded.

DCL (Document Content Loaded) – It is a measure when first HTML document is loaded and parsed.

 

 

These are the data acquired from the Chrome User Experience (CrUX) report. It provides speed data for popular websites that are known by the Google web crawlers.

If you’re unable to see the CrUX data, it’s recommended that you try using Lighthouse to get excellent performance audit report.

To know more about the light house tool and how it helps you to get a perfect report, click here.

I’ve done a detailed research for the website users to know more about it.

In a page, when loaded, the content which you are able to see without scrolling is said as Above the Fold.

For rendering those files and the time taken to load them impacts the load time, which is a known fact.

To know more about how to render the right files and block the unwanted, click here

Also, optimization plays a vital role in render the right files(CSS, JS, Images, etc)  within the stipulated time.

Let’s load a website and closely monitor second by second to know how the rendering happens.

 

 

What exactly First Paint is?

When you load a website, the time taken by the browser to begin the rendering, is the first paint.

To explain you even more better in simpler terms, it is the initial pixel painted on the screen.

User perspective: First paint responds to the question, if the website is loading or not.

1.2 seconds

 

Knowing what First Contentful Paint is

From the moment you have loaded the website, you wouldn’t have seen any content apart from a shade or anything which is not a text.

Therefore, the time taken to render the first content to be displayed on the screen is First Contentful Paint.

This render certainly can be of any form of content to the user.

User perspective: Both the first paint and the first contentful paint are important. It answers the user’s question, if the webpage is currently loading or not.

1.7 seconds

 

First Meaningful Paint

Although you have seen some form of content before, it is still meaningless to view the website now.

Maybe you need a visually understandable content for the users to stay in your website.

Therefore, the time taken to display the contents which is a meaningful content to the users when viewed is termed as First meaningful Paint.

User perspective: This is a metric which answers to the user’s question: is the website useful?

2.2 seconds

 

Time to Interactive

Now that the website is loaded with the meaningful content, the users will tend to access it.

It is the time taken for your website to render both visually and also able to be reliably responding to all the user inputs.

User perspective: This is a metric, which answers to the user’s question: is it usable now?

3 seconds

Normal load time should be under 5 s for first load, and for subsequent loads, the load time should be 2s

 

Everything about the website in the latest trending world is about the end user and how they perceive things at the first sight.

All you need to do is to satisfy their requirements and understand their expectations to stay in your website.

By doing this a visitor might get converted into a customer.

You could refer one of our blog which explains how to retain a visitor and make them your potential customer. Kindly click here to view it.

 

 

Furthermore, a well-known truth is that the world is trending towards the mobile usage.

Hence, it is a huge wake-up call for all the website owners to follow the recommendations.

Also, a study done by the Google explains that 88%+ travellers desire to stay in a website/application which responds them quickly.

 

Summary:

First of all, you must admit that there’ll be competition always in any field that matters.

So, it depends upon how you are taking things seriously and possible immediate actions for the betterment.

Doing this you are making the potential end users happy and retaining them in your website for a longer time.

You could see that this strategy reflects in your revenue hike.

All you got to do is to have systematic monitor of your website’s performance and stay updated with the latest technology.

Furthermore, reducing and cutting off the unwanted rendering of resources is highly recommended.

Understanding the importance of the right content at the right place along with the load time concern is the best practice.

That way, your website will certainly earn smile in the user’s face.

Following this regulations, the chances of bounce are limited to fewer than 30% each time they load your website.

 

You could do it yourself.

Analyzing your website here and get it loaded under 2 seconds by doing a simple configuration with SpeedBoost.xyz

 

Feel this blog is helpful? – Share your thoughts, questions and feedback.

 

 

 

 

Chandru Rajendran

Chandru Rajendran (Chadd) is a professional blogger. He loves to explore newer technologies and analyzes everything from User point and shares his knowledge for the easy understanding. A nature-loving fanatic keeps on gaining technical experience, in addition to being an analyst. He is the product manager of SpeedBoost Cloud Software.
Follow Chandru Rajendran on

Leave a Reply

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