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