Lazy load slows site on mobile

  • Resolved brucetm

    (@brucetm)


    3 years, 5 months ago

    Hi:

    Can you help me understand the lazy load/placeholder feature better?

    Without lazy loading, my site header logo appears very early in the page load sequence, as expected.

    When I enable gray placeholder for my logo in site header, it’s nice because this box holds space for the logo and eliminates a layout shift.

    But unfortunately lazy load also defers loading of the site header logo until after the whole site is finished loading.

    Which seems to me the opposite of the definition of lazy loading (which I think should be “defer until the asset is in the viewport”)

    Since the logo is in the viewport from the beginning, it should not be deferred at all, but loaded as quickly as possible.

    Or, what am I missing?

    Here is a WebPageTest comparison of the impact of lazy off vs lazy on: https://imgur.com/a/50KQM9a

    Thanks for your help!

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

    (@qtwrk)

    Hi,

    yes , but lazyload will take all images into the “hold” status , and then start to load them once they are in viewport , but before all other resources are loaded , images will not start to load, even it’s on current view port

    a quick solution is to add logo uri into lazyload excluding

    we will also seek the possibility to automatically and by default to loads the images within the viewport

    Best regards,

    Thread Starter brucetm

    (@brucetm)

    Thanks for the details!

    I hope you will consider implementing the idea you mentioned. Load order would ideally be:

    1. Html
    2. Critical CSS
    3. Assets in viewport
    4. Rest of JS and CSS
    5. Images down page are loaded as user scrolls

    Thanks again,

    Bruce

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Lazy load slows site on mobile’ is closed to new replies.

Tags