Do you have a website and want to take advantage of all the possibilities to optimize it and be found by users? We recommend that you keep up to date with the changes made by search engines. In 2019, for example, Google announced the importance of evaluating a website’s speed ranking, making a new metric automatically important: the First Contentful Paint.

Are you interested in knowing how fast your web page loads and how to evaluate this new metric? Here’s the trick: in this article we will explain how to do this, in particular we will explain what First Contentful Paint (FCP) is and why it is important, as well as some tips and suggestions to improve your results in terms of speed.

Curious? Let’s go!

What is First Contentful Paint?

First Contentful Paint (FCP) is a performance metric that assesses the perceived load speed of a web page. Basically, it’s a number of values that represent the loading speed of pages from the visitor’s perspective.

Generally, the types of content that are considered when evaluating FCP are:

• Images and videos
• Text presented in its own font
• Background images
• Non-white canvas elements
• Any multimedia content

When the page is requested by the visitor, in case one of these contents is displayed, the First Contentful Paint is automatically activated.

Thus, a fast FCP is important because it helps to evaluate how long your user waits to see the important information for which he landed on your page.

As you can imagine, the important information is not the logo or menu, but other content: for example, a video, the main text from a blog, an image, etc. So, the faster any content appears on the screen, the longer the user will wait for the page to start loading.

How to evaluate first Contentful Paint Ranking?

There are currently three different speed categories:

• Fast: FCP <1s
• Moderate: FCP <3s
• Slow: FCP ≥3s

According to Google, an optimum First Contentful Paint value, in order to provide a good user experience, is within 1.8 seconds, possibly less.

Tools to mesure and evaluate First Contentful Paint

By now, if everything is clear to you, you’ve probably gotten to the point where you’re wondering: how can I measure this metric and figure out if my website is performing well?

Among different tools to evaluate the FCP ranking, we would suggest you the PageSpeed Insights.

It is a free Google tool which is very easy to use:  you should just introduce the url of the website you are interested in into the search bar to get data on the actual speed of that web page.

The tool also provides two important means that do not affect the final value, but can help you speed up performance:

• Opportunities: suggestions for speeding up page loading
• Diagnostics: information on performance

Other tools you might find useful are WebPageTest, Lighthouse, all the tools that evaluate Chrome user experience like Chrome Dev Tools, Chrome User Experience Report.

How to improve First ContentfulPaint: tips and suggestions

Well, now that you are familiar with First Contentful Paint, what it is and why it is important, we would also like to provide you some tips on how to improve the result by speeding up the time it takes to download resources.

1. Minimise Server Response Time

First Contentful Paint is deeply related to Server Response Time, i.e. the time required by a browser to receive the first byte of webpage content. Therefore, to improve FCP, first of all you have to reduce Server Response time.

You can reach this goal following different methods:

• Choose a fast hosting provider;
• Use a high-quality CDN to speed up delivering your web site’s resources (videos, images, etc.);
• Activate caching: in this way you will reduce the server processing time and consequently server response time

Need some more advice on how to choose your web hosting provider? Discover all the answers in our guide!

2. First Contentful Paint tips: reduce or remove render-blocking resources

When you visit a webpage and you load it, the browser sets up different elements such as HTML, CSS files, JavaScripts scripts, etc.

However, the weight of these elements differs, so what usually happens is that when the visitor opens the web page, the browser already has the (lighter) HTML file ready but is still waiting for the HTML or CSS resources to be loaded.

So, these elements become an obstacle to rendering the page, which is why they are called render-blocking resources.

Nevertheless, at the same time they are often very important. This is precisely why we recommend minimising or eliminating these types of resources.

To do that, here are some recommendations:

• Find the critical scripts that are needed for First Contentful Paint and remove them as bite-sized resources by embedding them in the HTML page with<script> and <style>tag;
• Remove any unused code on the webpage;
• Move JavaScript elements from the header of the webpage (if they are not necessary to render the DOM) and load them after to improve the user experience.

3. Adopt HTTPS Caching to speed up visits

To increase the speed of your site, you can take advantage using the cache, in which resources are stored in order to retrieve them more quickly.

With HTTP caching, the browser saves a copy of the resources downloaded via HTTP by the user in the cache and is thus able to retrieve them quickly, improving performance for visitors who return to that same page again.

4. Make your Above-the-fold lighter

Making the header as light as possible is an excellent strategy for improving the First Contentful Paint: every second counts in the loading phase.

Therefore, pay attention to the themes you choose to create your site and choose those which present the most essential elements in the Above-the-fold. Also, avoid including animations, slider plugins and social media plugins in the header.

In addition, consider the use of images. Or better, exclude images in the above-the-fold from lazy loading (i.e. a script that postpones the loading of images that are not yet visible).

To solve this problem, look for a lazy loading plugin that already includes this feature.

Moreover, we recommend that you embed the header images (logo, icons, banners, etc.) in HTML or CSS. You can do this by using Base64 or SVG formats.

5. Make sure that the text is also visible when loading the font

The font is another typically heavy element that takes a long time to load.

Sometimes, the browser may not re-direct the text until all the fonts are loaded.

To overcome this problem, you can “force” the browser to temporarily display a basic font while custom fonts are processed and loaded.

6. Optimise the size of your site’s DOM

The DOM (Document Object Model) graphically represents, in the form of a tree with nodes, all the elements that make up a web page. It is useful for quickly editing elements written in JavaScript.

Having a DOM tree that is too large and branched can have negative consequences on First Contentful Paint because it requires more processing time to calculate the nodes, overloads the user’s memory performance and may therefore slow down loading.

To reduce the size of the DOM and optimise it, you could follow these tips:

• Separate large pages into smaller ones;
• lazy load as many HTML elements as possible;
• choose well-optimised themes;
• reduce the number of posts shown on the homepage;
• avoid plugins with too many <div>tags

7. Create Critical Rendering Path

The Critical Path is the fundamental CSS for displaying the first part of a page. Evaluating the critical rendering path means analysing all the resources the browser has to load in order to display the page the user requires.

Online tools such as Pegasaas are useful for generating Critical Path CSS. It must then be incorporated into the HTML document and all resources that block rendering must be removed. This will allow the browser to render the above-the-fold of the page immediately without having to wait for the CSS elements to load at different times.

Summary

As we come to the end of this journey to discover First Contentful Paint, we hope we’ve provided you with a new and very important perspective for evaluating your website’s performance.

We like to emphasize that this is a user-centered metric to remind you to never forget to put your user and their needs at the center of your goals and strategies.

If, on the other hand, you are still a new user and would like to find out how to create your own blog or website before optimising it, we recommend our tutorial for beginners.

Had you ever heard of this metric before? Do you know of any others you would recommend to our readers? Let us know in the comments.

Moreover, if you want to learn more or need our support to optimize your website, the Mailsenpai team is at your disposal, all you have to do is contact us!