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). A high LCP (long duration) can also result in a higher bounce rate, and less conversions; in turn this usually means less revenue for the business that owns the website.

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 built 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 causes Poor LCP?

There are many factors that can affect 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 negatively affected. 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 such high quality imagery can take more time to load as higher quality usually means bigger file size and longer downloads. All resources and media should be optimized as much as possible to allow for faster loading speeds.

Render-blocking JavaScript & CSS –

JavaScript and CSS being loaded on a website is essential in most modern websites, but when there are big payloads of these assets e.g. too much JavaScript or CSS that is unused, this will make your website take longer to load for the end user, especially on mobile devices. Sticking to less plugins, and minimizing on the CSS and JavaScript can improve LCP.

How to Improve LCP?

Optimize Media –

Images can be optimized in a few different ways. Image dimensions should be considered when added 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 can help to improve the load times. In some cases you can move your CSS to the footer and inline any critical CSS in order to avoid layout shifts or render flashes, this will cause there to be less CSS that is render blocking but also doesn’t affect UX negatively.

Optimize JavaScript –

JavaScript can be optimized in a few ways to aid with LCP speeds. Removing any unnecessary or unused code is a good way to start. Checking the code to ensure it matches current standards and meets performance benchmarks, badly written code can run more slowly than well written code. Code that is written efficiently will run smoother. Deliver all JavaScript in one file to reduce HTTP requests.

What can we do for your LCP?

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