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

[David]

Can’t see it on the Google PSI report, but your site is preloading the image eg. example from on of your posts:

<link rel="preload" as="image" href="https://xxxxxxxxxxxxx/wp-content/uploads/2021/08/Rename_AzureVM_PowerShell_01.jpg">

Do you still have the code here ? As that was added for when you had the Header Element.

[Charbel]

Hello @David,

Yes, I still have the following code in my functions.php. Shall I remove it?

/** 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!

[David]

Yes, it will stop preloading the image as thats not required on Mobile now.

[Charbel]

Thank you @David,

Please note that I have removed the code and cleared the cache.

Could you please check and confirm from your side?

Thank You!

[David]

I can confirm its no longer making the image request on mobile 🙂

[Charbel]

Many Thanks, @David much appreciated!

I have seen a bit of improvement so far. Let’s see in the next couple of days.

[David]

You’re welcome

[Charbel]

Hello @David,

Hope you are doing well.

I have a small request for Mobile Menu, please.
I changed the Hamburger icon size (left-hand side) for Mobile using the following CSS code:

.main-navigation .menu-toggle { 
    font-size: 20px;
}

I would like to do the same for the Search icon on the right-hand side to increase its size a bit (from 16px to 20px), so they can be identical.

Could you please help?

Thank You!

[David]

Hi Charbel,

would you mind raising a new topic so the question is unrelated to this one
Will make it easier for you and us to track and respond 🙂

[Charbel]

Sure, thank you @David!

[David]

Thanks!

[Author]

Posts