删除了第三方 webvitals 问题

如何解决删除了第三方 webvitals 问题

我查看了“http://www.briddles.com/riddle/9-bodmas?l=333”的pageinsights

其中大部分是第三方。我该如何解决？

解决方法

我在那里看到了 3 个重要的群体：

1. 优酷
2. Google Ads 或分析
3. 脸书

这是我会做的：

• 1. 我看到默认情况下 youtube 播放器是隐藏的，我会为播放器保留一些空间（可能带有轻量级占位符），并且仅在用户单击“查看答案”时附加 iframe。 This lite-youtube web component 很棒，可能会帮助您。相信我。
• 2. 通常，您不想摆脱 Google 广告。我会确保至少使用 async 属性加载这些脚本。
• 3. 对于 facebook 评论，我想了 3 种方法：
  • 3.1.使用“查看评论”或类似按钮呈现占位符，并且仅在用户按下该按钮时获取脚本。
  • 3.2.使用 Intersection Observer API 以便当评论部分滚动到视图中时，获取脚本并呈现。 （您必须保留一些空间以避免 CLS）。
  • 3.3.删除评论部分（如果几乎没有使用）或使用针对 Web Vitals 优化的其他提供商。我不知道是哪一个，但它仍然是一种选择。

---

额外推荐：

• 主图片对于移动用户来说太重，请尝试使用响应式图片、压缩图片并为支持它的浏览器选择较轻的格式，例如 webp。 More info about image optimization here。
• 减少您使用的字体数量，并在可能的情况下自行托管并使用 CDN。 Google 字体很实用，但托管字体更能提高性能。