如何测量和优化最大的内容绘画以获得卓越的用户体验

已发表: 2022-02-16

谈到在线成功，有很多方法可以实现。 优化的用户体验就是这样一种方式。 谷歌将使用不同的用户体验和相关指标来对网站进行 SEO 排名。 它继续生产多种工具来提高 Web 性能。 我们将在下面介绍 Google 希望改善用户体验的一些方法。

什么是 Google Core Web Vitals？

在最近尝试修改衡量标准并理解什么是体面的用户体验时，谷歌调整了页面的指标。 这些标准化指标被称为核心网络生命力，有助于对您网站上的真实用户专业知识进行评级。

什么是最大含量的油漆？

首先，让我们看一下最大内容绘制（LCP）。 它是核心网络生命体征指标之一。 它测量视口中最大内容组件的加载时间，因为它变得可见。 TTFB 和 First Contentful Paint 等替代指标共同促进了实时页面体验，一旦页面对用户变得“有意义”，它们就不会出现。

通常，除非页面上最重要的组件完全可见，否则页面可能无法为用户提供足够的上下文。 因此，LCP 代表了用户的期望。 作为一项核心 Web Vitals 指标，LCP 占性能得分的 25%，这就是为什么它是最重要的优化指标之一。

检查 LCP 时间

根据谷歌，最大内容绘制的部件类别是：

  • <img> 元素
  • <svg> 元素内的 <image> 元素
  • <video> 元素（使用海报图片）
  • 具有通过 URL 函数加载的背景图像的元素
  • 由文本节点和/或其他内联文本元素组成的块级元素

LCP 如何测量？

当然，有多种方法可以测量网页的 LCP。 最简单的方法是使用包括 Lighthouse、PageSpeed Insights、Search Console 以及 Chrome 用户体验报告在内的可用平台之一。 例如，Google PageSpeed Insights 在其报告中指出了用于计算 LCP 的组件。

什么是好的 LCP？

为了提供体面的用户专业知识，您必须尝试在您的站点上保持 2.5 秒或更低的 LCP。 您的大部分页面加载应该发生在此阈值以下。 现在我们都知道 LCP 是什么以及我们的目标应该是什么，让我们来看看增强 LCP 的方法。

（请添加名为 Majority of pages must load at an LCP of 2.5 seconds or lower.jpg 的图片）

如何优化最大内容绘制 (LCP)

完全减少 LCP 的基础系统是减少下载到用户设备上的数据，减少管理内容所需的时间，并确保无缝的用户体验。

优化你的图片

在大多数网站上，首屏内容通常包含 LCP 所需的超大图像。 它可能是英雄形象、轮播或横幅。 您必须优化这些图片以获得更强大的 LCP。

要优化您的图片，您必须使用 ImageKit.io 等第三方图片 CDN。 使用第三方图片 CDN 的好处是，您只需针对您的实际业务，将图片优化留给图片 CDN。

响应式图片的实时转换

谷歌几乎对所有网站都使用移动优先划分。 这就是为什么有必要针对桌面移动设备优化 LCP。 每个图像都必须根据布局的需求缩小。

例如，您希望商品详情页面上的图片尺寸较小，而产品详情页面上的图片尺寸较大。 这种调整大小可确保您似乎没有使用超出该确切页面所需的任何额外字节。

缓存图片并提高交货时间

图片 CDN 使用内容交付网络 (CDN) 来交付照片。 使用 CDN 可确保图片从附近位置加载，而不是从可能位于世界另一端的服务器加载。

预加载重要资源

在某些情况下，如果影响 LCP，浏览器可能不会加载视觉对象。 例如，折叠顶部的横幅图像可以被视为 CSS 文件中的背景图像。 由于浏览器在下载 CSS 文件之前不会知道图像的相关信息，因此它不会加载它。

现在，如果您问“如何预加载最大的 Contentful 绘画图像？”，答案很简单。 您可以通过使用带有 rel=“preload”属性的标签将它们预加载到超文本标记语言文档的顶部。

虽然您可以在文档中预加载多个资源，但您必须将其限制为首屏图片或视频、页面范围的字体文件或基本的 CSS 和 JS 文件。

减少服务器响应时间

如果您的服务器加载时间比正常情况要长，那么在屏幕上加载页面所需的时间就会增加。 它与 LCP 一起对每个页面速度指标产生负面影响。 为了提高您的服务器响应时间，您可以：

  • 分析和优化您的服务器
  • 使用内容交付网络
  • 预连接到第三方来源
  • 使用 service worker 提供内容缓存优先
  • 压缩文本文件

改善客户端设备响应时间

如果您的页面需要很长时间才能加载，它可能会让潜在客户感到反感。 幸运的是，您可以采取一些措施来确保其最终正确加载并创建无缝的用户体验。 这包括：

  • 内联基本 CSS
  • 缩小并压制内容
  • 针对客户端渲染优化 LCP
  • 使用服务器端渲染
  • 使用预渲染

LCP 已成为与用户体验和旅程密切相关的重要搜索排名因素。 因此，如果您经营网络业务，则必须优化这些组件以确保努力取得成功。

作者简介

Ghia Marnewick 是一名作家、社交媒体经理和数字经理。 她为 Aumcore 撰写内容，并热衷于寻找与世界共享信息的新方式。