Responsive Image (LCP)

OK, so the issue with the background image is:
a) the browser doesn’t know about them until really later in the render stages and
b) they are not responsive so its the big image being loaded no matter the screensize.

What i would suggest is this:

1. Edit the Page and set Featured Image to that image.
2. Use the Disable Element panel to Disable the Featured Image.

https://docs.generatepress.com/article/disable-elements-overview/

3. Select the Container Block that has the Background Image
IN Advanced > Additional CSS Class(es) add: page-hero

Save those changes.

At this point there will be no visible changes to the site.

4. Add this PHP Snippet to the site:

add_action( 'wp_head', function() {
    if( is_front_page() ) {
        $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium_large');
        $featured_img_url_full = get_the_post_thumbnail_url(get_the_ID(),'full');
        echo '<link rel="preload" media="(max-width: 768px)" as="image" href="'.$featured_img_url.'"/>';
        echo '<link rel="preload" media="(min-width: 769px)" as="image" href="'.$featured_img_url_full.'"/>';
        echo '<style>
        @media(max-width: 768px) {
            .page-hero:before { background-image: url('.$featured_img_url .') !important;}
        }
        @media(min-width: 769px) {
            .page-hero:before { background-image: url('.$featured_img_url_full .') !important;}
        }
        </style>';
    }		
},1000);

This doc explains how to add the PHP:
https://docs.generatepress.com/article/adding-php/

This code is going to do 2 things.
It will load the Large Featured image on Desktop and the Medium Large image on mobile and add it to your container background.
It will add the relevant preload links to tell the browser to load the images earlier.

Can you clear any caches on the site ? Including Autoptimize

Hmmm… that fuction should output 2 x Preload links and some CSS>
I do not see that. i see one preload link that hve broke Shortpixel URLs….. So i am not sure what is going on there.

How was the snippet added to the site ?

It doesn’t seem the code has been added correctly, can you take a screenshot for us to see how and where you added the code?

You can upload the screenshot to postimages.org and share the link with us.

And make sure you’ve cleared cache after that.

Let me know 🙂

Hi Rita,

Could you try re-testing the site with Autoptimize disabled?

Could you host your Google Fonts locally?: https://docs.generatepress.com/article/adding-local-fonts/

Then, could you try using a CDN?: https://www.wpbeginner.com/showcase/best-wordpress-cdn-services/