Search code examples
javascriptnuxt.jsseolighthousecumulative-layout-shift

body tag causes CLS issue on Lighthouse and Page Insight

so guys i have some problem on Lighthoust data but CLS is the most poor score on my lighthouse metrics data, and i just figure it out, that the metrics give me a detail about CLS that the most contibute on my CLS metrics is the body tag, i don't know why it can happen, for me as a beginer its kind like something uncommon issue, i tried to find out that not found the same problem like me. And i've tried to remove all attribute on body tag but it still got same issue. this is the sample of the metrics data. I'm using nuxt btw this is my code base

<!DOCTYPE HTML>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>
  1. metrics image
  2. CLS detail
  3. body tag

i tried to make the CLS atleast under 1.0 point

Solution

  • [Update]

    I solved the problem by reducing the dynamically inject code to the HTML that caused CLS.