4种新技术来加速您的网站并修复Core Web Vitals

提升网站性能：提高用户体验和 SEO 排名

网站性能直接影响用户体验和 SEO 排名。拥有快速加载的网站能带来更快乐的用户以及更高的转化率。同时，Google 将网站性能作为排名因素之一。

什么是 Core Web Vitals？

Google 定义了三个关键用户体验指标，称为 Core Web Vitals：

• Largest Contentful Paint (LCP): 页面内容加载的速度
• Cumulative Layout Shift (CLS): 内容加载后是否移动
• Interaction to Next Paint (INP): 页面对用户输入的响应速度

对于每个指标，都有一个最大阈值，网站必须在该范围内才能通过评估。

优化网站性能的策略:

1. 使用 speculation rules 实现即时导航:

Chrome 推出了 “speculation rules” 功能，可以预加载其他页面，以便点击链接后立即显示新页面。 这可大大提升用户体验并降低 LCP 分数。 只需在网页添加标签即可实现此功能，还能根据用户的浏览习惯自动预渲染内容。 2. 利用 Long Animation Frames API 优化与下一次绘制的交互:

JavaScript 代码可能会导致交互速度缓慢 (INP)。Long Animation Frames API 可以将延迟归因于特定脚本，帮助你快速找出需要修复的内容以提升 INP 分数。可以使用 Google 的 web-vitals.js 库或 DebugBear 等工具来收集数据。 3. 使用新的 DevTools Performance 选项卡:

新的 Chrome DevTools Performance 选项卡提供 Core Web Vitals 数据的直观概述，包括交互和布局偏移列表以及来自 CrUX 报告的真实用户数据。 这可帮助你快速定位问题并进行优化。

4. 分析最大的内容绘制组件:

Google 研究发现，图像加载时间并非影响 Largest Contentful Paint 的主要因素。 “Image Load Delay” 才是影响 LCP 分数的主要原因。可以使用 PageSpeed Insights 或 DebugBear 等工具来分析你的网站具体情况，找出需要优化的组件。

5. 使用网站性能监控工具:

DebugBear 等网站性能监控工具可以帮助你跟踪 Core Web Vitals 指标，识别潜在优化点并与竞争对手进行基准测试。 通过长期趋势监测，你可以了解所做的更改是否有效，并快速发现新问题。

总结：

优化网站性能不仅能提升用户体验，还能提高 SEO 排名。通过采用上述策略和工具，你可以显著提升你的网站速度，为用户提供更好的浏览体验，同时提升在搜索引擎中的排名。