Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Jose Cerqueiro 25 posts 84 karma points
    Aug 04, 2022 @ 09:24
    Jose Cerqueiro
    0

    Inconsistent results for mobile with pagespeed.web.dev

    Hi, Wonderful package, thanks

    We installed it and seems to be working properly in a test site.

    However, when testing with PageSpeed Insights, the desktop results improved a lot but the mobile results are still low and the service keeps suggesting to defer offscreen images

    Any clues why PageSpeed ignores or doesn't detect the lazy load ?

    Thanks in advance

    Copy Link
  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Aug 04, 2022 @ 16:29
    Jeavon Leopold
    0

    Thanks for the feedback!

    Your issue sounds a bit odd but it's possible it's due to some CSS, have you verified the lazy loading is working as expected in developer tools? It's always worth verifying lazysizes.js is loaded and also checking the lazyload class is present on the img tags and with scrolling you should be able to see the advance lazy loading working in the network tab of developer tools.

    Copy Link
  • Jose Cerqueiro 25 posts 84 karma points
    Aug 08, 2022 @ 08:50
    Jose Cerqueiro
    0

    Hi Jeavon, thank you for your suggestions.
    We verified that lazysizes.js loads without errors.

    However, there are a lot of images that load immediately and not deferred. Also the format fot those images remains as JPG or PNG instead of webp.

    Here is a sample img tag for the images reported in pagespeed.web.dev:

    <picture class="">
    <!--[if IE 9]><video style="display: none"><![endif]-->
    <source data-srcset="/media/2825919/image_filename.png?anchor=center&amp;mode=crop&amp;width=160&amp;height=104&amp;format=webp&amp;quality=90&amp;rnd=132500811170000000 160w,/media/2825919/image_filename.png?anchor=center&amp;mode=crop&amp;width=320&amp;height=208&amp;format=webp&amp;quality=90&amp;rnd=132500811170000000 320w,/media/2825919/image_filename.png?anchor=center&amp;mode=crop&amp;width=480&amp;height=312&amp;format=webp&amp;quality=90&amp;rnd=132500811170000000 480w" srcset="/media/2825919/image_filename.png?anchor=center&amp;mode=crop&amp;format=auto&amp;quality=30&amp;rnd=132500811170000000" type="image/webp" data-sizes="auto" />
    <source data-srcset="/media/2825919/image_filename.png?anchor=center&amp;mode=crop&amp;width=160&amp;height=104&amp;format=auto&amp;quality=90&amp;rnd=132500811170000000 160w,/media/2825919/image_filename.png?anchor=center&amp;mode=crop&amp;width=320&amp;height=208&amp;format=auto&amp;quality=90&amp;rnd=132500811170000000 320w,/media/2825919/image_filename.png?anchor=center&amp;mode=crop&amp;width=480&amp;height=312&amp;format=auto&amp;quality=90&amp;rnd=132500811170000000 480w" srcset="/media/2825919/image_filename.png?anchor=center&amp;mode=crop&amp;format=auto&amp;quality=30&amp;rnd=132500811170000000" type="image/jpeg" data-sizes="auto" />
    <!--[if IE 9]></video><![endif]-->
    <img class="lazyload " alt="image_title" title="image_title" aria-label="image_title"
         src="/media/2825919/image_filename.png?anchor=center&amp;mode=crop&amp;format=auto&amp;quality=30&amp;rnd=132500811170000000" data-src="/media/2825919/image_filename.png?anchor=center&amp;mode=crop&amp;width=3200&amp;height=2080&amp;rnd=132500811170000000" data-sizes="auto" />
</picture>

    As I said previously, the issue seems to affect only when testing for mobile.

    Any help or hint on how to diagnose further will be very appreciated.

    thanks in advance

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft