在当今精通技术的世界中，网站性能比以往任何时候都更加重要。快速无缝加载的网站不仅可以提供更好的用户体验，而且在搜索引擎排名中得分更高，尤其是在 上。但是您如何才能提升站点的性能以满足这些需求呢？ Google 答案在于掌握和优化您的 Core Web Vitals——Google 用来评估网站性能的一组指标。但是，如果您觉得这个概念很陌生，请不要担心。在本指南中，我们将深入探讨 Core Web Vitals 的各个领域，剖析它们是什么、它们为何重要以及如何优化它们以提升网站性能。 内容概览 了解核心网络生命力 为什么 Core Web Vitals 很重要？ 核心网络生命力的三大支柱 衡量核心网络生命力的工具 优化核心 Web Vitals 的分步指南 利用 Loado：您优化核心 Web Vitals 的盟友 结论 了解核心网络生命力 Core Web Vitals 是 Google 用来衡量网页速度、响应能力和视觉稳定性的一组指标。它们于 2020 年推出，是谷歌页面体验信号的一部分，有助于网站在搜索引擎中的排名。  Web Vitals 是 的一项举措，旨在为质量信号提供统一指导，据他们称，这些信号对于在网络上提供出色的用户体验至关重要。 “Core Web Vitals”是 Web Vitals 的一个子集，适用于所有网页，应由所有网站所有者衡量，并将出现在所有 Google 工具中。 Google  Core Web Vitals 每年都在发展，Google 根据他们认为对良好用户体验至关重要的指标添加或修改指标。 Core Web Vitals 包括 Largest Contentful Paint (LCP)、First Input Delay (FID) 和 Cumulative Layout Shift (CLS)。 为什么 Core Web Vitals 很重要？ 简而言之，Core Web Vitals 很重要，因为谷歌说它们很重要。这足以引起任何网站所有者或开发人员的注意。但是，让我们更深入地挖掘一下。 随着互联网的普及，用户的期望发生了巨大的变化。他们需要快速、交互和稳定的体验。任何与此的偏差都会导致用户满意度下降，这可能表现为参与度下降、跳出率上升，并对您的整体转化目标产生负面影响。  Google 引入了 Core Web Vitals 以提供可量化的用户体验衡量标准。这些重要因素是新页面体验信号的基础，该信号结合了现有的与用户体验相关的信号（移动友好性、安全浏览、HTTPS 安全性和侵入性插页指南）。通过使用这些信号，Google 旨在帮助网站所有者、开发人员和 SEO 专业人员衡量、基准测试和改善其网站的用户体验。 此外，这些指标直接影响网站在谷歌搜索引擎上的排名。表现更好的网站，具有良好的 Core Web Vitals 分数，受到谷歌算法的青睐，从而在搜索结果中出现更高的位置。 核心网络生命力的三大支柱 现在我们了解了 Core Web Vitals 是什么以及它们为何重要，让我们深入研究 Core Web Vitals 的三大支柱。 最大内容绘画 (LCP)  LCP 测量加载网页主要内容所需的时间 - 从用户单击链接到页面主要内容完全呈现在屏幕上的时间。一个好的 LCP 分数是低于 2.5 秒。任何超过 4.0 秒的时间都被认为是差的。 第一输入延迟 (FID)  FID 量化网站的交互性。具体来说，它测量从用户首次与网页交互（如单击链接或点击按钮）到浏览器处理该交互的时间。一个好的 FID 小于 100 毫秒，而任何超过 300 毫秒的都需要改进。 累积布局偏移 (CLS)  CLS 衡量视觉稳定性。它量化了网页上发生了多少意外的视觉内容布局变化。这可能是当可见元素将其位置从一个渲染帧更改为下一个渲染帧时。低于 0.1 的低 CLS 是理想的，而高于 0.25 的任何东西都被认为是差的。 将这三个支柱放在一起，可以全面了解网页的性能。但是你如何衡量你的 Core Web Vitals？ 衡量核心网络生命力的工具 随着 Core Web Vitals 的重要性的确立，让我们看看可以用来衡量这些关键指标的各种工具。幸运的是，谷歌提供了多种工具来测试和监控您的核心网络生命力。 以下是您应该熟悉的一些内容：    ：GSC 有一个专门的 Core Web Vitals 报告，该报告按状态、指标类型和 URL 组（相似网页组）对页面进行分组。它使您可以全面了解您的站点的性能并帮助确定需要改进的地方。 Google Search Console (GSC)    ：PSI 是一个简单的工具，可以报告页面在移动和桌面设备上的性能，并提供有关如何改进该页面的建议。 PageSpeed Insights (PSI)    ：Lighthouse 是一种开源的自动化工具，用于提高网页质量。它对性能、可访问性、渐进式 Web 应用程序、SEO 等进行审核。您可以针对任何网页、公共网页或需要身份验证的网页运行它。 Lighthouse    ：CrUX 是数百万网站上真实用户体验数据的公共数据集。它测量所有 Core Web Vitals 的现场版本。 Chrome 用户体验报告 (CrUX)    ：DevTools 直接内置于 Google Chrome 浏览器中，提供对大量数据和服务的访问，包括测量 Core Web Vitals。 Chrome DevTools   ：此 Chrome 扩展程序可在任何网页上实时测量三个核心 Web Vitals 指标，让您像用户一样体验页面加载。 Web Vitals 扩展 了解了哪些工具可用于衡量 Core Web Vitals 之后，让我们深入探讨核心部分：优化这些 Vitals 的分步指南。 优化核心 Web Vitals 的分步指南 优化LCP 提高 LCP 分数的核心是提高页面加载时间。以下是实现这一目标的一些策略： ：这些额外的脚本会显着减慢您的页面加载时间，增加您的 LCP。 删除任何不必要的第三方脚本 ：更好的托管可以缩短服务器响应时间，进而加快您网站的加载时间。 升级您的虚拟主机 ：延迟加载确保图像仅在有人滚动到它们时加载，而不是在页面加载时立即加载。 设置延迟加载 ：PageSpeed Insights 会告诉您页面是否有拖慢加载时间的元素。 删除大页面元素 优化 FID 要优化 FID，您需要确保浏览器能够快速响应用户交互。以下是您可以采取的一些步骤：  ：这不是要删除 JavaScript，而是要优化它的使用。页面加载和执行的次数越少，干扰用户交互的可能性就越小。 最小化（或延迟）JavaScript ：与 LCP 一样，第三方脚本（尤其是那些在主线程上加载的脚本）会对 FID 产生负面影响。 删除非关键的第三方脚本  ：Web worker 是一种在后台运行 JavaScript 而不会阻塞主线程的简单方法。 使用 web worker 优化 CLS 要增强 CLS，您需要尽量减少网页布局中的意外变化。以下是一些需要考虑的策略： ：这会告诉浏览器媒体项目将占用多少空间，从而减少布局变化。 为任何媒体（视频、图像、GIF、信息图表等）使用 set size 属性尺寸 ：如果您要在页面上插入广告或嵌入内容，请确保为其预分配适当的空间量。 确保广告元素有预留空间 ：这样，即使元素加载时间更长，它们也不会将用户可能正在阅读或与之交互的内容下推。 在折叠下方添加新的 UI 元素 通过遵循这些指南并持续进行衡量，您可以显着优化网站的核心网络生命力。然而，有一个更好的方法来简化这个过程——使用 Loado，它是您优化 Core Web Vitals 的盟友。让我们深入了解 Loado 如何为您提供帮助。 利用 Loado：您优化核心 Web Vitals 的盟友 是一种用于网站的真实用户监控工具，可消除 Core Web Vitals 优化中的猜测。它直接从用户的浏览器收集 Core Web Vitals 指标，并使用直观的仪表板提供见解。 Loado 以下是您如何利用 Loado 的力量来优化您的 Core Web Vitals： ：Loado 提供有关网站性能的实时数据，为实际用户提供有关网站运行情况的最新见解。这种精细的数据使您能够在性能问题发生时识别并解决它们。 实时监控性能 ：与模拟用户交互的实验室数据不同，Loado 捕获真实世界的用户交互及其体验。这些实际数据可帮助您了解您的网站在真实条件下的表现，从而实现更准确的性能优化。 衡量真实用户体验 ：Loado 可让您快速发现网站性能中的瓶颈。您可以根据 LCP、FID 和 CLS 分析站点的每个页面的执行情况，并准确指出需要改进的地方。 识别瓶颈 ：使用 Loado，您可以跟踪您的 Core Web Vitals 指标如何随时间变化并衡量您实施的优化策略的影响。 比较和跟踪变化 ：Loado 将复杂的性能数据转换为易于理解的报告。这些见解使开发人员、产品经理和营销人员能够做出明智的决定，决定将精力集中在哪些方面，以对性能和 SEO 产生最显着的影响。 易于理解的报告 将 与我们讨论的分步优化指南一起使用可以加快您网站的优化过程，改善用户体验，并提高您的网站在搜索引擎上的可见度。 Loado 结论 优化您网站的 Core Web Vitals 不再是一种奢侈 - 在当今竞争激烈的数字空间中，它是一种必需品。这些优化不仅可以提升用户体验，还可以向 Google 和其他搜索引擎表明您的网站质量很高，从而有可能提高您的排名。 通过了解什么是 Core Web Vitals、它们为何重要、如何衡量和优化它们以及利用 Loado 等工具，您就可以很好地改变网站的性能。 请记住，优化不是一劳永逸的交易，而是一个持续的过程。持续监控您的指标，调整您的策略，并使您的网站性能保持在最佳状态。数字世界是你的征服！ 参考 谷歌开发者。 “核心网络生命力”。可在：   https://developers.google.com/search/blog/2020/05/evaluating-page-experience 谷歌开发者。 “网络生命力”。可在：   https://web.dev/vitals/ 谷歌开发者。 “最大内容绘画 (LCP)”。可在：   https://web.dev/lcp/ 谷歌开发者。 “首次输入延迟 (FID)”。可在：   https://web.dev/fid/ 谷歌开发者。 “累积布局偏移 (CLS)”。可在：   https://web.dev/cls/  Loado.dev。 “如何改进 Largest Contentful Paint 以获得更好的前端性能”。可在：   https://loado.dev/blog/lcp-optimize  Delaney, R. “如何优化 WordPress (CLS) 上的累积布局转换”。可在：   https://kinsta.com/blog/cumulative-layout-shift/#how-to-fix-cls-issues

Get Web Vitals Metrics from Real Users

該音頻是用故事的原始語言製作的！

优化 Core Web Vitals：分步指南

About Author

註釋

標籤

这篇文章刊登在

Related Stories

如何将您的工作流程提高 10 倍：17 个必备应用程序

Floki 的 Valhalla 成为印度环斯里兰卡赛事联合赞助商

架构师指南：构建 AI/ML 数据湖参考架构

使用这 18 种开发工具来提高你的工作效率 🚀🔥

如何将您的工作流程提高 10 倍：17 个必备应用程序

Floki 的 Valhalla 成为印度环斯里兰卡赛事联合赞助商

架构师指南：构建 AI/ML 数据湖参考架构

使用这 18 种开发工具来提高你的工作效率 🚀🔥

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps