How to Improve First Contentful Paint and Largest Contentful Paint –

How to Improve First Contentful Paint and Largest Contentful Paint - ManageWP

As you may know, websites don’t load all at once. The more complex a page is, the more time it takes to render all its elements. That’s why you need to use more than one metric to measure any site’s performance.

Two of the most important performance metrics you can measure are First Contentful Paint (FCP) and Largest Contentful Paint (LCP). These two numbers tell you how long it takes, on average, for each page’s elements to load. By reducing them, you can improve site speed across the board.

In this article, we’ll talk about what FCP and LCP are and how to measure both. Then we’ll go over several tips to improve your loading times. Let’s get to it!

What are First Contentful Paint and Largest Contentful Paint?

A page’s FCP tells you how long it takes for the first text or image-based element to appear in a visitor’s browser. LCP, as its name implies, measures the time it takes for the largest element to appear.

As we mentioned before, websites don’t load all at once. If you open any website now, you’ll see that elements appear in an order that seems almost random. If you open Rotten Tomatoes, for example, here’s what the homepage looks like one second into loading:

Now here’s the same part of the screen, after the page loads fully:

A fully-loaded page.

Some people measure website performance using overall loading times. That’s a decent start, but it doesn’t paint a complete picture. Ideally, your FCP times should be as low as possible, and your LCP times should be similar:

First Contentful Paint and Largest Contentful Paint measurements.

If the difference between your page’s FCP and LCP times is small, that tells you two things:

  • There are few, if any, elements that outweigh the rest (e.g., no massive image, video background, etc.).
  • The page’s assets have probably been minified.

There’s not one specific number to aim for when it comes to improving your FCP. It will depend on the elements you’ve incorporated on the page in question. However, in order to keep the overall loading time reasonable, you’ll want to decrease it as much as possible.

How to test your website’s FCP and LCP times

There are many tools you can use to assess your website’s performance. One of best is Google’s PageSpeed Insights, both because it enables you to measure FCP and LCP times and because it’s free:

The PageSpeed Insights homepage.

All

[…]

 



This article was written by Will Morris and originally published on ManageWP.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Show Your ❤️ Love! Like Us
Scroll to Top