Nuxt项目body标签引发Lighthouse与Page Insight的CLS问题求助

我在使用Nuxt框架开发项目时，Lighthouse性能指标中CLS（累积布局偏移）得分最差。排查后确定body标签是导致CLS问题的主要因素。作为新手，我从未遇到过这类问题，也没找到同类案例参考。我已经尝试移除body标签的所有属性，但问题仍未解决，目标是将CLS控制在1.0以内。

代码示例 #

<!DOCTYPE HTML>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

相关指标说明 #

• 性能指标截图：呈现Lighthouse整体性能评分，其中CLS指标表现垫底
• CLS详情截图：明确标记body标签为布局偏移的核心诱因
• body标签截图：展示当前body标签的状态及关联属性

内容的提问来源于stack exchange，提问作者Huru Hara