海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts

营销型WordPress外贸多语言独立站建设+谷歌SEO优化+谷歌关键字广告投放,就找WP花园!深圳公司,技术实力雄厚,用效果说话!详情咨询info@wordpresshy.com

Google 的使命是通过 Core Web Vitals 提高网络性能。 为什么? 因为谷歌的业务主要基于网络——缓慢的网站和网络应用程序将用户推回原生应用程序。

您在 Google 搜索结果中的位置很大程度上取决于搜索词的关键字、这些关键字在您的网页中的使用情况以及您网页的受欢迎程度(根据来自其他地方的链接的数量(和质量))。 从 2021 年 8 月起,Google 还将努力根据性能评估页面。

本文将向您展示如何针对 Google 的 Core Web Vitals 指标优化您的网站。

为什么选择核心 Web Vitals?

内容仍然至关重要。 但是,如果您比较两个具有相似文本和流行度的站点,则提供最佳网络体验的站点将在 Google 搜索结果中获得更高的优先级。

除了提高页面排名外,高性能网站也有资格加入移动搜索轮播。 这以前是为 Accelerated Mobile Pages (AMP) 保留的,它要求您将内容移植到单独的 Google 托管网站中。 AMP 引起了批评,特别是因为页面并不总是比优化良好的 WordPress 或静态网站快。 但是,这不再是必需的。

无论您选择什么,您的网站越快、响应速度越快,它在 Google 搜索结果中的排名就越高。

海外社媒SNS代运营Tiktok代运营公司

当您考虑到平均页面大约为 2 MB,发出超过 60 个 HTTP 请求,并且需要 16 秒才能在移动设备上完全呈现时,您会发现您的网站还有一些改进空间。 我们将向您展示实现这些改进的最佳方法。

谷歌的关键排名因素

在开始评估性能之前,需要检查四个关键的排名因素:

  1. HTTPS: HTTPS 必不可少。 您的站点是否在用户浏览器和网络服务器之间建立了安全连接?
  2. 移动友好: 您的网站必须在移动设备上运行良好。 您的网站可以在小屏幕设备上使用吗? 它是否在没有内容溢出的情况下呈现? 文字够大吗? 可点击区域是否足以用于触摸控制?
  3. 无插页式广告: 避免需要过多屏幕空间的侵入性插页式广告。 您的内容始终可读吗? 它是否被弹出式插页式广告或横幅部分遮挡? 您的广告或营销促销活动是否使网站难以使用?
  4. 安全浏览: 您的网站应该没有恶意软件、病毒、网络钓鱼、欺诈和其他诈骗。

一旦您满足这些要求,您的网站将进行性能评估。

您的网站速度越快,响应速度越快,它对抗竞争对手的机会就越大。 💪点击推文

Google 如何评估 Web 性能?

让您的网站快速加载、快速呈现并更快响应至关重要。 但是用户感觉很快吗?

浏览器 DevTools 等性能测量应用程序报告技术测量,例如:

  1. 封锁时间: 等待下载开始所花费的时间,通常是因为样式表和脚本等其他资产具有更高的优先级。
  2. DNS解析: 将主机名解析为 IP 地址以检索资产的时间。
  3. 连接时间: 初始化 TCP 连接的时间。
  4. 首字节时间 (TTFB): 请求和响应的第一个字节之间的总时间。
  5. 领取时间: 检索整个资产的时间。
  6. DOM加载时间: 下载和呈现 HTML 文档对象模型的时间。 这通常是分析或修改 DOM 的脚本可以可靠运行的第一个点。
  7. 页面加载时间: 下载页面和所有资产(如图像、样式表、脚本等)的时间。
  8. 总页面重量: 所有资产的总大小。 它通常以压缩(下载)大小和未压缩大小报告。
  9. DOM元素的数量: 页面上 HTML 元素的总数。 元素越多,页面处理的时间就越长。
  10. 首次内容绘制(FCP): 浏览器呈现第一个内容像素之前所用的时间。
  11. 第一次有意义的绘画(FMP): 主页面内容对用户可见之前所用的时间。
  12. 交互时间(TTI): 页面完全交互并能够可靠地响应用户输入之前所花费的时间。
  13. 第一个 CPU 空闲: CPU 呈现页面并运行所有初始化脚本以等待进一步输入的时间。
  14. CPU使用率: 呈现页面和响应用户输入时所需的处理活动。
  15. 每秒布局: 浏览器必须重新计算样式和页面布局的速率。

这些可用于确定特定的瓶颈,例如服务器负载、CMS 缓存、浏览器缓存、下载速度和 JavaScript 效率。 但是他们无法确定页面提供的用户体验是好是坏。 例如:

  • 应用程序可以快速下载并出现,但在第一次交互后变得无响应,因为它正在执行大量未优化的 JavaScript 代码。
  • 聊天应用程序可以在用户发布消息时不断下载数据。 尽管页面感觉响应,但评估工具可能会假定它从未完成加载。

Core Web Vitals 是 Google 试图解决这些困境的尝试。

什么是核心 Web 要素?

Google 的 Core Web Vitals (CWV) 是评估真实用户体验的三个性能指标:

  • 最大的内容绘制(LCP): 加载性能
  • 首次输入延迟 (FID): 交互性能
  • 累积布局偏移 (CLS): 视觉稳定性能

这项新的 Google 算法更新已于 2021 年 8 月底开始在全球范围内推出。 Core Web Vitals 指标主要影响移动搜索结果,但如果实验成功,桌面等效指标也会随之而来。

页面的 LCP、FID 和 CLS 分数基于过去 28 天通过 Chrome 浏览器匿名收集的真实用户指标。 这些测量值可能因用户的设备、连接和其他并发活动而异,因此计算的是第 75 个百分位数,而不是平均值。

换句话说,所有用户的指标从最好到最差排序,取四分之三点的数字。 因此,四分之三的站点访问者将体验到该级别或更好的性能。

任何在所有三个 Core Web Vitals 指标上都获得良好(绿色)分数的页面将在搜索结果中获得更高的排名,并被包含在 Google 新闻应用程序的“头条新闻”轮播中。

在以下部分中,我们将介绍用于计算指标的算法、可用于确定页面分数的工具、低分数的典型原因以及解决性能问题可采取的步骤。

最大的内容绘制 (LCP)

Largest Contentful Paint 衡量加载性能。 本质上,可用内容在页面上呈现的速度有多快?

LCP 分析最大图像或文本块在浏览器视口(首屏)中可见所需的时间。 在大多数情况下,最突出的项目是英雄图片、横幅、标题或大文本块。

以下任何元素都有资格进行最大内容绘制分析:

  • 图片 (<img> 元素)
  • 矢量图形内的图像(一个 <image> 嵌入到一个 <svg>)
  • 视频缩略图(海报属性设置为 <video> 元素)
  • 带有背景图像的元素(通常用 CSS 加载 background-image url() 财产)
  • 包含文本的块级元素

在页面加载的前 2.5 秒内完成最大内容绘制的页面被认为是好的(绿色)。 超过 4.0 秒的页面被认为是差的(红色):

最大的内容绘制。

最大的内容绘制。

最大的内容绘制分析工具

LCP 是最容易理解的 Core Web Vital 指标,但选择哪个元素进行分析可能并不明显。

开发者工具 灯塔 面板在基于 Chromium 的浏览器中提供,例如 Chrome、Edge、Brave、Opera 和 Vivaldi。 从浏览器菜单打开 DevTools——通常在 更多工具 > 开发者工具 或键盘快捷键 Ctrl | Cmd + Shift + i 或者 F12 – 然后导航到 灯塔 选项卡(旧版本可能会命名它 审计)。

WordPress花园建议你也读一下这篇文章  如何使用 WordPress Twitter 嵌入块

生成移动性能报告,然后检查结果 表现 部分。 最大内容绘制时间显示有一个可扩展的部分,用于标识所选元素:

DevTools Lighthouse 移动性能报告。

DevTools Lighthouse 移动性能报告。

如果您无法访问基于 Chromium 的浏览器,您可以在在线 PageSpeed Insights 和 web.dev Measure 工具中生成相同的信息:

PageSpeed Insights 最大的内容绘制分析。

PageSpeed Insights 最大的内容绘制分析。

开发者工具 表现 面板还显示 L​​CP 指示器。 要开始,请单击圆形 记录 图标,重新加载您的页面,然后单击 停止 按钮查看报告。 单击显示中的 LCP 图标 时间安排 部分以识别元素并查看统计摘要。

DevTools 性能面板 LCP 指示器。

DevTools 性能面板 LCP 指示器。

Web Vitals 扩展程序可用于 Google Chrome,但可以安装在大多数基于 Chromium 的浏览器上。 它为您访问的每个站点计算 Core Web Vitals 指标,其图标会根据结果变为绿色、橙色或红色。 您还可以单击扩展图标以查看更多 LCP 详细信息:

Web Vitals 扩展 LCP。

Web Vitals 扩展 LCP。

如果您的网站被添加为属性,Google 的 Search Console 现在会提供一个 Core Web Vitals 部分。 该报告说明了 CWV 指标如何随时间变化。 请注意,它不会识别特定的 LCP 指标,并且只有具有相当高流量的站点可用:

Google Search Console 核心 Web 要素

Google Search Console 核心 Web Vitals。

Chrome 用户体验报告允许您查询特定 URL 的真实使用统计数据,包括跨国家、连接和设备的 LCP。 这是 Google BigQuery 上的一个公共项目,因此您必须注册一个 Google Cloud Platform 帐户并提供帐单明细。 同样,该报告仅在 URL 具有相当高的流量时才有用。

最后,web-vitals JavaScript 库是一个 1 kB 的小脚本,可以为您的实时站点上的真实用户计算 LCP 和其他 Core Web Vital 指标。 由于它可以从 CDN 下载,因此您可以将以下脚本添加到您的 HTML 中 <head>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My page</title>
<script type="module">
import { getLCP } from 'https://unpkg.com/web-vitals?module';
getLCP(console.log);
</script>
<!-- rest of page -->

getLCP() 是一个异步函数,在计算 LCP 值时传递一个回调函数(尽管如果页面在后台选项卡中加载,它可能永远不会触发)。 回调函数被传递一个包含以下内容的对象:

  • name 指标的名称(在本例中为“LCP”)
  • value 计算值
  • id 表示当前页面的此指标的唯一 ID
  • delta 当前值与上次报告值之间的差值
  • entries 值计算中使用的条目数组

上面的脚本将对象输出到控制台,尽管将数据发送到服务器或 Google Analytics 进行进一步分析更为实用。

最大内容油漆得分不佳的常见原因

糟糕的 LCP 分数通常是由于页面加载缓慢导致最大块无法快速出现:

  • 服务器响应可能很慢,因为它过载或渲染页面的工作量太大。 这可能不一定是您网站的错——如果您使用的是共享托管服务,则可能是由于服务器限制。
  • 如果在主要内容上方的 HTML 中引用了阻止渲染的 CSS 和 JavaScript,则它们可能会延迟页面加载。
  • 其他资源(如大图像和视频)会减少可用带宽并需要更长的时间来渲染。
  • 在客户端而不是服务器上生成的页面内容也需要更长的时间才能出现。

如何提高最大的内容绘制分数

彻底的审计可以识别加载问题,但通常是减少发送到浏览器的数据量的问题。 以下提示将有助于获得更健康的 LCP 分数:

  1. 升级您的服务器和/或托管服务。 确保下载速度即使在高使用率时也能保持快速。
  2. 激活服务器压缩和 HTTP/2+。 没有理由不这样做!
  3. 减少服务器工作量….

营销型WordPress外贸多语言独立站建设+谷歌SEO优化+谷歌关键字广告投放,就找WP花园!深圳公司,技术实力雄厚,用效果说话!详情咨询info@wordpresshy.com

海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts