Largest Contentful Paint image was lazily loaded

 

LCP Blogger

Largest Contentful Paint increased dramatically when using LazyLoad


One of my websites has a really bad LCP, 4.6. I realized that without active lazyload my images, the LCP is 2.0 . The TCB increased by using lazyload, too. So Im thinking it must be my bad JS-Skills, so could give me anyone of you a hint?

Why does my Largest Contentful Paint (LCP) time improve after removing lazy load?

This tends to be an implementation issue.

LCP measures when the largest paint appears on the page. If you use lazy loading and the images are visible "above the fold" (without scrolling) and they are the largest paint on the page then they will be reported as LCP. This can also be the case if just the top of an image is showing.

Now if you are lazy loading them and your JavaScript is loaded late in the page load order it means that the images will get downloaded later, increasing your LCP time.

Steps to fix

  1. Don't lazy load images that appear "above the fold" just use a standard <img> or <picture> element.

  2. That's it! Lazy load everything that is out of view when the page loads as the performance gains are worth it (as well as improving bandwidth usage etc.).

Why is my Total Blocking Time (TBT) affected?

TBT is looking for a "quiet time" on the CPU to determine when the main work on the page is done.

What the test also does is scroll the page to the bottom.

Because of this your function is probably being called multiple times in quick succession and bottle-necking the CPU (bearing in mind that the CPU has a 4x slowdown applied for mobile scoring to simulate a real world mobile device with less powerful CPU.)

Probable causes / possible solutions

Because you have the event listener set to fire on 'scroll' it is being fired multiple times and I assume you have multiple images on the page.

One thing you could do is to change your actual function so it isn't having to do as many loops each time.

i.e. once you have set your image src or background style, remove that item from your lazyImages list. This reduces the amount of items that need checking when the page is scrolled and will result in better performance.

Also just check how often slick slider causes your function to be called as that could be causing performance issues also.

The above may not fix your TBT but is good practice anyway.

How does lazy loading the LCP image affect page performance?

Lazy loading images is the process of delaying the loading of images until they are needed.

This means images will not load until they are scrolled to (i.e., viewable in the browser viewport), which helps the browser prioritize other resources that are more important.

If however, lazy loading is applied to above-the-fold content (like the LCP image), the browser may defer the LCP image in favors of other resources.

As the LCP image is not immediately downloaded, it may slow down your LCP timing and make your page appear visually incomplete to the user for a longer period of time.

Optimize Largest Contentful Paint


There are a number of factors that can affect how quickly the browser is able to load and render a web page, and blockage or delays across any of them can have a significant impact on LCP.

It's rare that a quick fix to a single part of a page will result in a meaningful improvement to LCP. To improve LCP you have to look at the entire loading process and make sure every step along the way is optimized.

Optimizing for LCP is a complex task, and with complex tasks it's generally better to break them down into smaller, more manageable tasks and address each separately. This guide will present a methodology for how to break down LCP into its most critical sub-parts and then present specific recommendations and best practices for how to optimize each part.

How To Reduce & Improve Your Largest Contentful Paint (LCP) Timing


LCP or Largest Contentful Paint, is a core web vitals metric that represents the time needed for the biggest part of the webpage (an image, video, etc.) to appear in the visitor’s browser. It’s one of the most important factors when it comes to your site’s speed because it’s when the visitor perceives the page as loaded.

largest contentful paint image was lazily loaded wordpress

Having a slow server response time negatively impacts all your loading speed metrics and is, therefore, a definitive cause of poor LCP.

largest contentful paint wordpress fix

What is a good LCP score? # To provide a good user experience, sites should strive to have Largest Contentful Paint of 2.5 seconds or less. To ensure you're hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

find largest contentful paint

LCP is a new metric from Google that is scheduled to start working in May 2021. It is crucial to improve Largest Contentful Paint (LCP) if you want your site not to drop in search results and improve its SEO.

largest contentful paint how to improve

The First Contentful Paint time stamp is when the browser first rendered any text, image (including background images), non-white canvas or SVG. This excludes any content of iframes, but includes text with pending webfonts. This is the first time users could start consuming page content.

lighthouse error failed to find the largest contentful paint

The first-contentful paint (FCP) indicates how much time has elapsed in milliseconds until the first content-rich (DOM) element is shown on the web page. The FCP is a user centerd way to measure the speed of a webpage. The lower the FCP, the faster the perceived load speed.

largest contentful paint image size

Largest Contentful Paint (LCP) is a performance metric introduced in 2020 by Lighthouse to better measure the perceived loading experience for users. In the simplest terms, LCP measures how long it takes for the largest "content element" (e.g., hero image, heading text, etc.)

nextjs image largest contentful paint

If you couldn't solve the “lcp issue: longer than 2.5s” issue, you can switch your header background from an image to a simple CSS background color(gradient-color) or an animated CSS background. This can remove more than 2 seconds in some cases from LCP loading time. It can also reduce the CLS.

ignoring unsupported entrytypes largest contentful

LCP measures the time taken by the server to display the largest visible element in the portview. Ideally, LCP should be less than 2.5 seconds, but if you are seeing an LCP issue in your Search Console it means the server is taking too long to render the element.
Next Post Previous Post
No Comment
Add Comment
comment url