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). 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.

Insight Info

Share this post:
Facebook
Twitter
LinkedIn

Comments

Leave a Reply

Your email address will not be published.

SAVE YOURSELF £££

We will beat written quotations by 20% guaranteed.

Terms & Conditions Apply

Make An Enquiry // Lets Talk

    Website Design Services
    Marketing Services
    IT Services
    SEO Services
    Other

    We do not & will not share your information with any third parties.

      Website Design Services
      Marketing Services
      IT Services
      SEO Services
      Other

      We do not & will not share your information with any third parties.
      Wait, there's more!
      We regularly release insights for a large number of topics including WordPress, Website Design, Hosting and more.
      Get notified and stay up-to-date with our insights.
      Initial Site Review + Setup Basic Advanced Premium
      Initial Setup
      Website Analysis
      Backlink Audit
      Google My Business, Analytics & Search Console
      Keyword Research Analysis
      Competitor Research Audit Report
      Keyword Research Consultation
      Homepage Content Audit Report
      Internal Page Content Audit Report
      Location
      Local
      National
      International
      On-Page Optimisation
      Homepage Meta Data Optimised
      Internal Page Meta Data Optimised 10 per Month 20 - 40 per Month 60+ per Month
      Fix 404 Errors 5 per Month 10 per Month 20+ per Month
      Canonical Redirect
      Robots.txt
      Sitemap Creation/Optimisation
      Homepage Schema Markup
      Page Speed Analysis (WordPress Sites Only)
      Image Compression (WordPress Sites Only)
      Off-Page Optimisation
      Monthly Article Writing for Link Building 1 per Month 4 per Month 8 per Month
      Monthly Link Building
      Local Business Directory Links
      Document Sharing Links
      Video Sharing Links
      Social Profile Links
      Link Outreach 3-6 Hours/Month 9+ Hours/Month
      Reporting
      Keyword Rank Reporting Up to 6 Keywords Up to 20 Keywords Up to 50 Keywords
      Google Analytics Reports
      Manual Website Review After 6 Months After 3 Months After 1 Month
      Website Health Checks
      New Keywords Added
      SEO In Depth Advisories
      Support
      Customer Telephone Support
      Customer Ticket Support
      Dedicated Account Manager
      Initial Site Review + Setup Basic Advanced Premium
      Initial Setup
      Website Analysis
      Backlink Audit
      Google My Business, Analytics & Search Console
      Keyword Research Analysis
      Competitor Research Audit Report
      Keyword Research Consultation
      Homepage Content Audit Report
      Internal Page Content Audit Report
      Location
      Local
      National
      International
      On-Page Optimisation
      Homepage Meta Data Optimised
      Internal Page Meta Data Optimised 10 per Month 20 - 40 per Month 60+ per Month
      Fix 404 Errors 5 per Month 10 per Month 20+ per Month
      Canonical Redirect
      Robots.txt
      Sitemap Creation/Optimisation
      Homepage Schema Markup
      Page Speed Analysis (WordPress Sites Only)
      Image Compression (WordPress Sites Only)
      Off-Page Optimisation
      Monthly Article Writing for Link Building 1 per Month 4 per Month 8 per Month
      Monthly Link Building
      Local Business Directory Links
      Document Sharing Links
      Video Sharing Links
      Social Profile Links
      Link Outreach 3-6 Hours/Month 9+ Hours/Month
      Reporting
      Keyword Rank Reporting Up to 6 Keywords Up to 20 Keywords Up to 50 Keywords
      Google Analytics Reports
      Manual Website Review After 6 Months After 3 Months After 1 Month
      Website Health Checks
      New Keywords Added
      SEO In Depth Advisories
      Support
      Customer Telephone Support
      Customer Ticket Support
      Dedicated Account Manager