CODEWITHSUNDEEP
pagespeed-insights
Walter
Walter

Reputation: 21

PageSpeed Insights LCP with picture tag

We use PageSpeed Insights to measure the performance of our website (drupal 7 and picture module for lazy loading). In the mobile results we got the message, that the LCP (largest contentful paint) was too high (4.5 s) and the following code is shown.

<img class=" lazyloaded" data-src="https://www.interelectronix.com/sites/default/files/styles/view_einspaltig_abfallend/public/image_contenttype/impactinator_glas_ik10_4.jpg?itok=YxPF9YZf&amp;timestamp=1559550873" alt="ABNT NBR IEC 62262 " title="" src="https://www.interelectronix.com/sites/default/files/styles/view_einspaltig_abfallend/public/image_contenttype/impactinator_glas_ik10_4.jpg?itok=YxPF9YZf&amp;timestamp=1559550873">

If we have a look in the Chrome developer tools, we see in the network tab, that not the image in the code (https://www.interelectronix.com/sites/default/files/styles/view_einspaltig_abfallend/public/image_contenttype/impactinator_glas_ik10_4.jpg) was delivered (the image in the code has about 110 KB file size), but a image with a lower resolution (which has about 47 KB file size). Now we change the delivered image with an image (47 KB) with an image of 14 KB file size. But the PageSpeed Insights values don't change. It's always the same 4.5 s.

Use PageSpeed Insights the image in the code for calculating the value? Or what can we do to get a faster time result?

Upvotes: 1

Views: 2932

Answers (1)

GrahamTheDev
GrahamTheDev

Reputation: 24835

LCP is about when the largest item on the page is painted, it has nothing to do with the size of that item in kb (other than a smaller element will load faster).

What you want is for the "above the fold" content (content visible without scrolling) to be fully painted in less than 2.5 seconds, ideally 1.5 seconds.

To achieve this you need to make sure all of your CSS that is for "above the fold" is inlined within your HTML. (known as "inlining critical CSS").

Doing this will also fix "Eliminate Render Blocking Resources" as everything needed to render the page will be loaded with the first request. Finally this will also help with Cumulative Layout Shift as things won't "bounce" around the page as CSS styles are loaded.

For images above the fold you do not want them to be lazy loaded, instead you want them to load normally as they need to render as fast as possible. You also may want to ensure that the background image you use for the logo has the relevant CSS inlined as well as otherwise that will load in late. (better yet convert the logo to an inline SVG to save an unneeded request and page weight).

Finally I noticed you use a video background, it is unlikely you will get top scores as this uses a lot of bandwidth. I would suggest replacing your video background with a static image on a mobile to save the massive overhead associated with a video background.

By all means move the video further down the page and lazy load it in, but perhaps allow users to start the video manually.

Allowing a user to decide whether to play a video helps both with people who have low data allowances and also with people who have ADHD, autism etc. who may find a moving image distracting.

Anyway I have gone off tangent a bit. To fix a late LCP make sure that all above the fold assets have priority and are as light weight as possible basically.

You may find this article explaining LCP useful, as well as this article on how to optimise LCP for understanding what you need to look at.

Upvotes: 3

Related Questions