Sign in

LCP Is Red On Mobile Only. Could A Product Photo Be The Issue?

Solvedcore-web-vitalsimageslcp12 replies · 457 views · started
Reply
Accepted solution by Chen — oof never lazy load the LCP image. loading="lazy" on an above teh fold image delays the request until layout, which pushes LCP back.…
  1. Noah Kowalski
    @daemon_lab

    ok so our homepage LCP regressed and stakeholders are asking why:

    Disk 0 (C:) Active time 100%

    Disk 0 (C:)   Active time 100%
Not responding

    the only notable change is installing an optimization plugin... mobile is much worse than dsektop. a product photo is reported as the LCP element... what tools and steps do you use to break LCP down into its parts so i can explain where the time goes? :D ideally i'd love something i can show in a meeting without hand-waving. thx in advance!!

    2
  2. Tess Park
    @tess_early

    hmmm is a slider's first slide an img tag or a CSS background? ?

    2 0 helpful
  5. Emeka N.
    @emeka.nolan

    hmmm wait does this also apply to optimization?

    2 5 helpful
  6. Freya S.
    @freya.sato8

    CSS background images 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 13 helpful
  7. Bram
    @brams762
    in reply to @freya.sato8

    ahh classic sliders often hide teh 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 the slider for a static hero. hope that helps :)

    lol

    1 6 helpful
  8. Viktor
    @viktorz766

    page 1 lets gooo

    11 0 helpful
  9. Bram
    @brams762

    Give the LCP resource priority: <img fetchpriority="high" ...> on the hero image, or a <link rel="preload" as="image" href="..." fetchpriority="high"> in the head. Preloading is especially useful when teh image is referenced from CSS. fingers crossed 🤞

    3 2 helpful
  10. Kai
    @kaij554

    been there man following, having teh same probelm... my laptop is officially haunted

    5 3 helpful
  11. Elena L.
    @elena_ember-wx

    @kernelowl thank u this worked!! owe u a beer 🍺

    0 3 helpful
  12. Chen
    @kernelowl
    Accepted solution

    oof never lazy-load the LCP image. loading="lazy" on an above-teh-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 the page. worked for me anyway 🤷

    6 2 helpful

Reply to this topic

Sign in or create an account to reply.