4 ms·
I was surprised that when I tested my canvas library website using the new Lighthouse metrics it scored 92 on performance (and 99 on accessibility, which is the
by rikroots 5y ago
I was surprised that when I tested my canvas library website using the new Lighthouse metrics it scored 92 on performance (and 99 on accessibility, which is the metric I most care about). The website[1] includes a massive animated banner in a <canvas> element which requires loading two large (yet responsive) images alongside processing etc to get the animation playing. The LCP measure was 0.7s
Checking web.dev's LCP page[2] explains my luck - Lighthouse does not (currently) consider <canvas> elements, or their asset requirements, when calculating the LCP score. They do include: "<img> elements; <image> elements inside an <svg> element; <video> elements (the poster image is used); an element with a background image loaded via the url() function (as opposed to a CSS gradient); and block-level elements containing text nodes or other inline-level text elements children."
I am certainly not suggesting that everyone starts loading their image-heavy banner content into <canvas> elements to help improve their LCP scores as I fully expect Google to address such attempts to game the system at some point in the (near) future.
[1] - https://scrawl-v8.rikweb.org.uk/ https://scrawl-v8.rikweb.org.uk/
[2] - https://web.dev/lcp/ https://web.dev/lcp/