First Contentful Paint: What is it?

First Contentful Paint: What is it?

What is First Contentful Paint?

First Contentful Paint (FCP) measures how long it takes the browser to load the first piece of  (webpage) DOM content after a user navigates to your webpage. Images, non-white canvas elements, and Scalable Vector Graphics (SVG) on your page are considered DOM content.  For the purpose of measuring First Contentful Paint,  “iframe” content is not evaluated, however the calculation does take into consideration text with pending web fonts.

First Contentful Paint is the first of six metrics tracked in the Lighthouse report’s Performance section. Each metric measures a different aspect of page load time.

First Contenful Paint - Google PageSpeed Insights Lab Data

Google PageSpeed Insights Lab Data

Google’s PageSpeed Insights displays FCP in seconds

First Contentful Paint happens in the third frame, as that’s when the first text and image elements are rendered to the screen.

First Contenful Paint - Mobile

Google’s PageSpeed Insights displays First Contentful Paint on mobile

You’ll see that while some of the content has rendered, but not all are rendered completely. This is an important distinction to make between First Contentful Paint (FCP) and Largest Contentful Paint (LCP), which is used to measure whether the page’s main contents have completed loading.

The focus is on content, and the idea is that this measure will tell you when your user receives consumable information (text, images, etc.) – which is far more relevant for assessing user experience than when a background or style has been applied.

 

How PageSpeed determines your First Contentful Paint score

Based on data from the HTTP Archive, your First Contentful Paint score is a comparison of your page’s FCP time to FCP times for real websites. For example, sites performing in the ninety-fifth percentile, First Contentful Paint takes roughly 2.2 seconds to render. If your website’s FCP is 2.2 seconds, your First Contentful Paint score will be 78 out of possible 100.

The following table explains how to read your FCP score:

First Contentful Paint time
(in seconds)
Color-coding
0–1.8Green (fast)
1.8–3Orange (moderate)
Over 3Red (slow)

 

How to test your website’s FCP

You can use a variety of methods to evaluate the performance of your website. Google’s PageSpeed Insights is one of the best, both because it allows you to measure First Contentful Paint timings and it’s free:

First Contenful Paint - PSI Search

Google’s PageSpeed Insights — Website Performace Test

All you have to do now is type the URL of the page you want to test into the search bar. Then wait for a few seconds before showing you the results on the page with a lot of data to sort through.

Below that is the Lab Data section. The results of PageSpeed Insight recent test are shown below:

First Contenful Paint - PSI Lab Data

Selecting the button in the top right corner of the Lab Data section will provide a breakdown of what each metric means.

One of the nicest features of PageSpeed Insights is that it does more than simply inform you if your website is slow — it also offers suggestions on how to improve its performance in the Opportunity section:

First Contentful Paint - Opportunity Section

Google’s PageSpeed Insights — Opportunity Section

 

How to improve First Contentful Paint (4 basic steps)

To provide your website’s visitors the greatest possible experience, as performance optimization is essential, you should first reduce your First Contentful Paint timing.  Here are four key steps to improve your First Contentful Paint.

  1. Enable caching

    Caching is the process of storing copies of web pages in a cache, or temporary storage location, in order to access them more quickly. Technically, a cache is any temporary storage location for copies of files or data, but the term is often used in reference to websites. In order to load websites faster, web browsers cache HTML files, JavaScript, and images, while DNS servers cache DNS records for faster lookups and CDN servers cache content to reduce latency. In practice, you can use a variety of caching techniques, including:

    • Site caching: With website caching, you can control the settings for this type of caching with a caching plugin, which saves a flattened copy of your web page in a location in your website so that it can be quickly served to your visitors.
    • Browser caching: Browser caching allows your visitors’ browsers to store elements from your site using their own configurations.
    • Server caching: This type of caching uses a separate server to store your website’s resources in order to reduce the load on your own. A common example is a Content Delivery Network (CDN).
  1. Compress your website’s images

    The largest elements on any website are usually the media files. Unless you want to design a site that is entirely text, you’ll need a way to reduce image loading times.  To do this, you can either manually optimize your images using websites such as tinypng.com or an image compression plugin.

  2. Optimize your site’s JavaScript and CSS

    For aspects of functionality and design, most modern websites rely heavily on JavaScript and CSS.

    While scripts and stylesheets usually don’t have a lot of weight to them, the more that your visitors use them, the more they add up. Furthermore, browsers must execute each script separately, which can significantly slow down performance.

    Scripts and stylesheets can be minified and combined to reduce their load time.

  3. Implement lazy loading

    Browsers don’t always load and render your pages’ images in the order you want them to appear. As soon as the photos and graphics have finished loading, they will appear. The amount of time it takes them to do so varies depending on the size of the files, your internet connection, and other factors.

    Lazy loading delays the rendering of some images until the user scrolls down and sees them. In theory, this should help you cut down on your FCP times. However, this only works if you use lazy loading for the appropriate elements. Above-the-fold images, or those that appear in the first section of the page, should not be used with this technique to get the best results.

 

Automatically Improve your First Contentful Paint with a Web Performance Optimization Plugin

If you would rather have a tool automatically optimize your website’s First Contentful Paint, you can use a web performance plugin such as our Pegasaas Accelerator WP plugin for WordPress. Pegasaas offers a host of built in features that automatically implements:

  • Page Caching
  • Lazy Loading
  • Font Preloading
  • Performance Monitoring
  • Image Optimization
  • JavaScript and CSS Optimization
  • Resource Optimization
  • Server Performance Optimization

With Pegasaas Accelerator WP, website performance optimization is simple to set up and can have your site with an improved First Contentful Paint in just a few clicks of the mouse.

Sign up is easy and includes a free trial and 30 day money back guarantee, so that you know that the plugin is right for you and your website.  Try it out today!

Comments are closed.