How to improve largest contentful paint?

Welcome to part 2 of the mini-series on how to improve your Core Web Vital rank. As you know by

Background with blue elements.

Welcome to part 2 of the mini-series on how to improve your Core Web Vital rank. As you know by now, Google has confirmed that Core Web Vitals will become the official ranking factor for search results in May 2021.

In our 4-part blog series about Core Web Vitals, you will learn everything you need to know about the new ranking factor. In Part 1: Why you need to take core web vitals seriously, we went through the basics of what Core Web Vitals are and why they are important for your appearance on search engines, your traffic streams, and website revenue. In this part 2, we will go deeper through a key metric called Largest Contentful Paint or LCP and give our best tips on how to improve your Largest Contentful Paint.

In short, what are core web vitals?

Core Web Vitals are an initiative from Google to update its algorithm so that it favors page experience as a ranking signal. User-friendly sites are in other words highly favored by Google when it comes to appearance on SERPs. Google has formerly measured user experience on sites based on more traditional metrics such as:

  • Mobile-friendliness
  • HTTPS
  • Safe browsing
  • No interstitials

Added factors that form the Core Web Vitals are:

  • Largest Contentful Pain = LCP
  • First Input Delay = FID
  • Cumulative Layout Shift = CLS

Google takes all these metrics into consideration when ranking your website, but the heavier focus will be laid on the ones that form the Core Web Vitals. These latter ones measure user-experience, something that Google will start to rank higher than ever before. The user-friendlier your site is, the higher score you will get and the kinder Google will be to you when it comes to showing your site to potential website visitors on search engines.

Core web vital metrics: what is actually being measured?

It’s clear that Core Web Vitals will be important to implement, but what exactly is it that needs to be implemented? What is Google measuring in order to determine your ranking factor? Google has announced that the Core Web Vitals will consist of three new measures called largest contentful paint, first input delay, and cumulative layout shift. These may sound extremely technical and difficult to grasp, but don’t panic just yet. They are not as complicated as they sound and your webmaster will know how to implement them if you don’t fancy taking it upon yourself to learn. In this post, we will dig deeper into one of the three key metrics called Largest Contentful Paint, LCP.

Largest Contentful Paint = LCP

LCP Largest Contentful Paint

Largest contentful paint, LCP measures the loading performance of a website, in other words, how fast does your site load? As Core Web Vitals focuses on improving user-experience, LCP lays focus on measuring how long it takes for the user to click a link to actually see the majority of content on the screen. Former ways of measuring speed have not really been relevant to user experience, and the LCP metric is the closest to a fair measure of page load we can get. We have pointed out in the past as well that page speed is crucial for a site’s performance, and Google agrees.

An example of LCP

You want your visitors to catch something interesting as soon as they enter your website, as this more likely will keep them there for a longer period of time, right? This is why it’s common to place your most interesting piece of content above the fold, meaning at the top half of your site. Well, imagine if your most important, eye-catching piece of content is the one that takes the most time to load? This can be a high-res image or video for example. Imagine if your website visitor has to wait for several seconds before they see any content on your site, do you think they will wait around? Most likely not, unfortunately, and this is exactly what Google wants to prevent from happening. They want people to stay on a website, instead of quickly bouncing off to the next place. This is exactly what LCP measures, how long it takes for your largest piece of content to load above the fold. Imagine if it’s your eye-catcher at the top of your page that turns out to be the last thing that loads, this is, sadly, the case very often.

Target LCP score

For your LCP to meet the ideal criteria of Core Web Vitals ranking, your LCP should occur within 2.5 seconds of when the page starts loading. This means that the time it takes for your final element at the top of your page to load is your LCP score. In order to become Core Web Vitals compliant your site should hit the recommended target of 75% for each metric. This means that a site should have an LCP score of 2.5 or less for 75% of their page loads in order to get a good ranking. This can be very challenging for large sites with lots of content, media, and features, but there are several things you can do to improve your LCP.

How to improve LCP?

  • Remove and optimize large content = remove images, videos, and other elements that slow down your page load. If you can’t remove them completely, make sure to optimize, minimize and pack them so that they impact your site speed as little as possible.
  • Optimize text files = if you have a lot of text on your site, compress the text file (HTML, CSS, JS) so that it will move between the browser and server quicker and improve your LCP score.
  • Remove third-party scripts = remove all unnecessary third-party scripts you have on your site as these can slow down your site more than you think. We understand that you need Google Analytics and social share buttons on your site but go through all of your third-party scripts with a critical eye to determine which ones you really, really need. An embedded YouTube video might be cool, but not if it results in you ending up on the 5th page on Google’s search results pages.
  • Remove plugins = Yes, we refer to all those extra “must-have” plugins you thought were doing magic to your site. Hate to break it to you but they are not doing you any favors. Remove every single one that you don’t necessarily need for your site to work as it should, as these slow down your site tremendously.
  • Minify the JS and CSS code = make your site smaller and faster by using a minifier for your JS and CSS code, this can make a huge difference for your LCP.
  • Implement lazy load = instead of downloading the entire page content in a single go, lazy load only loads the content when the site is being scrolled. When using lazy loading a placeholder is usually inserted until the real content loads, which can confuse search engines. Avoid any crawling misinterpretation by providing links to the lazy-loaded content. This way your site will remain fast and the search engines will read your content correctly.
  • Use a CDN = by using a Content Delivery Network you fasten the content delivery drastically as your content will load from the closest geographical location. CDNs can also store files such as media, CSS, and JS, making your page load a lot faster.  
  • Optimize your server = your website browser receives the content from your server, so a fast server response will result in a faster page load and therefore a faster LCP. By optimizing your server you will improve the time it takes for your browser to load the data.
  • Change your web host = sometimes it’s as simple as changing to another provider. You may have been stuck with your current provider for ages since it was the best option back in the days when the site was created. This does not necessarily mean that there are not better alternatives available.

Where to pull the report?

Now that we’ve gone through the different components that Core Web Vitals Consist of, you may wonder, how will I know my current score? A very valid question at this point. Google has made it very easy for you to track your site’s ranking, they really want you to improve your site’s performance so why should they keep the report a secret. There are several ways where you can find out your ranking but the absolute simplest way is to open your Google Search Console (if you don’t have an account, make one right now) and pull open the Core Web Vitals report. This was formerly named Speed Test if you are confused about why it’s gone. You will get a full report on your status both for mobile and desktop, the rest is up to you to fix. Below you can have a look at a few snapshots from the Google Search Console Core Web Vitals Report.

Screenshot from Core Web Vitals Report
Snapshot from Google Search Console Core Web Vitals Report
Snapshot from Core Web Vitals Report - LCP
Snapshot from Core Web Vitals Report – LCP

Conclusion

Key takeouts when it comes to the Core Web Vitals Metric LCP is that it measures page load, more specifically it measures how fast your final element appears on your website. If it takes more than 2.5 seconds to load, you need to take a look at the section regarding how to improve your LCP score. Some pages might have heavier elements, and Google does not by any means, believe it or not, want to make life complicated for you, so they have agreed that a 75% score across page views is good enough for you to appear on their search results.

Next week we will go deeper into the second metric of Core Web Vitals called First Input Delay, or FID, a metric that measures interactivity on your site. If you have any questions regarding Core Web Vitals, please don’t hesitate to drop us a line at sales@kiosked.com and our team will be happy to answer your questions.