spot_img
HomeDTC品牌出海独立站教程立即改善您的核心 Web Vitals 的 5 种方法

立即改善您的核心 Web Vitals 的 5 种方法

JasperAI 10000字免费额度试用
改善核心网络生命力——谷歌页面速度洞察报告

那么这意味着什么,您如何准备呢? 在这篇文章中,我们将向您介绍 Core Web Vitals,然后提供您可以实施的五个步骤,以确保您的网站符合此算法更新:

  1. 减少 Javascript 执行
  2. 实现延迟加载
  3. 优化和压缩图像
  4. 为图像和嵌入提供适当的尺寸
  5. 改善服务器响应时间

什么是核心网络生命力?

Core Web Vitals 是评估网站用户体验的页面体验信号。 简而言之,这些信号衡量用户与您的网站互动的速度以及他们将收到什么样的结果。 这些信号还衡量用户浏览网站的难易程度。

如果您改善用户体验并使您的网站总体上变得更好,那么您的页面体验分数就会越高。

改善核心网络生命力

图片来源

有 3 个 Core Web Vitals 指标:

  1. 最大内容绘画 (LCP) 测量最大元素(图像、视频、动画、文本等)加载和出现在网站上的速度。
  2. 累积布局偏移 (CLS) 确保网站的页面没有意外的、令人困惑的动作,这些动作可能会干扰用户使用内容。
  3. 首次输入延迟 (FID) 显示用户首次与网站页面交互时的响应速度。 它还衡量网站浏览器为用户提供结果的速度。

下图显示了指示核心 Web Vitals 得分的时间范围——好、需要改进和差。 下一段中解释的技巧将帮助网站所有者将他们的核心网络生命力评分从差提高到好。

改进核心 Web Vitals——兼容的开发人员工具列表

图片来源

现在,让我们继续提示!

改善您的 Core Web Vitals 的 5 个技巧

要了解您的网站在核心网络生命力方面的表现如何,您应该对网站性能分析进行快速测试。 为此,您可以使用 Google 的工具,例如 Search Console 和 Page Speed Insights,以及其他工具,例如 GTmetrix。

如果您使用不同的工具运行性能报告,比较结果并更有效地改进您的页面是值得的。

提高核心网络活力 LCP FID CLS

图片来源

1.减少JavaScript(JS)执行

如果您的报告显示 FID 分数很低,则意味着您的页面与用户的交互时间超过 300 毫秒。 你应该考虑减少和优化你的 JS 执行。 这意味着您的浏览器执行 JS 代码和页面之间的时间减少了。

贷款申请在线申请,高额度,快速下款!

使用尽可能少的内存也很重要。 为什么? 每当您网站的代码请求浏览器时,它都会保留一个新内存来停止 JavaScript,并可能减慢页面速度。

据谷歌称,减少执行的方法之一是推迟未使用的 JS。

为了查看您的网站是否有未使用的 JavaScript:

首先,转到您的网站并按鼠标右键单击并选择“检查”。

改善核心网络生命力——检查元素截图
  • 然后单击“来源”并在底部寻找三个点。 你应该添加一个工具——’Coverage’。 添加后,按加载功能。
提高核心网络生命力——覆盖率工具的屏幕截图 "检查元素" 窗户

加载完成后,您会看到您的网页上有多少 JavaScript 未被使用。

提高核心网络生命力——减少 JavaScript

当您意识到未使用的 JS 的数量时,您应该开始减少它。 您可以做到这一点的方法之一是代码拆分。 这意味着将一个 JavaScript 包(将文件组合成一个包以避免加载页面所需的过多 HTTP 请求)分成更小的部分。

2.实现懒加载

如果您在您的网站上显示图片,那么实施延迟加载至关重要,这样您网站的用户体验和核心网络生命力得分就不会受到损害。 延迟加载允许在用户向下滚动页面的确切时刻加载图像,而不会影响网站的加载速度并使您的 LCP 分数达到一流水平。

延迟加载的其他好​​处是:

  • 您网站的性能将得到改善。
  • 它将限制带宽使用。
  • 它可以改善您网站的搜索引擎优化。
  • 它将使您的访问者留在页面上并降低跳出率。

延迟加载会让您的网站受益吗? 根据 HubSpot 的说法,资源表明对于那些包含许多图像、动画或视频(又名重元素)的页面,延迟加载将被认为是必须的。 但是,对于哪些页面应该实现延迟加载并没有固定的规则。 所以,如果你的站点的 LCP 分数很低,你应该考虑尝试延迟加载,然后比较实施前后的结果。

延迟加载动画

3.优化压缩图片

听起来很明显,你不觉得吗? 然而,对于许多网站来说,最大的元素是图像。 因此,优化它们至关重要,因为它可以使您的页面显着变轻,从而提高加载速度、LCP 分数、用户体验以及您在搜索引擎上的排名。

您可以通过使用 tiny jpg 压缩图像来减小整体页面大小 并改善您的 LCP 结果。 您可能认为图像压缩会破坏质量或分辨率。 好吧,实际上,只有当您放大或图像以错误的格式保存时,您才能看到差异。 始终尝试对风景图像使用 jpg 格式,对图形使用 png 格式。 您还可以使用 JPEG 2000、JPEG XR 或 WebP 等下一代格式,但我们建议您事先进行一些研究。

除了压缩之外,另一件重要的事情是为图像激活内容分发网络(CDN)。 CDN 是一个遍布全球的服务器网络,用于存储您的内容。 由于服务器分布在许多不同的位置,因此可以从离用户最近的服务器更快地提供图像。

WordPress建站服务
改善核心网络生命力——原始图像与压缩图像

4. 为图像和嵌入提供适当的尺寸

CLS 分数超过 0.1 表示较差,通常是由图像、广告或嵌入 CSS 文件中没有尺寸的元素引起的。 如果您想提高 CLS 分数,维度很重要。 设置适当的宽度和高度的重要性有助于浏览器在加载元素时在页面中分配正确的空间量。

例如,如果图像的尺寸不合适,它通常会出现在页面的后面。 当用户使用内容时,它可能会突然掉落,因为没有适当尺寸的图像无法足够快地加载。 在这种情况下,浏览器不了解该特定图像需要多少空间。

所以,为了避免这种图像偏移,你可以提前预留一个应该显示图像的空间。 如果在屏幕外加载,这种操作将避免布局偏移。

确保您还为嵌入设置了适当的尺寸,例如将来自 YouTube 的视频插入您的网站时。 默认情况下,视频从后端看可能没问题,但在前端可能看起来超大或一团糟。 如果是这种情况,则尺寸存在问题,您应该更改它们。

您可以在下面看到有关查找 Youtube 视频嵌入的分步指南。 了解如何更改尺寸并确保所选视频在您的网站上看起来很棒。

如何调整要显示的 YouTube 视频的大小:

在 Youtube 上打开您要添加到网站的视频。 然后,找到共享按钮并选择选项 <> 嵌入。

提高核心网络活力——如何调整带有嵌入链接的 YouTube 视频的大小

之后,将显示所有信息,包括尺寸。 现在,您需要将代码复制到您网站的后端并将其更改为适合您网站的适当宽度和高度。

提高核心网络生命力——如何编辑 HTML 代码以调整 youtube 图像的大小

5. 改善服务器响应时间

谷歌表示:“浏览器从服务器接收内容所需的时间越长,在屏幕上呈现任何内容所需的时间就越长。 更快的服务器响应时间直接改善了每一个页面加载指标,包括 LCP。”

最重要的是,较长的服务器响应时间不仅会对您的搜索引擎优化产生负面影响,还会对用户体验产生负面影响。

为了测量服务器响应时间,请使用首字节时间 (TTFB),它标识用户的 Web 浏览器接收页面内容的第一个字节的时间。

WordPress divi主题

但是,在开始之前,请收集有关服务器当前性能的数据以了解您的表现。 完成报告后,以下提示将对您有所帮助:

  • 检查您的网络托管速度有多快。
  • 为您的站点使用 CDN。
  • 检查您的插件。 为什么? 这是因为每个插件都会为您的页面带来额外的权重,这会对您网站的性能产生负面影响。 只留下必要的。

谷歌建议 服务器的响应时间低于 600 毫秒。

提高核心网络生命力——计算机和服务器

使用这 5 个技巧改善您的核心网络生命力

尽管 Core Web Vitals 将在近三个月内推出,但重要的是您已经在努力改进它们。 由于生命体征报告可用,请使用上述工具并比较您网站在修复错误前后的结果。

请记住,您网站的后端与前端协同工作,因此请确保优化后端以在加载速度、视觉稳定性和交互性方面提供最佳用户体验。 此外,如果您没有忘记 Google 现有的搜索信号——移动友好性、安全浏览、HTTPS、侵入性插页式指南,这将会有所帮助。

GTmetrix 指出:“作为主要的后端优化,减少 TTFB 可以补充您的前端开发,从而显着提高性能。”

wordpress建站公司

关于作者

Agnese Repule 是 Setupad 的一位充满激情的内容营销专家,Setupad 是一个面向出版商的货币化平台。 她通常涵盖有关程序化广告、货币化、SEO 和内容营销的主题。 她的另一个爱好是艺术——尤其是绘画。 你可以关注她 推特 或领英。


5分钟生成10篇英文软文article forge软件试用

siteground 小红书电商教程
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES
spot_img