Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Responsive Image (LCP)

  • Good morning,

    I need your help again. I have run Google Speed Insights on my website and noticed that the LCP is too high. I have seen that the header image takes a long time to load. After reading quite a few articles on the subject, I’ve noticed that the header image is not responsive. If you look, the header image on the computer is different from the one seen on mobile.

    My Website

    I don’t know how to solve it. I think it could be fixed with a few lines of code, but I don’t have programming knowledge in HTML or CSS or similar.

    Can you help me?

    Thank you very much.

  • Hi there,

    are the original images webp ? Or are you using a converter ?
    Just looking at the options of preloading the image to improve its loading time.

  • It is not a converter. I am using original images webp.

  • The header image is the background image of the container. How can I make it preload to improve the loading time?




  • 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.

    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;}

    This doc explains how to add the 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.

  • Hi David,

    It does not work.


    I’ve done everything you’ve said, but it doesn’t work. The LCP is still high.

  • Can you clear any caches on the site ? Including Autoptimize

  • Better, but it’s still high.


  • 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 ?

  • I have used a Code Snippets plugin.

  • 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 and share the link with us.

    And make sure you’ve cleared cache after that.

    Let me know 🙂

  • Hello Ying.

    I forgot to activate the code in PHP. I have done it now, but it’s still the same. I have also cleared the cache.





  • Hi Rita,

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

  • Hi Fernando,

    I have disabled Autoptimize and, although it has improved a bit, the LCP is still high.


  • Hello Fernando.

    I have downloaded Google Fonts onto my server and verified that it works well. Do I need to uninstall the Google Fonts plugin?

    As for the CDN, I would prefer not to increase my expenses on the website at the moment. I’m not yet monetizing the website, I hope to do so in 2025. Is there any other option to improve the LCP that doesn’t involve acquiring a CDN service?



Viewing 16 posts - 1 through 16 (of 36 total)
  • You must be logged in to reply to this topic.