LCP? What is Largest Contentful Paint?

Written by

Osian Jones

Osian Jones

The Author:

Osian Jones

Osian Jones

Osian is a Full-Stack Developer at The Website Marketing Group who really loves getting his hands dirty with JavaScript & CSS. He's the UX guru around here.

What is LCP?

LCP means Largest Contentful Paint. It’s the measure of time taken for the page to load, and become readable to the user.

Users do not want to wait long amounts of time for a website to load. When you visit a website you like it to be instant, and responsive. LCP is important for user experience (UX). This can also result in a higher bounce rate, and less conversions.

LCP is becoming an important factor for Search Engine Result Pages (SERP) and the ranking position of the website.

How to find your LCP?

There are tools online, and build into browsers that can help you find out a lot of information about your page speeds, including the LCP.

A good online tool is PageSpeed Insights from google, and it uses the same ‘Lighthouse’ tool that is built into browsers such as Chrome. To access this in a browser, press F12 on the keyboard and go to the Lighthouse tab, then generate a report.

Lighthouse will test the current page, and give details about the Performance of the page, and more. The LCP will be one of the first metrics it will show.

This is a lighthouse test run on Amazon.co.uk:

What cause Poor LCP?

There are many factors that can affect the LCP; Slow server response time, Slow resource load times, render-blocking JavaScript & CSS.

Slow Server Response Time –

When the server is slow, all the speed metrics will be affected negatively. This will result in slower loading of all website content, causing LCP to increase dramatically. Slow Server Response Time can be caused by problems in the bank-end infrastructure, unoptimized databases, etc.

Slow Resource Load Times –

Large resources or high quality media can take more time to load. All resources and media should be optimized as much as possible to allow for faster loading speeds.

Render-blocking JavaScript & CSS –

Using much JavaScript and CSS in a site is nice to customize and make the site prettier, but this is a factor that will also make you website load slower. Sticking to less plugins, and minimizing on the CSS and JavaScript can improve LCP.

How to Improve LCP?

Optimize Images –

Images can be optimized in a few different ways. Image dimensions should be considered when adding it to the site. The images do not need to be larger dimensions than will be displayed on the site. You can compress an image, lowering its quality and file size. The image format can also be converted to a more efficient file format(JPEG, PNG, SVG). Videos load faster than GIFs, so replacing any GIFs with videos can also be of benefit.

Optimize CSS –

CSS files need to be loaded and processed before the page can be rendered. Therefore they are render-blocking. Removing unused code, minimizing css files, and optimizing CSS with media queries can help to improve the load times.

Optimize JavaScript –

JavaScript can be optimized in a few ways to aid with LCP speeds. Removing unused code. Removing any unnecessary code or features. Checking the code is updated to match current standards. Code that is written efficiently will run smoother. Using code splitting, and splitting code into separate files with only required code running on load will do well in reducing JavaScript load times.

What can we do for your LCP?

We offer SEO services to optimize your site to increase load times, and improve your LCP, and Search Engine Ranking.

Insight Info

Share this post:
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Lets Talk.

Document

Enter as much detail as possible in the message box, this helps us get the quote prepared more quickly for you.

Enter as much detail as possible in the message box, this helps us get the quote prepared more quickly for you.​

Lets Talk.