- This topic has 70 replies, 3 voices, and was last updated 2 years, 7 months ago by
.
-
Posts
-
Hello @David and the Team,
Hope you are doing well.
Coming back to the LCP topic that we discussed previously here: https://generatepress.com/forums/topic/how-to-fix-largest-contentful-paint-element-for-page-hero/#post-1816101
After several troubleshooting sessions with Ezoic, we came to the conclusion that my Feature Images are not getting optimized with their Leap Accelerator tool (image optimization). Leap settings below:
The issue is most impacting Mobile visitors versus Desktop, you can see the report here:
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fcharbelnemnom.com%2Fmy-first-linkedin-learning-course-is-published-azure-storage-essential-training%2F&tab=mobileThe first step is, to reduce the Rendered Size of the Feature image on Mobile. I am following the Theme’s recommendation for GP using 700x400px. You can see the Feature Image looks big and out of the screen on Mobile devices.
Here are the specifics of the feature image:
I think the issue is that the image is classified as a regular div with HTML. See the HTML class here, it is not an img, or figure class but just div (page-hero grid-container grid-parent).
Thus, resizing images, lazy loading, etc are not being applied by Ezoic Leap. At least this is my current idea of the issue.
Your help is highly appreciated.
Please note that I am still using the previous PHP code that you shared with me here:
/** Remove the Featured Image background from the header element **/ // https://generatepress.com/forums/topic/how-to-fix-largest-contentful-paint-element-for-page-hero/page/2/#post-1819584 add_action( 'wp_head', function() { if( is_single() ) { $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium_large'); echo '<link rel="preload" as="image" href="'.$featured_img_url.'"/>'; echo '<style>.page-hero { background-image: url('.$featured_img_url .');}</style>'; } },0);Thank You!
-CharbelCustomer Support
Hi there,
unless Ezoic Leap optimizes CSS background images, then its not going to work. Most optimization plugins only work with
<img>elements. Check with Ezoic if this is the case.Thank you @David,
I will check with Ezoic about CSS background images optimization and get back to you.
However, I have seen one of your comments on another topic here: https://generatepress.com/forums/topic/image-optimization-on-mobile-lcp/#post-1682980
You noted that you can add a PHP Snippet to give the featured image a class offirst-featured-imagewhich you can use to exclude them.Does this help in my case?
Thank You!
The
first-featured-imageclass has to be added to a HTML<img>element.
Which you’re not using as the images are set as a background to a<div>element.Thank you @David,
Ah ok, so the
first-featured-imageclass does not work for me as long as I am using the feature image as a background to a<div>element.So what do you recommend to overcome this issue, please?
Why the Feature Image is out of the screen on Mobile devices and on a desktop is resizing appropriately?
I remember that we explored NOT using a Header Element and just displayed the Featured image as we discussed here, but that did not help.
https://generatepress.com/forums/topic/how-to-fix-largest-contentful-paint-element-for-page-hero/#post-1818548In between, I am waiting for Ezoic’s reply to see if we can optimize CSS background images.
Thank You, David!
I would recommend not using a Page Hero with background image.
Only worth using them when you’re overlaying content on them.
Or you will have the same issues you had previously with keeping them responsive.So:
1. remove the page hero from that page.
2. give the page a featured image.
3. Customizer > Layout > Blog –> Featured Images >>> Pages –> Location: Above Content.This will out the
<img>element which will be responsive and ‘optimizable’ by Ezoic.Thank you, David,
Could you please lay out more details on making this switch?
1. Remove the page hero from that page/post (single article). I have an Element in place created under the Elements section as follows. Shall I make this one as a draft or I keep it activated? The text for this Header Element is set to <!–This is a comment–> only.
2. I am already giving Feature images to all my articles. when I write an article, I am setting the feature image from the WordPress Editor page as shown below. I guess this point is completed from my side.
3. Customizer > Layout > Blog –> Featured Images >>> Pages –> Location: Above Content. I guess this one should be Posts and not Pages as shown below?
Will the design change after making this switch for the post? I like the current design.
Thank You, David!
1. you can save it as Draft for now.
2. The image will output in the same place. But it will be maximum width of the content container. But we can provide some CSS to correct that.Thank you @David, much appreciated!
Please note that I have made the switch and cleared the cache multiple times.
Could you please check it from your side and provide the custom CSS to correct the maximum width as it was before with page-hero?
Please advise if I want also to remove any of the existing Additional CSS code that I am currently using?
I believe we are in the right direction to optimize the Feature Images with Ezoic Leap.
P.S. I have seen that the feature image size on Mobile is fitting the screen now. So it’s rendered properly.
Many Thanks, David!
-CharbelLooks correct to me.
This CSS to force the images to be full width:.featured-image.grid-container { max-width: 100%; } .featured-image.grid-container img { width: 100%; }CSS for removal – if you’re not using the page hero anywhere in the site, then you can remove any CSS rules that include the
.page-heroselector.Thank you @David!
The CSS you provided to force the Feature Image to be full width does not look nice. It covers the entire screen on Desktops.
How can we replicate the Contained option size from the page-hero to the Feature Image, it was centered beautifully above the content.
I tried to play with the percentage as follows but still looks big. And on mobile looks very small.
/* CSS to force the images to be full width */ .featured-image.grid-container { max-width: 80%; } .featured-image.grid-container img { width: 90%; }And when you switch between different screen sizes (24″ to 27″), it becomes even bigger.
I remember you gave me the following
.page-heroCSS code to adjust the Feature Image (width and top-padding) on articles and not on the Home page. This is not needed anymore since we switched to<img>. I can remove it safely./* featured image for articles @media(min-width: 1600px) { body:not(.home):not(.author) .page-hero { padding-top: 23%; /* Currently hero is set to 28% */ } } */I cleared the cache for my side, so you could see the changes.
Additionally, I am seeing different LCP message as below after switching the Feature Image from page-hero on Google PSI:
<img width="700" height="390" src="https://charbelnemnom.com/wp-content/uploads/2021/06/LiL_Course_Azure_Stor…" class="attachment-full size-full" alt="LinkedIn Learning - Azure Storage Essential Training" loading="lazy" itemprop="image" srcset="https://charbelnemnom.com/wp-content/uploads/2021/06/LiL_Course_Azure_Stor…" sizes="(max-width: 700px) 100vw, 700px" data-attachment-id="21923" data-permalink="https://charbelnemnom.com/my-first-linkedin-learning-course-is-published-a…" data-orig-file="https://charbelnemnom.com/wp-content/uploads/2021/06/LiL_Course_Azure_Stor…" …>Please advise?
Thank You!
Lets go over the basics of the Page Hero vs the Featured Image.
1. The Page Hero.
This displays a<div>element and paints its background using CSS background-image -> the featured image.
To display the image, the<div>has to be given some height. The%padding is whats give its the height.
% padding allows for responsive resizing.
However when you have different size / aspect ratio images those %’s would have to change for each image or you end up with the issue you raised:Why the Feature Image is out of the screen on Mobile devices and on a desktop is resizing appropriately?
So unless all images have the same aspect ratio you’r going to have to write a lot of CSS to change each % padding for each different image size for Desktop and Mobile.
Further to this the background image doesn’t have src-set sizes and MOST image optimization plugins wont work with them.
2. The Featured Image
This displays the image using an HTML<img>element.
By default they are responsive. You will see 100% of the image at all screen sizes.
Theres no requirement to use CSS % padding ( or other properties to size them – in fact YOU don’t want to do that as it can cause performance issues ).
<img>elements use src-set sizing – which means the browser can select the image size thats best suited to the device its displayed on. And those can be optimized by ALL optimization plugins.As the main issues you’re having is performance – the Featured Image
<img>option is the best option.If you want to control its sizing then change the CSS to this:
.featured-image.grid-container { max-width: 1200px; } .featured-image.grid-container img { width: 100%; }Change the
max-width: 1200px;to match your container width or whatever size you want to limit it to.NOTE on LCP.
Google will always report an LCP Element – whether there is a slow of fast LCP timing. Now its an Image element as opposed to the page-hero div is a good thing. As now you can deploy whatever image optimization process you require.But i must say that we are going around in circles with the Improving LCP support topics.
I still see huge fluctuations on site performance from one test to another, which the Theme or the Featured image has no baring on. This is the last test i ran:
This is all down to Google not liking the amount of Javascript being served to the page.
Thank you @David for the great explanation.
Now I understood the difference between the Page Hero and the Featured Image.
I ended up using the following
max-widthto match my container width. That works great on both desktop/mobile. Thank You!.featured-image.grid-container { max-width: 1167px; } .featured-image.grid-container img { width: 100%; }When I made the switch to GP last year, I am using 700X400px for the Featured Image. Shall I continue with this size, or do you recommend changing it?
Now Ezoic Leap should work and optimize the Featured Image too.In regards to improving LCP support topics. Yes, I can see the fluctuations in site performance from one test to another here as well. But I have never seen that 19.4 sec you shared above.
Here is the current one which is good (Origin Summary and Lab Data).
The Desktop speed score is very good, but the mobile speed index does not look good. Is there anything else we can do on the Mobile side?
I’ll follow with Ezoic in regards to the amount of Javascript being served to the page.
Many Thanks, @David!
If you’re happy with the quality of the 700px featured image size, then yes ( they look ok to me ) – theres no need to change it. Adding larger size images ‘may’ increase quality but will increase their file size.
You need to address the JS issues with Ezoic. Mobile devices aren’t cut out for that high volume of scripts. Particularly lower end devices such as Moto 4G, which google PSI simulates with a Throttled CPU and Network. My opinion, Googles simulation just can’t deal with it. You may find the Lab tests that google perform can’t handle it, but real world Field Data it collects may give you much better results ( depending on your user base, their devices and their networks they are on ).
Thank You @David for the great information,
I asked the Ezoic speed team about JS issues, and here is what they said:
They said that the volume of scripts would not necessarily hurt LCP even though it is not good.
Yes, I am happy with the 700px featured image size. However, the Height sometimes is changed between 335px to max 400px. But the Width is always 700px.
I have a question in regards to the following message that sometimes is showing: Ensure text remains visible during webfont load.
I have implemented the suggestion from Tom here, but still is not resolved: https://generatepress.com/forums/topic/not-a-issue-about-google-fonts/#post-940012
/***** Ensure text remains visible during webfont load *****/ add_filter( 'generate_google_font_display', function() { return 'swap'; } );Please note that I do not have any CSS code to do this Swap on the filter above.
Could you please advise?
Thank You @David!
- You must be logged in to reply to this topic.