Core Web Vitals 报告：增强网站性能的 28 种方法

Core Web Vitals 于 2020 年初宣布，是 Google 正在开发并计划纳入其整体搜索算法的一组指标 2021年5月. 鉴于现在快到 2021 年了，任何想要针对此新算法更新优化其网站的人现在都可以开始工作了。 值得庆幸的是，谷歌一直非常擅长 公开披露这些新指标是什么以及它们如何运作.

有了这些信息，就可以建立一个行动项目清单来检查和优化您的网站，为不可避免的这些新排名因素的推出做好准备。 这是该清单的 28 个此类项目。

A. 图像优化

图像是核心网络生命力中最大的影响因素之一。 所有 web vitals 都测量初始呈现之前的时间，加载图像是页面初始完全加载之前最大的延迟来源。 因此，优化图像往往是改善核心网络生命力的最强大工具。

1.减少背景图片的尺寸

背景图像很少是网站设计所必需的，并且可能是首次加载页面延迟的主要来源。

如果您使用背景图像，请减小该图像的大小并对其进行优化，使其尽可能接近瞬时加载。

2. 最小化背景图像或用图案替换背景图像

如果您不受特定背景图像的束缚，可以将图像替换为纯色、渐变，甚至是简单的平铺图案。 同样，目标是在网站初始加载完成之前最小化需要加载的资产数量。 由于背景图像不会产生巨大影响（在移动设备上更不需要），因此尽可能减少或删除它们。

3. 删除手机上首屏的图片

说到移动，由于手机和无线信号的质量，移动浏览体验通常比桌面浏览慢。 移动设备特别容易受到第一次输入和内容转移的延迟的影响。

为了帮助避免这种情况，请努力根据文本和其他简单元素制作尽可能多的首屏内容。 折叠上方的大图像和幻灯片对您的分数特别粗糙，因此请尽可能移除或移动它们。

4.实现延迟加载

延迟加载是一种用于加速任何给定页面的初始加载的常用技术。 随着谷歌即将推出的新指标，对它的支持很快成为默认功能也就不足为奇了。 例如，WordPress 添加了 今年早些时候 5.5 版本中的原生默认延迟加载. 对最初不需要在首屏加载的任何内容（尤其是图像）使用延迟加载。

5. 使用 WebP 图片

WebP 是 Google 的另一项举措，是 2010 年开发的一种新图像格式。它是一种比 PNG 等传统图像格式具有更好压缩算法的较小图像格式。

虽然直到最近它才真正获得广泛关注，但随着用户和搜索引擎越来越关注速度和加载时间，它变得越来越有价值。 支持很广泛，即使没有使用，所以您可以或多或少安全地使用 WebP 图像作为您的主要图像文件。

6.优化图像文件大小

使用工具压缩或压缩图像文件以使其文件大小更小应该是此时优化网络图像的默认部分。

如果您还没有这样做，请确保您实施了一种方法来处理图像，作为您博客工作流程的一部分。 您还需要确保已定义图像的高度和宽度以防止布局偏移。

B、CSS优化

CSS 已成为许多网站设计中越来越重要的部分，以至于阻止它会使网络几乎无法识别。 由于从颜色到定位的一切都依赖 CSS 的网站如此之多，因此确保您的代码得到优化比以往任何时候都更加重要。

7. 内联关键 CSS

你不需要内联你的 CSS 的每一部分，尽管那样也可以。 特别是，您希望内联对主题的整体设计和布局至关重要的 CSS。

这最大限度地减少了浏览器需要从您的服务器调用的单个文件的数量，这些文件只是为了加载初始布局并在您的站点上绘制初始内容。

8. 压缩 CSS

默认情况下，CSS 是一种非常简约的语言，可以在没有空格、缩进、注释和其他文本的情况下完美运行，这使得它更加用户友好且更易于开发。 在将新代码上传到您的网站之前，通过一个工具运行它以缩小它并删除所有对页面加载具有微观但有形影响的多余内容。

9. 合并 CSS 文件和代码

将 CSS 存储在各种文件中并分散在您的代码中可能很诱人，把它放在它看起来应该在的地方，而不是放在它有意义的地方。 记住; 对于开发人员来说最简单的事情对用户来说不一定是最快的。 合并您的 CSS，无论它是内联的还是在单独的文件中，并且只在必要时执行特定元素。

10. 优化 CSS 交付

CSS 通常是站点代码的延迟加载元素。 传统的站点设计加载站点的框架，然后是内容，然后是 CSS 来格式化所有内容。 特别是当 CSS 存储在外部文件中时，这会显着延迟加载。 预加载 CSS 是一种策略 谷歌推荐 强制浏览器加载 CSS 并在需要时准备好它。

C. JavaScript 优化

JavaScript 是代码膨胀和加载网站延迟的最大来源之一。 优化您网站的 JS 可以极大地加快它的速度，即使它看起来不会根据您对它所做的事情产生太大影响。

11. 压缩 JS 脚本

与 CSS 一样，JavaScript 不需要额外的空格和中断来运行。 它还不需要冗长的变量名，这对开发很有用，但会显着增加脚本的大小。

在将它们添加到您的站点之前，通过压缩器运行您的脚本。

12.整合脚本并尽量减少使用

许多 Web 设计人员使用 JavaScript 的目的已经在 HTML5 和 CSS3 中作为功能提供多年。 特别是在旧网站中，修改或审查脚本可以找到替代的、更快的方法来做同样的事情。 尽可能多地检查和优化、最小化、合并和删除站点中的 JavaScript。

13. 尽可能延迟或异步脚本

脚本是呈现网站的障碍。 当浏览器必须呈现 JS 脚本时，它必须先处理该脚本，然后才能继续加载页面。 由于许多开发人员将脚本放在他们的标题中，这会显着延迟页面加载。 使用 Defer 允许浏览器在执行脚本之前继续加载页面，而 Async 允许它们同时加载。 使用这两个功能可以让您抵消使用脚本固有的延迟并加快初始页面加载速度。

14. 删除 jQuery 迁移

最近对 jQuery 的更新导致许多旧插件和脚本不再工作。 为了争取时间并允许网站管理员更新他们的站点，引入了迁移模块。 这本质上是一个翻译模块，它允许旧的 jQuery 在使用较新版本的 jQuery 的站点上运行。

对您的网站进行审核，看看您正在使用的任何东西——尤其是旧的插件和应用程序——是否使用了 jQuery Migrate。 如果是这样，请考虑更新或替换这些插件。 您的目标是完全删除 Migrate 模块的使用，因为它相当笨重并且会显着降低网站速度。

15. 尽可能使用 Google Hosted JS

谷歌优惠 一系列标准库 托管在他们的服务器上以供在您的网站上使用。 与其依赖第三方获取这些库或自己托管它们，不如使用 Google 的版本来尽可能缩短加载时间。

D、视频优化

视频作为普通网站的一部分越来越受欢迎，从内容的核心元素到基于视频的广告以及介于两者之间的一切。 它们也是非常大的文件，即使使用部分加载和现代视频缓冲也是如此。 尽可能优化您对视频的使用。

16. 为视频缩略图使用图像占位符

有很多浏览网页的用户不想看视频，因此完全没有必要强迫他们在后台加载视频。 一个好的解决方法是在视频正常加载的位置使用图像占位符。

图像加载速度更快，看起来像带有加载缩略图的视频播放器。 当用户单击它开始播放视频时，它会开始加载视频，但在此之前不需要加载任何视频文件或播放器。

17. 最小化首屏视频

与图像一样，视频文件非常重，因此将它们加载到首屏可以保证在您的第一次内容绘制时出现延迟。 将它们推到首屏之下； 无论如何，大多数人都想在观看视频之前先阅读标题和介绍。

E. 字体和图标优化

字体和图标的使用在站点的加载时间上可能比您预期的要重得多。 优化它们可能看起来像是微不足道的细节工作，但当您看到它可能产生的影响时，您会想知道为什么以前从未进行过这些次要但有影响的优化。

18.预加载字体

与脚本类似，当您的网站调用需要加载的字体时，加载该字体优先并停止渲染其余代码。

使用预加载命令提前加载字体有助于加快页面加载速度，并防止“无样式文本的闪光” 在文本加载和字体样式出现之间短暂发生的效果。

19.只使用你需要的字体

许多网络字体和字体系列在调用时会加载它们的整个字符集和样式表，即使您的页面没有使用 90% 的内容。 通常，您可以限制加载量，但您可能需要为高级字体访问付费。 如果您使用有限数量的给定字体，或者包含特别大字符集的字体，这可能是非常值得的。

20. 尽可能使用 SVG

SVG 是可缩放矢量图形，是一种创建非常小的页面元素的方法，这些元素可以无限缩放，也可以单独操作，比传统字体和图标的程度大得多。 如果可能，切换到使用 SVG 而不是您常用的图标。

F. 服务器优化

无论您对网站代码、图像或网站的其他元素进行了多少优化，如果您的服务器运行缓慢，这一切都无关紧要。 网络托管公司的激增，更快更强的技术的持续发展，都意味着网络托管很快就过时了。 每隔几年，将托管更改或升级到更快的基础架构是值得的。

21.升级到更快的服务器

您不一定需要从共享主机升级到专用主机，尽管这有助于解决共享主机固有的一些速度问题。 即使只是简单地从较慢的软件包升级到更快的软件包也可以很好地利用预算。

22. 使用 CDN

几乎在任何情况下，现代内容交付网络都可以比典型的网络主机更快地处理您网站的大部分元素。 至少，考虑为您的图像、视频和其他多媒体使用 CDN。 您也可以考虑卸载独立脚本文件。

23. 预加载 DNS 查询

预加载或预取 DNS 查询有助于最大限度地减少访问者请求资产与显示该资产之间的延迟。

这与使用 CDN 通过在首次调用之前加载和解析 CDN 的域来存储资产相结合，进一步加快了页面加载时间。

24.预加载你的缓存

通常，网站上使用的缓存插件或脚本会在第一个访问者到达查看页面时触发。 第一个访问者的体验较慢，但他们的负载会为未来的访问者缓存页面，直到缓存过期。 不幸的是，第一次访问通常是 Google 机器人从您的 XML 站点地图或内部链接抓取您的页面，这意味着 Google 是第一个体验您网站慢速版本的人。 您可以通过在您的网站上预加载缓存来解决这个问题，这样 Google 的下一次访问是一个有保证的快速加载网页。

25.考虑服务器端缓存

诸如 Varnish Cache 之类的软件充当服务器端缓存，以进一步加速页面缓存版本的生成和服务，以尽可能少的服务器调用使其尽可能快。

G. 额外优化

任何不属于其他类别的内容都已添加到此处。 这些额外的优化可能不适用于您的网站设计，但如果适用，照顾好它们可能会大有裨益。

26. 最小化第三方脚本

2021 年的网站管理员将需要在网站速度优化和用户参与工具之间取得平衡。

许多插件，如社交分享按钮、第三方评论系统和媒体嵌入都需要执行第三方脚本才能工作，但这些脚本会降低网站速度。 尽可能地减少它们，并尝试找到每个版本的最快版本。

27.避免预加载填料

对于加载时间较慢的站点，一种常用技术是添加微调器、加载图标、动画或其他形式的加载和显示内容，以向用户表明该站点实际上正在加载。 虽然这有助于最大限度地减少跳出，但它对核心 Web Vitals 测量的初始负载造成了巨大的打击。 删除这些并努力加速您的网站，这样您就不需要它们了。

28. 考虑重新设计网站

归根结底，有时您需要对站点的众多基础元素进行如此多的更改，以致于简单地废弃当前设计并在考虑速度的情况下设计一个新设计会更容易。 考虑它的可能性，并分析您将从优化的核心网络生命力中获得的好处。 目前还没有人知道这些指标对整个算法的影响有多大，但针对它们进行优化肯定不会有什么坏处。

詹姆斯·帕森斯是 内容驱动，一家博客管理和内容营销公司。 他作为高级内容营销人员工作了十多年，并为福布斯、企业家公司和商业内幕撰稿。