Lazyload not working with ShortPixel

  • Resolved Jeremy Ross

    (@jeremyrwross)


    4 years, 6 months ago

    When using ShortPixel to create webp images and setting it to rewrite the <img> tag to a <picture> tag will no longer allow the LazyLoading of Autoptimize to work as expected.

    I have also confirmed this is a problem when hard coding a <picture>/<source> tags into the WordPress content too, so this isn’t only related to the ShortPixel Plugin – but is the easiest way to replicate.

    When loading a page of the website, the jpg version of the image download immediately – then once scrolled to the webp image will download as expected.

    I have tested and confirmed this in a fresh install of WordPress with the Twenty Twenty and only the ShortPixel and Autoptimize plugins installed. ShortPixel has the following advanced settings activated:

    • Also create WebP versions of the images, for free.
    • Deliver the WebP versions of the images in the front-end:
    • Global (processes the whole output buffer before sending the HTML to the browser)
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    OK … can you copy/ paste a non-working <picture>/<source> block here I can use to test?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    Hey Jeremy;
    Worked on an issue with Imagify’s <picture rewrites, which was due to a WordPress action priority conflict between Imagify & Autoptimize, but once that conflict was resolved the picture tag was lazyloaded correctly, so it *can* work.

    Here too the problem might be due to a similar conflict given the “Global” option, does the problem persist if that option is off? If so, you can try having AO initializing earlier by adding below line to your wp-config.php;

    
define('AUTOPTIMIZE_INIT_EARLIER', true);

    If the problem persists when “global” is off, I would need to look into this further, a good next step would be an example of a <picture node with multiple <source childs (webp, ..) and in <img fallback so I can test with that?

    frank

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    No feedback so I assume this got resolved? Feel free to follow up if you still encounter issues!

    have a nice day!
    frank

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Lazyload not working with ShortPixel’ is closed to new replies.