[Resolved] Reduce Rendered Size of the Feature Image on Mobile (Improving LCP)

[Charbel]

Hello @David,

Sorry, I have updated to use this code instead. Because I want to resize the height (shrink it) for desktop only and not on mobile. I put max-height instead of min-height because min-height was not resizing the featured image for Desktop.

Well max-height will also resize for mobile devices, but won’t go out of the screen size as with height only.

.featured-image.grid-container {
    max-width: 1168px;
}
.featured-image.grid-container img {
    width: 100%;
    max-height: 550px;	
}

Thank You!

[Elvin]

Hi Charbel,

You need to set a media rule for it so it only applies on desktop.

Example #1: Applying the style on tablets and desktop.

@media (min-width:769px){
.featured-image.grid-container {
max-width: 1168px;
}
.featured-image.grid-container img {
width: 100%;
max-height: 550px;
}
}

Example #2: applying on desktop only.

@media (min-width:1025px){
.featured-image.grid-container {
    max-width: 1168px;
}
.featured-image.grid-container img {
    width: 100%;
    max-height: 550px;	
}
}

[Charbel]

Many Thanks, @Elvin, much appreciated!

It works as expected. I picked Example #1: Applying the style on tablets and desktops.

I have a question please in regards to Deffer offscreen images for my Widgets.
This is only showing for Mobile on Google PSI here: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fcharbelnemnom.com%2Fenable-azure-backup-on-vms-using-azure-policy%2F&tab=mobile

I am using a Custom HTML Widget for my Right Sidebar.
In the Content section, I display the image and the needed text with HTML as follows:

<center><a target="_blank" href="https://go.altaro.com/holiday-contest/?LP=charbel-sc-Article-holidayseason2020-EN&Cat=SC&utm_source=charbel&utm_medium=sc&utm_campaign=holidayseason2020&utm_content=banner" rel="nofollow noopener noreferrer"><img src="https://charbelnemnom.com/wp-content/uploads/2020/12/Altaro_HolidaySeason_2020_250x250.jpg" title="ALTARO Hyper-V & VMware Backup!" alt="ALTARO" class="aligncenter" width="250" height="250"></a></center>

Based on my research, I found that I need to set the dimensions for the images and upload them via the WordPress media library.
I have already set the dimensions in the HTML code above and the images are uploaded via the WordPress media library.

Could you please help on resolving my Widgets images? I have around 8 of them.

Many Thanks, @Elvin!

[Elvin]

That Defer offscreen images is basically PSI asking you to lazy load images that are not above the fold (not immediately visible).

You’ll need a optimization plugin to apply lazy load to those custom images you’ve added. And knowing this is a custom added img, you may have to do some extra step like manually adding the required attribute for lazy load on them (depending on plugin).

[Charbel]

Thank you @Elvin,

I am already using Ezoic Leap (Lazy Loading) capabilities as shown in the screenshot below, but still not working.
I don’t need to have another plugin for it.

According to the dev team at Ezoic, they said you need to set the dimensions for the images and upload them via the WordPress media library. Then Ezoic Leap (Lazy Loading) will handle the rest.

I am not sure what dimensions I want to set for those images in the Widgets?
Could you please point me in the right direction?

Many Thanks!

[Elvin]

According to the dev team at Ezoic, they said you need to set the dimensions for the images and upload them via the WordPress media library. Then Ezoic Leap (Lazy Loading) will handle the rest.

I see you’ve already added the dimensions which are width="250" height="250" so lazyloading should be working if what they’ve said is 100% correct. (assuming ezoic also lazy loads manually added img elements. you’ll have to ask them about this if you’ve yet to.)

I am not sure what dimensions I want to set for those images in the Widgets?

It’s really up to you. These dimensions are basically the image’s display size.

I’d suggest putting the smallest value possible w/o affecting how you want the images laid out to improve on CLS. 😀

[Charbel]

Thank You @Elvin,

I have managed to resolve the Defer offscreen images on mobiles.

I have reduced the dimensions as you suggested to 200 instead of 250 and Google PSI is happy 😀.

Many Thanks!

[Charbel]

Hello @David and @Elvin,

On mobile, Google PSI is reporting to Eliminate render-blocking resources for GP:

/themes/generatepress/assets/css/main.min.css?ff=2&wps=true
/plugins/gp-premium/blog/functions/css/style.min.css?ff=2&wps=true

Could you please advise how to resolve this issue?

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fcharbelnemnom.com%2Fenable-azure-backup-on-vms-using-azure-policy%2F

I am trying to optimize speed as much as possible.

Thank You!

[David]

Hi there,

i just ran that PSI test and there was no render blocking opportunities reported.
Even if those files mentioned were render blocking, then deferring them without introducing critical CSS would result in CLS issues.

I still see the main issue of your sites performance on Google PSI is the scripts being loaded.
You really should address the Javascript/3rd Party code issues – as making tiny improvements to CSS loading will not make any difference whilst PSI is complaining about those scripts.

[Charbel]

Thank you @David,

I just ran PSI again and it’s showing from my side as shown below. These opportunities are not showing always when you run PSI.

Yes, there are other opportunities as well as you noted (the Javascript/3rd Party code issues), I am working on them one by one.

So you don’t recommend deferring that CSS as they cause CLS issues?

Thank You!

[David]

Unless you can write the Critical CSS then NO i would not defer them as they will generate CLS.

[Charbel]

Thank you @David,

Could you please advise how to remove the Maximum DOM Depth on the Desktop for the Author’s name at the beginning of the post/article?

<span class="author-name" itemprop="name">

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fcharbelnemnom.com%2Fhow-to-use-watchlist-in-azure-sentinel%2F&tab=desktop

For the Maximum Child Elements, you explained to me last time how to avoid this by dividing the post into multiple pages.

Thank You!

[David]

You don’t remove it and you don’t need to remove it.
Its simply showing you what the deepest depth element is. It just happens to be the author-name element.
In Googles eyes, Max DOM Depth becomes an issue if it is greater than 32. Yours is only 13 … so its perfectly fine.

[Charbel]

Thank you @David for the confirmation!

[David]

You’re welcome

[Author]

Posts