Conditionally Preloading background images served via LiteSpeed Cache

  • Resolved mastema93

    (@mastema93)


    2 years, 3 months ago

    My goal is to preload images in the initial viewport when the page loads.
    For some reason background images are not always served as .webp, even when all other images are being served as .webp. This is making preloading very difficult for the hero background image.
    I have created a snippet which checks if the browser supports .webp, and if it does, it preloads .webp, otherwise it preloads .jpg. However, LiteSpeed cache is very unreliable in serving .webp for background images, even when the browser supports it. I have also tried adding a check to see if the LiteSpeed Cache plugin is serving the WebP version of the image before preload, but this didn’t seem to work either.

    The issue here is that as much as I have tried to dynamically preload the background image, in most instances I am preloading a webp when litespeed is serving a jpg, this causes 2 formats of the image to load and the preloaded image is not even used.

    Can you please advise?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support qtwrk

    (@qtwrk)

    Hi,

    pleas check this page

    https://stackoverflow.com/questions/74725708/conditionally-preloading-images-with-php-based-on-litespeed-cache-plugin-in-word

    Best regards,

    Thread Starter mastema93

    (@mastema93)

    Hi,

    I am actually the author of that post on stackoverflow. I am also already using the .htaccess rewrite rules in the answer to my question.

    Still the background images are not reliably webp. I have notice that if I enable minify css in litespeed cache, it will force the webp background images (but still not 100% of the time)

    Plugin Support qtwrk

    (@qtwrk)

    yes , I know , and I am the one who posted that answer

    and yes , you need enable CSS minify , so the CSS file will be filtered and replaced if webp exists

    and if you check the file type on dev tool , with that rule , you should see the content-type is image/webp if corresponding webp files exists

    you can simply add .webp to the image URL , to check if webp version exists or not

    Thread Starter mastema93

    (@mastema93)

    Is there a way to make it consistent in serving webp for background images?

    I have the rewrite rules in .htaccess and CSS minified, all caches flushed. It was loading .webp last night, this morning it is loading .jpg.

    Plugin Support qtwrk

    (@qtwrk)

    please provide the report number , you can get it in toolbox -> report -> click “send to LiteSpeed”

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Conditionally Preloading background images served via LiteSpeed Cache’ is closed to new replies.