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

[Charbel]

Hello @David,

Hope you are doing well.

I need your help please with GP Premium modules.

I have GP Premium 2.0.3 installed, and I have all modules activated as shown in the screenshot below except for WooCommerce.

I want to check with you which one I can deactivate safely without breaking my current site design/functionality?
As I mentioned in a previous discussion, my site was migrated with the help of Codeable and they activated all modules.

I came across Brian’s post below where he showed the list of modules that he is using which will help in site speed.
https://woorkup.com/generatepress-review/#performance

Many Thanks, @David!

[David]

You will need to check which options you’re using.
But from looking at your site i cannot see the need for:

Secondary Navigation – unless you have it displayed under a condition.
Backgrounds – don’t see any background images on any theme elements.
Site Library – definitely not required.

But thats probably it.

[Charbel]

Thank you @David, much appreciated!

I have disabled the modules, you mentioned above. So far so good!
What about Disable Elements module?

I have one question/issue that I am facing.

Do you remember the Featured Image background code that you shared with me below?
With this code, the WebP is not getting applied to the Feature Images only. I am using Cloudflare and Ezoic for next-gen image optimizations. Google PSI is always complaining about next-gen for Mobile/Desktops for the featured images. Because we moved it to the higher level of the stack, the optimization for images is not getting applied.

If I remove this code, Serve images in next-gen formats issue are resolved but LCP issue came again.

/** Remove the Featured Image Background from the header element **/
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); 

I just replaced the },0); with }); to see if the next-gen issue will be resolved while maintaining good LCP.

Many Thanks, @David!

[David]

I would leave the Disable Elements module, as its used in tandem with some of the other elements.
And just to be clear, most of the modules ( including that one ) don’t add any front end code to the site, they’re backend functions. So don’t really make any difference to performance.

Regarding Featured images, nothing i can do there i am afraid, first its way out of our scope and secondly way beyond my knowledge of how Ezoic is swapping images. You would need to employ a developer for that.

[Charbel]

Thank You @David, much appreciated!

I have installed the perfmatters.io plugin.
Based on your experience, which options do you recommend to set for GP, please?
I have seen the article from Brian here: https://woorkup.com/generatepress-review/

Any recommendation or advice is highly appreciated.

Many Thanks!

[David]

There isn’t any recommended settings, they are specific to the individual sites.
The simple rule is; if you’re not using a feature then don’t enable the module, such as the list i provided before.

But as i also said, it really makes very little difference to the front end performance.
The only ones that really have an impact will be things like Blog module or a Nav Module, but if you’re using them, you must keep them enabled.

[Charbel]

Many Thanks, @David for the great information and guidance, much appreciated!

[Charbel]

Hello @David,

Hope you are doing well.

What do you recommend to reduce the impact for Menu-Plus JavaScript offside.min.js below?

https://charbelnemnom.com/wp-content/plugins/gp-premium/menu-plus/functions/js/offside.min.js

This script was excluded from the Script Delay because it was impacting the Menu to load for Mobile.
If we delay it, the menu won’t work as expected.

In fact, I have the following excluded from the Script Delay option to not break my menu.

offside.min.js
offSide
generatepressNavSearch

Your help is highly appreciated.

Many Thanks, @David!
-Charbel

[David]

I wouldn’t use Script Delay on any script thats required for a user interaction, especially the navigation.
Script Delay is going to be compounded by any Long Tasks ( such as loading advert scripts ) the browser is performing. Until those tasks complete, the delayed script isn’t going to load.

And that particular file is around 2.5kb ( uncompressed / unminified ) – which isn’t going to make any difference to loading time, especially if you still have the other advert/ezoic scripts dragging your performance down.

[Charbel]

Thank You @David for the clarification!

No, I am not using Script Delay on any script that requires user interaction.
Ezoic has investigated this issue and excluded those scripts to improve LCP.

The Lab Data has improved on Google PSI since our last discussion.

Thanks!

[David]

Glad to hear that

[Charbel]

Hello @David,

Hope you are doing well.

Going back on the topic to improve LCP on Mobile, please.

I want to try an option by removing the Featured Image on Mobile only and keep it for Desktop.

Could you please advise how to accomplish this?

I believe that Featured Images do not make sense on Mobile. This will help me to measure the speed performance and see if LCP gets improved.

For example, this site is using GeneratePress Theme, Optimized with Cloudflare, and have Ads but the site is simpler. The performance on Mobile is great.
https://lazyadmin.nl/powershell/powershell-loops-for-foreach-do-while-until/

Many Thanks, @David!

[David]

Try this CSS:

@media(max-width: 768px) {
    .single .featured-image {
        display: none;
    }
}

[Charbel]

Thank you @David, much appreciated!

The Featured Image is removed on Mobile. I did not clear the cache yet, so you won’t see it on your side yet.

I have the following previous CSS code as well. Shall I remove it or keep it beside the one you shared above?

@media (max-width: 768px) {
.inside-header {
	padding: 20px 10px;
}	
}

Many Thanks!

[Charbel]

Hello @David,

I have cleared the cache from my side.

I have noticed that Google PSI still noticing there is a Featured Image on mobile, despite the fact it’s not displayed anymore. The site is still loading it.

Any thoughts?

Thank You!

[Author]

Posts