In the realm of digital marketing, oftentimes you’ll find that it’s Google’s world and we’re all just living in it.

...Maybe not all the time, but Google certainly rules the world of digital marketing with somewhat of an iron fist. What Google says, goes, and when they changed the SEO ranking factors earlier this year, it left website owners scrambling to understand these new metrics and terms. One of these new players on the field of SEO analytics is something called “Largest Contentful Paint”, or LCP.

‍

What is Largest Contentful Paint?

Largest Contentful Paint is one of Google’s newest user experience metrics. The metric itself is measured in seconds; an LCP measurement is how long it takes for the main content of a page to download and gear up for user interaction after someone clicks on the site. Hence, why it is a metric for user experience; the sooner a user gets to interact with a web page, the better their experience.

The only thing that determines this metric is the largest image or block of text within the user viewport when the page is loading. These elements can be images, video poster images, background images, or block level elements, which leads us to our first must-know in our Largest Contentful Paint crash course:

#1: What Elements are Considered When  LCP is Calculated?

There are only certain elements that go under consideration when an LCP is calculated. Amongst these Google Golden Children are things called block-level elements. In HyperText Mark-Up Language, or HTML, there are two different types of styling elements for web pages: our good friends the block-level elements and their cousins, the in-line elements. 

The difference between the two is that block-level elements are… well, a block. They start on a new line and take up the full width of a page, causing a line break to occur when they end. In-line elements instead don’t cause a line break and only take up the space bounded by their opening and closing HTML tags. In-line elements are not considered when Google calculates your LCP score.

It makes sense, right? That the elements that take up the most space would be considered when Google calculates Largest Contentful Paint. It’s important to be aware of the differences between the types of HTML elements that can affect your webpage’s LCP, because, in order to improve your score, you have to know where to look and what to change. This leads us straight into fact numero duo...

‍

#2: Where to Look to Improve Largest Contentful Paint

If you own a website and are looking to optimize your SEO score, you came to the right place. As it turns out, your web page’s LCP score is one of the easiest SEO metrics to improve; you simply identify the largest element on a page and make it smaller so that your page loads faster. Here are a few things to which you should pay attention to get the best LCP score for your web page:

‍

• Slow server response times: If your server is handling content inefficiently, it is causing your web pages to load slower and thereby lowering your LCP score. Check your Time to First Byte (TTFB) to measure the response time of your server to see if this is the source of your problems.

• Render-blocking JavaScript and CSS: Before a browser shows content to a user, it parses the HTML code of the webpage into a DOM tree, a structure that spatially represents each object on the webpage. This process pauses if the browser stumbles across external stylesheets or synchronous JavaScript tags on your webpages. These objects are “render-blocking”, so if your webpage has these objects, it cannot be displayed until these objects are loaded. Try deferring non-critical or inlining critical CSS.

• Slow resource load times: Some elements in HTML load slower than others, such as <img>, <image>, block-level elements with text nodes, and <video> elements. If your web page has these, it will lower the LCP score if rendered above-the-fold, or in the part of the screen that the user first sees when they land on your page. Optimizing and compressing images and text files, using cache assets, and preloading important resources are all ways to reduce resource load times.

• Client-side rendering: Allowing web devs to build websites that load directly in the browser with Javascript, this type of rendering can have a negative impact on LCP if optimizations are not put in place. Try using server-side rendering or pre-rendering instead.

‍

#3: First Contentful Paint vs Largest Contentful Paint

Although related, these two measurements are slightly different. Whereas Largest Contentful Paint is a measure of how long it takes to load the largest element in your initial web page viewport, the First Contentful Paint, or FCP, is a measure of how long it takes to load the first text- or image-based element in a user’s initial viewport. It is another metric Google uses to measure user experience.

Phew, that was a lot of ground to cover in a small amount of words, but that’s copywriting for you. Still have questions? We hope we answer them in the section below. If not, let’s talk.

LCP FAQs 

‍

What is a good LCP? 

A good LCP score is 2.5 seconds or less. Anything higher and you’re pushing into dangerous LCP-score territory. Feel like it’s going that route? Don’t even know where to begin? That’s totally fine. At Marketwake, we meet you where you are with your SEO questions.

What is LCP in websites?

LCP is a score of how long it takes the individual web pages of a website to load. There is not one aggregate LCP score for a website, just separate ones for its individual pages.

What is LCP performance? 

LCP performance is how long it takes for the largest element on the first viewport of your web page to load. That performance can be good, resulting in a low LCP score; or bad, resulting in a high LCP score.

How do I increase my LCP?

It all starts with identifying possible sources of your problem. For that, start with the information above, and for everything else, reach out to us here at Marketwake. We would be happy to help.

The Bottom Line

If you did what we sometimes do and rapid-scrolled to the end of the page to get your answers about Largest Contentful Paint answered in a snappy fashion, here’s the skinny:

‍

• Largest Contentful Paint (LCP) is a new Google user experience metric. It measures how long it takes for the largest text or image element in the user’s initial viewport to load.
• If your LCP score is high, then your largest image or text element takes a long time to load.
• Improve your LCP score by shrinking the element, causing it to load faster.
• Largest Contentful Paint is not the same as First Contentful Paint; while both Google user experience metrics, the latter is a measure of how long it takes for the first element in the user’s viewport to load.

Like we said in the beginning, it’s Google’s world and we’re all just living in it. But we have tools to interact with that world and optimize our web pages to thrive in the wild west of SEO. If, at this commencement of our explanation of LCP, you find yourself thinking, I don’t even know where to begin to fix my Largest Contentful Paint, connect with Marketwake! Reach out to us today to start a conversation.