如何优化实时页面中的图像交付和 LCP

了解图像传输和LCP

想要提高页面加载速度，了解图像交付和最大内容绘制 (LCP) 至关重要。

什么是图像传输？

图像传输是指旨在高效地优化、转换图像并将其传输给不同设备和网络条件下的最终用户的系统或基础设施。

图像传输系统通常包含以下几个方面：

• 用于全球缓存和快速交付的内容分发网络 (CDN)
• 实时图像处理（调整大小、压缩、格式转换）
• 设备和视口感知优化

图片通常占 页面总有效载荷大小的 50%–70%图片优化不当会导致以下问题：

• 页面加载速度慢
• 核心网络指标得分低
• 高带宽消耗
• 用户参与度降低
• 转化率较低

高效的图像传输确保用户仅下载其设备和视口所需的图像大小，而不会牺牲视觉质量。

什么是最大内容颜料（LCP）？

最大内容绘制 (LCP) 是谷歌核心网页指标之一。它衡量的是从页面导航到视口内最大可见元素完全渲染所需的时间。

在大多数情况下，LCP 元素为：

• 英雄横幅图片
• 一张大型产品图片
• 特色推广板块
• 一大段文本

由于 LCP 元素通常是图像，因此图像处理效率低下（例如文件大小过大、缺少预加载、请求延迟或缺乏压缩）将直接增加 LCP 时间。

优化图像传输在以下方面起着至关重要的作用：

• 提高感知加载速度
• 提升搜索排名
• 提高用户参与度
• 提高转化率

如何优化图像传输和 LCP

在 GemPages 中，优化图像加载和提升 LCP 主要有两种方法：一是调整元素级别的图像质量，二是配置页面级别的加载行为。下面我们将逐步介绍这两种方法。

1. 在编辑器中配置图像元素设置

GemPages 提供 品质设定 它允许您控制图像文件在实时页面上的渲染和显示方式。此设置是以下部分的一部分： 优化 LCP 元素设置面板内的部分。

要访问它：

• 在 GemPages 编辑器中打开您的页面。
• 选择与图像相关的元素
• 前往左侧边栏
• 向下滚动到 优化 LCP 部分

此配置直接影响浏览器请求的图像变体的大小，从而影响图像交付性能和 LCP。

请注意，“画质”设置仅在以下情况下有效：

• 图片必须托管在 Shopify CDN 上（即通过 Shopify 上传）。
• 所用元素必须是以下元素之一：
  • 图片
  • 产品图片
  • 图像比较

质量设置如何运作：

“质量”设置决定了将根据元素的视图框宽度（图像在页面布局中实际显示的宽度）请求的图像变体的宽度。

可用选项：

• 最好的： 系统加载原始上传的图像文件，不进行尺寸调整。 
• 高： 系统请求一个大小为的图像变体 1.5 × 视图框宽度.
• 适用介质： 系统请求一个尺寸正好为 1 × 视图框宽度.
• 自定义： 系统使用以下公式计算所需图像大小： 视图框宽度 × X% （用户自定义比例；默认建议比例为 100%）。

例如，您上传的图片宽度为 2000 像素，视图框宽度为 400 像素。请求的图片尺寸将根据所选选项而有所不同：

• 最佳 => 加载原始图像文件（2000像素）
• 高 => 加载宽度为 = 的图像变体 400×1.5 = 600px
• Medium：加载宽度为 = 的图像变体 400×1 = 400px
• 自定义：200% → 加载宽度为 = 的图像变体 400×2 = 800px

案例1： 在编辑器中，选择元素 图片在左侧边栏中，向下滚动到 优化LCP， 套 品质 = 最佳桌面端和移动端均适用：

实时页面：加载原始图像文件

我们测试了该页面的性能，结果如下：

图像传输 需要改进:

案例2： 在编辑器中，选择元素 图片在左侧边栏中，向下滚动到 优化LCP， 套 质量 = 中等桌面端和移动端均适用：

实时页面：加载一个宽度为 500px * 1 = 500px 的图片变体

然后我们测试该页面的性能，结果会更新为： 更高的性能点，并 图像传输效果得到提升：

我们可以从中学到什么？

加载原始图像文件可能会不必要地增加文件大小，尤其是在显示尺寸远小于上传图像尺寸的情况下。

将质量设置为合理的自定义比例，可确保图像尺寸与实际显示宽度相匹配。这可以减小文件大小，提高加载速度，并有助于优化 LCP，而不会影响视觉质量。

那个设定 优化 LCP 对以下方面也采用相同的配置方式： 产品图片 金益辉 图像比较 元素。

2. 其他配置

除了调整 优化 LCP 通过在元素级别进行设置，您可以控制初始页面渲染期间图像的加载方式，从而进一步改善图像交付和最大内容绘制 (LCP)。

这些优化措施侧重于 ，尤其是 金益辉 形成一种 浏览器会请求关键图像。

关闭“延迟加载图像”

什么是延迟加载？

延迟加载是一种延迟加载图片的技术，它会在图片接近进入用户视口（屏幕的可见区域）时才加载它们。浏览器不会在页面开始渲染时立即加载所有图片，而是仅在用户滚动页面时才加载图片。

👉 您可以在这篇文章中了解更多关于延迟加载的信息： 发布设置 – 延迟加载图像

禁用关键图像的延迟加载可确保：

• 立即请求初始视口内的图像
• 浏览器优先获取 LCP 图像
• 横幅广告或特色产品图片的渲染不会延迟

这一点尤为重要，因为在大多数电子商务页面或落地页中，LCP 元素通常是：

• 英雄横幅图片
• 一张大型产品图片
• 特色推广板块

如果此类图像是延迟加载的，浏览器会等待布局计算完成才发起请求，这会直接延迟 LCP。

启用“懒加载部分”

什么是延迟加载部分？

延迟加载部分是一种性能设置，它会延迟渲染初始视口之外（首屏下方）的整个部分。

该设置不是单独控制图像加载，而是在结构层面上工作——这意味着整个部分（包括其图像、文本、脚本和布局结构）将被延迟，直到用户滚动到附近时才会加载。

👉 您可以点击此处阅读我们帮助中心的文章了解更多信息： 启用延迟加载并预加载您的部分和图像

启用后：

• 初始视口之外的部分在首次加载期间不会被渲染或请求
• 初始渲染时的 DOM 大小减少（文档对象模型 - 表示浏览器在加载页面时构建的 HTML 元素结构树）。
• 网络请求减少，争夺带宽的竞争也随之减少。
• 主线程负载降低

这改进了：

• 首次上色时间 (FCP)可见内容更快显示
• LCP稳定性关键要素之间不存在资源竞争。
• 页面整体响应能力更平滑的初始交互

简单来说：

• 我们保持可见内容立即加载
• 我们暂且搁置下文的复杂性。

这种方法确保浏览器优先显示用户首先看到的内容，同时推迟显示并非立即需要的内容。

启用“预加载部分”

什么是预加载段？

预加载部分是一项性能设置，它指示浏览器优先加载初始视口内可见的部分。更多信息，请参阅： 页面优化功能

启用预加载部分后：

• 视口内的所有部分（不仅仅是第一个部分）都具有优先级。
• 浏览器会更早地开始获取其关键资源。
• 桌面端和移动端视口差异已得到妥善处理。

如果没有预加载逻辑，浏览器通常只会优先加载页面首屏的内容。其他仍然可见的内容可能会在布局和渲染步骤完成后才被请求加载。这会延迟图像加载，并直接影响页面内容处理 (LCP)。

这一点对于响应式布局尤其重要，因为：

• 桌面视口可能包含首屏上方 2-3 个部分。
• 移动端视口结构存在显著差异
• 预加载确保视口感知内容在各个断点处都被视为高优先级内容。

这种组合为何有效

目标并非一次性禁用或启用所有功能。性能优化只有在策略性地协调加载行为时才能取得最佳效果。

有效的方法包括：

• Do 不会 关键图像延迟加载 → 保护 LCP
• 延迟加载不可见部分 → 降低初始加载成本
• 预加载所有视口部分 → 使网络优先级与视觉优先级保持一致

这样可以确保用户首先看到的内容立即加载，而非关键内容则会等待加载。

我们使用以下设置测试了一个产品页面：

• 图片质量=最佳
• 产品列表包含产品图片元素，品质=最佳
• 图片延迟加载 is ON
• 懒加载部分 is OFF
• 预加载段 被禁用

→ 结果是：

如您所见，图像传输 需要改进因为图片下载时间较长：

然后，我们按照推荐的策略重新配置了页面：

• 配置 设置元素 编辑器中包含图像：图像、产品图像；质量设置为“中”
• 图片延迟加载 is OFF
• 懒加载部分 is ON
• 预加载段 is 启用

所有更改完成后，我们点击了按钮。 发布 在页面编辑器中更新实时页面。

然后，我们重新测试了该页面的性能。. 结果发生了变化： 此页面的性能已优化。

图像传输是 改善:

最后的外卖

性能优化并非只是打开或关闭某个设置。

关于：

• 提供尺寸合适的图片
• 立即加载可见内容
• 明智地推迟非关键内容的发布
• 根据用户实际看到的内容来确定资源优先级

当这些策略协同作用时，图像交付和 LCP 都能在各种设备上持续改进，尤其是在产品页面和着陆页等图像较多的页面上。