Jump to main content

Nicolas Hoizey

  • articles
  • billets
  • links
  • notes
  • talks
  • archives
  • about

Note from 14 October 2022

  • Nicolas Hoizey
  • 14 October 2022
  • CLS, Core Web Vitals, Lighthouse, WebPerf
  • 4 reactions

width and height attributes on <img> help prevent layout shifts (CLS). Values should be unitless integers.

But #Lighthouse sees 100% as 100, thanks parseInt()…

Do you think it should be improved?

-> https://github.com/GoogleChrome/lighthouse/issues/14449

4 reactions

2 likes

  1. Julien Wajsberg avatar
  2. Alistair Shepherd avatar

2 replies

  1. Patrick Hulce avatar Patrick Hulce
    I think this is WAI.

    100% does not require knowledge of the image's dimensions in order to appropriately size.

    It may not be the ideal design choice, but it's fine from a CLS perspective, no?
    • 14 October 2022, 18:55
    • Source
  2. Nicolas Hoizey avatar Nicolas Hoizey
    Hum… you’re right, there is no performance issue here. 🤷‍♂️

    A developer told me he increased his Lighthouse score by adding `width="100%"` and now the image is distorted. 😭
    • 14 October 2022, 21:12
    • Source
  • Older: Note from 14 October 2022
  • Newer: Note from 17 October 2022

Related contents with similar topics

  1. screenshot of Why Lighthouse Performance Score Doesn’t Work

    Karolina Szczur avatar Karolina Szczur

    Why Lighthouse Performance Score Doesn’t Work

    • Nicolas Hoizey
    • 7 June 2024
    • WebPerf, Lighthouse
    • 2 reactions

    There is some correlation between the [Lighthouse] Performance Score and how well your site will do for real users. Still, lab testing alone doesn’t…

  2. screenshot of New field insights for debugging INP

    Jeremy Wagner

    New field insights for debugging INP

    • Nicolas Hoizey
    • 20 May 2024
    • INP, WebPerf, Core Web Vitals
    • 2 reactions

    Interaction to Next Paint (INP) is a Core Web Vital that measures how responsive a page is to interactions. Due to INP's scope, it can be difficult…

  3. Note from 24 April 2024

    • Nicolas Hoizey
    • 24 April 2024
    • image, JPEG XL, Lighthouse, photography, WebPerf
    • 3 reactions

    Should I please Lighthouse with modern image formats, or my visitors with progressive rendering of large images in my photography site? 🤔

    screenshot of Lighthouse score in SpeedCurve, with a recommendation to use modern image formats

    Of course, this would be much easier with genaralized JPEG XL support, both modern and allowing progressive… 🤷‍♂️

  4. Note from 30 October 2023

    • Nicolas Hoizey
    • 30 October 2023
    • CLS, SpeedCurve, WebPerf
    • 2 reactions

    I love (some) boring #SpeedCurve graphs… 😅

    Screenshot of a CLS graph from SpeedCurve showing one year of value zero

  5. Note from 6 June 2023

    • Nicolas Hoizey
    • 6 June 2023
    • Core Web Vitals, image, LCP, WebPerf
    • 6 reactions

    Apparently, an image whose part above the fold is indeed the largest, but of which only a small part can be seen, can be considered an LCP element, even if another image has a larger part visible... 😭

    You can see this for my photography site in this WebPageTest result:

    https://www.webpagetest.org/vitals.php?test=230606_BiDcN4_4NJ&run=3&cached=0#lcp

    Screenshot from WebPageTest showing the image mostly hidden behind another one is the LCP

If you want to share an error or suggest an enhancement of this content, please edit the source on GitHub.

© Nicolas Hoizey

Built with Eleventy