<html>
<head>
...
</head>
<body>
--- it looks like
<div>
<canvas /> <-- only here without another leaf
</div>
--- or
<canvas /> <-- only here without another leaf
---
</body>
<html>
I tried to add another leaf element and Lighthouse works well
. But, I’m facing scale problem on canvas element
that not have render behavior like div
I just want my single canvas display on my website. So, I asking for another approach to fix that problem without add another leaf element.
2
Answers
your code should be
Currently
canvas
elements are not eligible as LCP elements. Therefore if your page consists of only this, then no LCP element will be captured.You can track the request for this here:
https://github.com/w3c/largest-contentful-paint/issues/74
There’s also a suggestion to improve the Lighthouse error message in this case here:
https://github.com/GoogleChrome/lighthouse/issues/12309