Edwin Tuenen
Edwin 是一位战略内容专家。在加入 Yoast 之前，他曾在荷兰一家领先的网页设计杂志工作多年，磨练自己的技能。
"只要我只需轻轻一挥魔杖，您就拥有了一个超级快速的网站！”这可能也会让你感到惊讶，对吧？优化网站速度和用户体验是一项繁重的工作，技术复杂，而且速度很快。大多数网站所有者或管理者需要快速与开发人员联系以完成工作。现在，新的 Core Web Vitals 指标为您提供更多关于要解决的问题的见解和指示。让我们来看看您可以做些什么来提高您的 Core Web Vitals 分数。
目录
首先，免责声明
看，没有一件事可以保证解决特定问题。您必须从更广泛的角度来优化您的网站。许多小的修复可以带来不错的结果。因此，虽然我会告诉您在这里可以做的五件事，但这远非确定性的。甚至谷歌也表示，许多因素共同作用才能得出一个分数，所以很难确定如果你这样做，你的分数就会上升。
Google 真正为您提供的是深入了解是什么在减慢速度，是什么在损害用户体验。许多工具还提供有关如何解决问题的建议。例如，Web.de/measures 没有进行深入探讨，但它确实让您了解特定修复的影响。
Google的Web.dev/measure工具可以让你知道可能修复的影响
Google 即将推出的页面体验更新
我们已经发布了多篇关于 Google 页面体验更新（2021 年某个时候发布）的文章，因此如果您需要更多背景信息，请访问此处开始：
您或您的开发人员可以做的五件事
多年来，人们一直在谈论网站速度和用户体验。但是，尽管有大量关于如何优化网站的资料，但将这些知识付诸实践可能很困难。在过去的几个月里，谷歌再次将速度作为明年页面体验更新的优先事项。为了帮助您为此做好准备，它开发了一些工具，可以为您提供见解和大量文档供您阅读。
对于很多问题，建议并没有太大的改变。它归结为尽快将主要内容提供给用户。运行测试以查看您的站点的性能，尝试确定修复的优先级并开始吧！在下文中，您会发现混合使用新旧方法来增强您的网站。
优化图片
我要从一个老头开始这个清单：优化图片。您可以为您的网站做的最重要的事情之一就是适当地优化您的图像。是的，我们已经说过一百万次了，但我们会再说一遍：去做。主页或着陆页上未经优化的大图片可能会伤害您。对于任何给定的网站，大图像通常是最大的绘画内容 (LCP)。确保通过快速加载给您的访客以适当的欢迎！
我们有一篇关于图像 SEO 的热门文章，描述了如何使图像加载速度更快。但简而言之，请确保它符合您想要的大小并且压缩得很好。有很多工具可以帮助您做到这一点。就个人而言，我喜欢从 squoosh.app 获得的结果。不要认为您需要保持如此大的分辨率才能使该图像在大多数常见屏幕上清晰。
也尝试采用像 WebP 这样的现代格式。这些格式可以以较小的尺寸提供高质量的图像。 WebP 支持很好，甚至 Apple 也参与其中！即将发布的 Safari 14（在 macOS 和 iOS 上）将支持 WebP。是的，新的基于 Chromium 的 Microsoft Edge 浏览器也支持 WebP。
CMS 也是一个可以帮助您改进加载图像的工具。将于 8 月发布的 WordPress 5.5 将支持延迟加载图像。这意味着它只会加载出现在屏幕上的那些图像，而其余的则在用户与该屏幕交互时加载。这告诉浏览器只在需要时加载大图像。
另一个常青站点速度建议是使用 CDN，但您知道您也可以使用专门用于图像的 CDN 吗？图片 CDN 让您可以更好地控制服务方式和外观。图像 CDN 推送的图像在其 URL 中获得一串属性，告诉浏览器图像应该如何表现。
通过为图像等指定空间来稳定加载。
其中一个新指标是 Cumulative Layout Shift，简称 CLS。这方面的一个例子是，当一个移动页面看起来准备就绪时，只有当你想要按下一个按钮时，内容才会移动，加载缓慢的广告就会出现在那里。这种情况经常发生，并且是用户感到沮丧的主要原因之一。现在，虽然优化您的 CLS 不一定会使页面更快，但它会确保页面感觉更快。
CLS是由CSS中没有尺寸的图片引起的。它也可能是由没有尺寸的广告和嵌入或动态注入的内容引起的。如果没有正确指定尺寸，这些元素在加载过程中往往会轻微跳跃，使它们看起来不稳定。这也可能是由于在现有内容之上插入了新内容。除非有明确的用户交互，否则不要这样做。
防止CLS的方法之一是在CSS中添加图片宽高。这样，浏览器会为图像预留空间，图像可能会晚于文本出现。现在混蛋将消失，因为浏览器知道会在适当的时候添加一些东西。如果您想快速出现，请考虑添加某种低分辨率占位符。
因此，只需确保您的图像设置了正确的宽度和高度属性。当然，您也可以使用常规的响应式图像来做到这一点。只需确保对所有尺寸使用相同的纵横比即可。
为了应对跳动的广告或注入的内容，也请为它们预留空间。最后，您的 CLS 可能会下降一点。
加速您的服务器以减少加载时间
您的服务器响应请求的速度越快越好。使该服务器更具响应性可以直接提高许多站点速度指标。在复杂站点上，服务器忙于处理请求和提供文件和脚本，因此最好优化这些流程。
优化服务器包括几个部分。首先，升级您的托管计划。不要羞于主持。选择一款性能优良且价格合理的产品。此外，还有如何设置服务器的问题 - 使用最新版本的 PHP！ - 以及您选择的硬件。如果您发现您的硬件丢失，也许您应该升级您的硬件。此外，您需要研究数据库的工作原理，看看是否可以进行改进。使用查询监控 WordPress 插件等工具持续分析您网站上的查询。
还可以研究服务器端如何推送文件到客户端。有几种方法可以增强该过程，例如，使用 link rel=preload 或 HTTP/2 服务器推送。这些是更高级的解决方案，可让您微调服务器响应请求的方式。同样，CDN 可以在这里创造奇迹。
查看关键 CSS 以便更快地加载折叠内容
当浏览器加载页面时，它必须获取 HTML、呈现它、获取 CSS、呈现它、获取 JavaScript、呈现它， 等待。加载网站所需的文件越多，文件越大，网站加载速度就越慢。通常，当浏览器忙于处理事情时，它无法在后台加载内容。某些因素正在阻止这一进程。所谓的渲染阻塞 JavaScript 和 CSS 会影响一切。
由于 CSS 加载较晚，因此通常需要一段时间才能在屏幕上显示某些内容。通过将设计的关键部分（出现在折叠上方的部分）从主 CSS 文件中移出，并将其内联到代码中，您可以更快地在屏幕上显示内容。再次修复此问题不会使您的网站更快，但会使其看起来更快。一切为了这个王牌用户体验。
要获得一组关键的 CSS，您可以从多种工具中进行选择，也可以手动完成。此外，您可以使用 WordPress 缓存插件，例如 WP Rocket。 WP Rocket 有一个名为“优化 CSS 交付”的简单按钮。激活它有助于消除渲染阻塞 CSS 并增强网站负载。当然，WP Rocket 还做了其他很酷的事情，比如缩小 CSS 和 JavaScript 以及延迟加载 JavaScript。
改进了第三方脚本的加载
对于许多网站来说，缓慢也来自外部来源。例如，如果您的网站依赖于广告脚本，那么您基本上就掌握在广告提供商的手中。您只能希望他们提高广告效果。如果他们的广告加载速度非常慢，那么也许是时候寻找其他提供商了。
如果您发现第三方脚本正在降低您网站的速度，您应该进行调查。问问自己，我真的需要那个特定的广告吗？这些脚本的价值是什么？可能有不同的选项可以优化和减轻服务器压力。也许试一试？
如果可能，您可以尝试自己托管脚本。这样，您可以更好地控制加载过程。如果那不可能，请查看是否可以更快地预加载它。
至少，确保异步加载脚本或将其推迟到最后一刻。这样，浏览器可以在获取和运行外部脚本之前构建页面。如果要加载的脚本很重要，例如分析脚本，请使用异步。您可以对不太重要的资源使用延迟。有很多关于优化第三方脚本的文档。
增强核心网络活力：所有小改进
随着即将到来的页面体验更新，谷歌再次将网站速度和用户体验放在首位。我们一直从整体上看待 SEO - 有很多活动部分，您应该处理所有这些部分以尽可能构建最好的网站。虽然上面提到的提示可以帮助您提高分数，但您确实应该这样做才能为访问者提供更好的体验。
资源
