Sign in

PageSpeed Screams About A Product Photo. Was Adding Lazy Loading Everywhere A Mistake?? 馃

core-web-vitalsimageslcp14 replies 路 346 views 路 started
Reply
  1. Erik Iqbal
    @eiqbal

    ok so after adding lazy loading everywhere, our Largest Contentful Paint went from comfortably green to this:

    PageSpeed says the LCP element is a product photo. Nothing about it changed visually, same file, same size. Yet it clearly paints much later now. Im trying to understand what in the loading order changed. How do u dig into why one specific element is slow? Any advice on how to prove the cause before rolling anything back would help.

    4
  2. Bo J.
    @bufferprobe

    CSS background iamges are discovered late, only after teh stylesheet is downloaded and parsed. if the LCP element is a background image, switch to a real <img> element in the HTML or preload it.

    2 1 helpful
  3. Liv
    @livd122
    in reply to @bufferprobe

    omg finally ok update: did what @kernel_pusher903 said and its fine now seriously made my day 馃槶馃檹

    0 2 helpful
  4. Yusuf Schmidt
    @kernel_pusher903

    been there man sliders often hide the first slide until their JavaScript initializes, which adds the whole script load to LCP. render the first slide visible in plain HTML and let teh script enhance it afterwards, or drop teh slider for a static hero.

    1 0 helpful
  5. Uma Bauer
    @pixel_garage897
    in reply to @kernel_pusher903

    If the CDN change is involved, check TTFB and caching headers. A cache miss or slow edge adds directly to LCP. Look at cache-control and teh CDNs cache status header on the HTML and teh hero image, and confirm images are served in a modern format at the right size via srcset and sizes.

    4 2 helpful
  6. Uma Bauer
    @pixel_garage897

    long time lurker first post lol my gaming rig is officially haunted. @pixel_garage897 did u ever fix it? im about to throw this thing out the window lol

    0 2 helpful
  7. Omar Lopez
    @pixelgremlin

    hmmmm not sure about that idk man that suonds like bad advice tbh

    0 2 helpful
  8. Nico Ferreira
    @nico_early

    unrelated but anyone elses coffee machine also judging them today :)

    4 1 helpful
  9. Liv
    @livd122

    ok so never lazy-load the LCP image. loading="lazy" on an above-the-fold image delays the request until layout, which pushes LCP back. Remove it from teh hero image and keep lazy loading for images further down teh page. good luck man!

    1 0 helpful
  10. Nico Ferreira
    @nico_early

    in Chrome DevTools' Performance panel, record a page load and look at the LCP marker... recent versions break LCP into time to first byte, resource load delay, resource load duration and element render delay. whichever part grew tells you where to look. hope that helps :)

    0 1 helpful
  11. Liv
    @livd122

    Preload is powerful but easy to overuse. Preload too many things and youre back to everything competing. Pick one LCP resource and stop there. but hey ymmv

    0 1 helpful
  12. Rowan R.
    @rrossi

    oof exact same thing happened to my old thinkpad last month

    0 11 helpful
  13. Yuki
    @yukiz808
    in reply to @rrossi

    oh ive been there lol honestly just reset the thermal paste and save yourself the pain good luck man!

    thumbsup

    3 0 helpful
  14. Yuki
    @yukiz808

    hmmm dumb question but how do i even check the thermal paste ?

    0 2 helpful
  15. Erik Iqbal
    @eiqbal
    in reply to @nico_early

    @nico_early Switched the CSS background to a real img with srcset. Load delay dropped right away. Thanks for explaining the discovery issue.

    6 0 helpful

Reply to this topic

Sign in or create an account to reply.