Problem with pre-loading images

  • Resolved rudolfl

    (@rudolfl)


    5 months, 1 week ago

    Hi

    website https://www.hatsfromoz.com.au

    I have an LCP problem and I want to pre-load LCP image to speed things up. So, I added code to pre-load the image by injecting “<link rel=”preload” as=”image” href=image_url> into the site header.

    Now, Optimole processes the page and substitutes local image URL with Optimole CDN one. The problem is that it converts my preload URL and actual image URL into different URLs!!! (Image in question is a background image added via CSS)

    <link rel="preload" as="image" href="https://mlla0xuxwlls.i.optimole.com/cb:WjF4~2ac73/w:auto/h:auto/q:90/f:best/ig:avif/https://www.hatsfromoz.com.au/wp-content/uploads/2021/04/SpringSummer1.jpg">

    <div class="fusion-column-wrapper fusion-flex-justify-content-flex-end fusion-content-layout-column fusion-column-has-bg-image" data-bg-url="https://mlla0xuxwlls.i.optimole.com/fZh4Wl4.WjF4~2ac73/w:auto/h:auto/q:90/https://www.hatsfromoz.com.au/wp-content/uploads/2021/04/SpringSummer1.jpg">

    As you see from above, URLs are different, so preload does not work. I think, difference in URL is due to the image size. Can someone suggest how to properly preload this image while keeping Optimole CDN and lazyload features?

Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Support Kush

    (@kushnamdev)

    Hi @rudolfl,

    Thank you for contacting us.

    Optimole do preloads the top images and this can be verified by fetchpriority=”high” attribute in the site images, see here – https://vertis.d.pr/i/OjunC9

    For your case, if the issue is that every time you clear cache or change anything, the image URL gets changed, then you can try to preload the original image instead of the Optimole version of that image.

    It will ensure that its preloaded properly. Please check and let us know if it worked as expected or not.

    Best regards
    Kush Namdev

    Thread Starter rudolfl

    (@rudolfl)

    Thank you for replying

    But, if you look on my site: https://www.hatsfromoz.com.au, I have a bunch of Optimole pre-loaded images which have no relevance at all, while ones that are really important (in LCP) are not preloaded.

    This one, for example, must to be pre-loaded and it is not: https://www.hatsfromoz.com.au/wp-content/uploads/2021/04/SpringSummer1.jpg

    This image is a background image in a <div> Will that make a difference to how Optimole processes page?

    Thanks

    Rudolf

    Plugin Support Kush

    (@kushnamdev)

    Hi Rudolf,

    Yes, we don’t preload the background images at the moment, that’s why it is not preloaded by Optimole on your site.

    Can you can try to preload it the way I suggested and let us know if the issue still exists or not?

    Best regards

    Thread Starter rudolfl

    (@rudolfl)

    Ah!

    But this is exactly the problem!

    I am pre-loading original version of the image. Here is extract of my code:

    Optimole then re-writes URL into Optimole one. And rewrites the URL for the image itself to something else, rendering preloading useless.

    Plugin Support Kush

    (@kushnamdev)

    Hi @rudolfl

    I checked your site but I don’t see that image being preload at all, see here – https://vertis.d.pr/i/LHJGbN

    Best regards

    Thread Starter rudolfl

    (@rudolfl)

    Hi,

    Sorry, you were looking at the page as I was experimenting and removed the preload for a test.

    It is back now. WordPress forum doe snot allow me to paste “raw HTML”, so here is a screenshot of the code I use. It is added into “wp_head” hook

    https://ibb.co/Kqn5tLz

    Rudolf

    Plugin Support Kush

    (@kushnamdev)

    Hi Rudolf,

    Unfortunately we don’t preload the background images with Optimole as the URLs are generated dynamically, so each URL is unique. You won’t be able to preload it unless the?wp_get_attachment_image_src?function is used. You can exclude the image from the optimization/lazy loading process to solve the issue.

    We are sorry for the inconvenience you might have faced due to this, and please let us know how it goes. Thank you!

    Thread Starter rudolfl

    (@rudolfl)

    Hi

    I tried to disable optimisation of this image by setting up exclusion in Optimole settings.

    This stopped my “preload” image from optimisation, however same image served from CSS background is still being optimised, so problem is not solved. Yes, I did clear page cache.

    https://www.hatsfromoz.com.au

    Image in question is SpringSummer1.jpg

    Plugin Support Kush

    (@kushnamdev)

    Can you please share the screenshot of the Exclusion settings you configured?

    Thread Starter rudolfl

    (@rudolfl)

    Here you go

    https://ibb.co/XSstfK8

    Plugin Support Kush

    (@kushnamdev)

    It appears that this image is being cached by the fusion builder plugin, can you please try to clear cache or regenerate the css files of the builder (if this is possible) and check again?

    Thread Starter rudolfl

    (@rudolfl)

    No. Image is processed by Optimole.

    Fusion Builder is a builder plugin in Avada theme. So, yes, image is inserted by the Fusion Builder and appropriate CSS is generated by same plugin.

    Just for a test, I reset Avada cache (Fusion builder cache) and page caches. Image is still processed by Optimole

    Rudolf

    Plugin Support Kush

    (@kushnamdev)

    I am not sure what could be the issue here but I would like to test it more. Can you please contact us from here – https://optimole.com/contact

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