[Support request] preload featured images

Home Forums Support [Support request] preload featured images

Home Forums Support preload featured images

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1637529
    ahmed

    I have optmized my site for speed. but i still have issues with high LCP. the main componenet that is cuasing the problem is my featured images.

    I do use lazy loading for my images. i did add filter to make an exception for featured images but without any improvement of my LCP.

    Is there is a piece of code that can “preload” my featured images all over the site?

    #1637647
    Elvin
    Staff
    Customer Support

    Hi there,

    You can try to preload your featured image by using the PHP snippet provided on my reply here:
    https://generatepress.com/forums/topic/i-want-to-get-the-featured-image-url-of-blog-post/#post-1514023

    A wise man once said:
    "Have you cleared your cache?"

    #1637755
    ahmed

    Hey Elvin,

    thanks for your reply.

    i have added the code in a code snippet. it doesn’t seem to make a difference in LCP.
    it doesnot to preload the image when i see the waterfall on GTmitrix.
    I also deactivated lazy loading, without help either.

    Any idea why it is not working?

    Note: i cleared cache in both SG optmizer and cloudflare.

    thanks again

    #1637899
    Elvin
    Staff
    Customer Support

    Can you tell us what exact code you’ve copied and pasted and how you’ve added it(code snippets, child themes, hook element, etc)? Let us know. thanks.

    A wise man once said:
    "Have you cleared your cache?"

    #1637964
    ahmed

    i have added the following code as a code snippet:

    add_action( ‘wp_head’, function(){
    $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),’full’);
    echo ‘<link rel=”preload” as=”image” href=”‘.$featured_img_url.'”/>’;
    });

    #1639741
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You shouldn’t need to preload your images if they’re using lazy loading.

    If you turn on lazy loading and open your “Network” tab in developer tools, you’ll be able to see exactly what is and isn’t loading when you first load your site. As you scroll down, you’ll see the images load as they appear on the screen.

    #1640136
    ahmed

    Hi Tom,

    the problem is that LCP is high due to delay in my featured image loading late, either with or without lasy loading.

    so i actually need and want to use “preload”, as i can see my featured images loading later than CSS, many other images on the page.

    Do you have any idea why the above code didn’t work? i believe that code was run correctly.

    or is there another code i can try to use?

    Thanks

    #1640761
    Tom
    Lead Developer
    Lead Developer

    That code looks like it should work. Can you link us to your page?

    #1640853
    ahmed

    Sure. here is a typical post link:
    https://www.benseena.com/cbc

    #1641707
    David
    Staff
    Customer Support

    Hi there,

    in your Code Snippet is the snippet enabled and is set to ‘Run everywhere’ ?

    #1642405
    ahmed

    Hi David,

    I always read your answers in the forum. your contribution to the forum are very useful.

    Code snippets are active and marked to work everywhere. However, i learned yesterday that code snippets sometimes does not run the code.

    so i did use the code in function.php which seem to work. however, it didn’t change my LCP due to calling the image link twice, probably due to choosing the incorrect image size.

    please note, i do use a plugin to optmize image (EWWW image optimizer).

    Any idea how to solve this?

    #1642728
    David
    Staff
    Customer Support

    I ran a pagespeed insights test and on the post you provided.
    The LCP element is actually the banner text and not the featured image.

    Looking at the report the main issue it raises is: Reduce initial server response time

    I ran a GT Metrix report:

    https://gtmetrix.com/reports/www.benseena.com/bLd1VfhY/

    You can see on the Waterfall report that there are long request waiting times.
    This may be down to your server location. But i would speak to your host to see if they can explain the long wait times.

    #1643278
    ahmed

    Regarding server, speed does fluctuate and i cannot tell you how many times i contacted them for that. no difference.

    yeah i actually added this text box to push my featured image down.
    i’m actually considering to use an image CDN.

    i’m looking for one that is reasonably priced and fast in loading images.
    i used shortpixel and Gumlet, both actually slowed down my site. do you recoomend an image CDN?

    Any other advice to improve loading time for images above the fold?

    Thanks

    #1643974
    David
    Staff
    Customer Support

    Don’t have a great deal of experience with Image CDNs.
    Personally i would load any above the fold image from the sites server, and ensure it has NO lazy loading applied to it – if the image is the LCP element, then Lazy Loading will increase your LCP time.

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