[Support request] Too high LCP on mobile devices?

[Kathrin]

I will do that and have already contacted short pixel.

Will be the lazy loading for the featured image a big problem for performance?

I did some research and found that:

The first featured image in arcive pages should be excluded from lazy-load:
function skip_lazy_class_first_featured_image($attr) {
global $wp_query;
if ( (!is_single() && 0 == $wp_query->current_post) || is_single() ) {
$attr[‘class’] .= ‘ skip-lazy’;
}
return $attr;
}
add_filter(‘wp_get_attachment_image_attributes’, ‘skip_lazy_class_first_featured_image’ );

and that code for adding a description:

add_action( ‘post_thumbnail_html’, ‘db_auto_single_featured_description’, 10 );
function db_auto_single_featured_description( $html ) {
$get_description = get_post(get_post_thumbnail_id())->post_content;
if ( is_single() && !empty($get_description) ){
$html .= ‘

‘. $get_description . ‘

‘;
}
return $html;
}

When I look into Chrome Developer Tools –> Elements, I can see a class=”featured-image page-header-image-single ” but no class skip-lazy. Could it be that I want to exclude a class that doesn’t exist? How I should address the featured-image page-header-image-single / skip_lazy_class_first_featured_image?

Greetings Kathrin

[Elvin]

Will be the lazy loading for the featured image a big problem for performance?

It is if your featured image’s file size is too large. If it’s fairly small then it’s not really a big deal.

But then again, you’ll be torn between lazy loading the image and having LCP vs. not lazy loading the image and get flagged by something else.

I believe the best of both worlds would be to make sure your the images you upload are compressed before you upload them. And always exclude images above the fold from lazyloading.

When I look into Chrome Developer Tools –> Elements, I can see a class=”featured-image page-header-image-single ” but no class skip-lazy. Could it be that I want to exclude a class that doesn’t exist? How I should address the featured-image page-header-image-single / skip_lazy_class_first_featured_image?

It’s likely the PHP snippet you’ve using. It’s likely has issues w/ the condition.

Try the one David suggested here –
https://generatepress.com/forums/topic/add-a-class-to-the-featured-image-of-all-the-single-posts-on-my-site/#post-1816115

[Kathrin]

Dear Elvin,

I think I don’t understand what you mean…

The Code David has provided me when setting up the theme was:
The first featured image in arcive pages should be excluded from lazy-load:
function skip_lazy_class_first_featured_image($attr) {
global $wp_query;
if ( (!is_single() && 0 == $wp_query->current_post) || is_single() ) {
$attr[‘class’] .= ‘ skip-lazy’;
}
return $attr;
}
add_filter(‘wp_get_attachment_image_attributes’, ‘skip_lazy_class_first_featured_image’ );

The code above should ensure that the featured image in a blog post and also the first image in an archive page isn’t lazy loaded. I always thought that that code creates the class skip lazy because in WP Rocket it was enough to mention skip-lazy for excluding that images from lazy load and it worked. But it doesn’t in ShortPixel.

What is that code doing? Why should I add something to the featured image of the latest post? It should work for every featured image on the site. And beside that could I use that code as it is?

// Add first-featured-image ( or any class ) to featured image of latest post
function skip_lazy_class_first_featured_image($attr) {
global $wp_query;
if ( 0 == $wp_query->current_post ) {
$attr[‘class’] .= ‘ first-featured-image’;
}
return $attr;
}
add_filter(‘wp_get_attachment_image_attributes’, ‘skip_lazy_class_first_featured_image’ );

Would it be possible to just exclude that: featured-image page-header-image-single? –> That doesn’t work…

I have found this post: https://generatepress.com/forums/topic/excluding-featured-image-for-shortpixel-adaptive-images/ –> the user had the same problem than I – excluding the featured image from Short Pixel Adaptive Images

David shared this code and it worked:

function db_add_class_to_single_featured_image($attr) {
remove_filter(‘wp_get_attachment_image_attributes’,’db_add_class_to_single_featured_image’);
if ( is_single() ) {
$attr[‘class’] .= ‘ no-lazy’;
}
return $attr;
}
add_filter(‘wp_get_attachment_image_attributes’,’db_add_class_to_single_featured_image’);

Can I use that code or must there be changed something? Works that code for the featured image in blogposts and archive pages?

Greetings Kathrin

[Elvin]

I always thought that that code creates the class skip lazy because in WP Rocket it was enough to mention skip-lazy for excluding that images from lazy load and it worked. But it doesn’t in ShortPixel.

That’s actually it. The code as it is, only adds skip-lazy class. Nothing else.

The rest is up to the user adding the class skip-lazy to the lazy load plugin exclusion list.

Can I use that code or must there be changed something? Works that code for the featured image in blogposts and archive pages?

This code is similar as the other one but instead of skip-lazy, it ads no-lazy. The main difference is the first code adds “skip-lazy” and it only applies the class on the first instance of the post-image in archive pages.

Meanwhile, this no-lazy script only applies the class on a single post page. It won’t do anything on archive pages.

ShortPixel’s script probably checks if the img has no-lazy and skips it while some other plugins require you to manually type in a class on their UI.

You can actually just keep this no-lazy script if your only concern is the single post page.

[Kathrin]

It was my fault – I didn’t set a don’t infront of the class I wanted to have excluded in Short Pixel Adaptive Images. Now it works 🙂 Thank you very much for your patience!

Greetings Kathrin

[Kathrin]

AAAAARRRGGG, its me again. Short Pixel is now working but excluding the featured from lazy loading results in the effect that the image is compressed but not resized. It takes the 1200x800px image. So I tried out your code again and created a 300px image and 900px image but it’s always the same… the browser takes the 1200x800px – why?

I have regenerated the thumbnails for that post: https://www.topfgartenwelt.com/cremiges-apfeleis

Greetings Kathrin

[Elvin]

Can you try clearing ShortPixel’s cache? And then check if the srcset for the featured image changes.

As it is, shortpixel seems to be serving the same image size on all the srcsets.

If clearing cache doesn’t fix the srcset, you may have to consider asking ShortPixel’s support why it uses the same image size for all the srcset images.

[Kathrin]

Hi, flushing the cache doesn’t help….

If clearing cache doesn’t fix the srcset, you may have to consider asking ShortPixel’s support why it uses the same image size for all the srcset images.

–> What do you mean here? Doesn’t Short Pixel never resizes the images even when they are lazy loaded?

The resizing should only be a problem when the image is excluded from lazy loading…

Greetings Kathrin

[David]

First make sure you update your $sizes attribute:

https://generatepress.com/forums/topic/too-high-lcp-on-mobile-devices/page/2/#post-2105087

It looks like you have:

$sizes = '(max-width: 420px) 300px, (min-width: 421px) 800px, 100vw';

And it should be:

$sizes = '(max-width: 420px) 300px, (min-width: 421px) 900px, 100vw';

BUT … as i mentioned here:
https://generatepress.com/forums/topic/too-high-lcp-on-mobile-devices/page/2/#post-2105671

The browser chooses the image – in theory with the change to the above $sizes a 3x DPR device SHOULD select the 900px imafge. If thats not the case then its most likely what Short Pixel is doing when it swaps out the image.

[Kathrin]

Thank you David, but nothing works 🙁

Is it a big problem if the images aren’t properly resized? With Short Pixel the LCP is low and everything else is ok…

Greetings Kathrin

[David]

If the images look good and the CWV are good then i would ignore the Properly Size Images diagnostic.

[Kathrin]

For the moment the WCV are ok, but I’m afraid about the LCP on mobile devices…

Greetings Kathrin

[David]

I tested several of your posts and they were all returning good LCP values, way below the 2.5s benchmark.

[Kathrin]

Dear David,

I have found something in my theme customizer –> additional CSS

@media (min-width: 768px) {
#primary {
border-right: 1px solid #222;
}
}
.site-header {
background-color: rgb(158, 194, 42);
}

.inside-header {height: 250px; flex-shrink: 0;}
.entry-meta {
font-size: 85%;
margin-top: 15px;
margin-bottom: 15px;
line-height: 1.5;
}
.rank-math-breadcrumb, .rank-math-breadcrumb a {
font-size: 10px;
margin-bottom: 40px;
}
.featured-image .wp-caption {
line-height: 2em;
font-size: 0.8em;
text-align: left;
}

@media (min-width: 768px) {.main-title {
font-size: 75px;
margin-bottom: 30px;
text-shadow: 0 0 5px whitesmoke;}
.site-description {
color: rgb(255, 255, 255);
font-weight: 400;
font-size: 25px;
margin: 0px;
}
h1.entry-title {font-size: 50px;}}

@media (max-width: 768px) {.main-title {
font-size: 35px;
margin-bottom: 15px;
text-shadow: 0 0 5px whitesmoke;}
.site-description {
color: rgb(255, 255, 255);
font-weight: 400;
font-size: 15px;
}
h1.entry-title {font-size: 30px;}}
.lsi-social-icons li a {
transition: none !important;
}

But in the Code Snippet Tool we have added the following code:

function db_modify_srcset_sizes($sizes, $size) {
$sizes = ‘(max-width: 420px) 300px, (min-width: 421px) 900px, 100vw’;
return $sizes;
}
add_filter(‘wp_calculate_image_sizes’, ‘db_modify_srcset_sizes’, 10 , 2);

Would it be possible to add to the customizer –> additional css a bit of code that forces the theme to use a images as featured image when it is displayed on a mobile device? In the way that there is big featured image for desktop and a small one for mobile?

In the way @media (max-width: 768px) {.featured-image img {(min width 300px; max width 900 px) 50vw}

Or is there a way to set something under Customizer –> Layout –> Blog –> Featured Image

At the moment I have here the full size of the image (I think this is the problem why only the fullsize image is displayed). Would it be possible to set here something that there is a difference between mobile and desktop?

Or would it be a solution that the grid-container for the featured image on mobiles gets a different size, for example like that:
.featured-image.grid-container {
max-width: 768px;
}
.featured-image.grid-container img {
width: 100%;
}

Long story short – how can I customize the theme (and just the theme) to use a smaller featured image on mobiles? 🙂

@media (max-width: 768px) {
.resize-featured-image .post-image img {
width: auto;
height: auto;
}
}

???

Greetings Kathrin

[David]

No you cannot use CSS to tell the browser to load a different size src-set image. You can only use CSS to resize an image, and in doing so src-set will not work and the browser will load the largest image.

The code i provided here is what tells the browser the sizes you would like it to use..

I showed you that the above code was working here ie. it loaded a 300px image when the DPR was set to 1.0.

And i mentioned here on #3 that some plugins change the HTML or redirect the image request, which can means the browser is not given a different image to load. This includes shortpixel.

Until WordPress adds support for the HTML Picture element there is nothing more we can do with the Theme. And if you add plugins like shortpixel to server different sized images then that too is going to interfere with what we can do.

[Author]

Posts