Preload LCP 图片选项说明
预加载 LCP 图像
最大内容绘制 (LCP) 是衡量网站用户体验的三个核心 Web 指标之一。LCP 测量网页上最大的图像、文本块或视频对用户可见所需的时间。快速的 LCP 分数对于良好的用户体验至关重要，因为它向用户表明页面加载迅速，并能提供良好的第一印象。缓慢的 LCP 可能导致用户离开您的网站。
为什么预加载 LCP 图像很重要？
有时，浏览器不会立即优先加载 LCP 元素，尤其是当它是一个不在初始 HTML 代码中的图像（例如，通过 CSS 加载）时。这可能会延迟 LCP 并损害您网站的性能得分。
通过预加载 LCP 图像，您是在告诉浏览器将此特定图像作为最高优先级下载。这确保了页面上最重要的图像尽可能快地加载，从而可以显著改善您的 LCP 分数和整体页面速度。
如何使用此功能
首先，您需要前往主题设置 → 性能 → LCP 并启用预加载 LCP 图像选项。此选项允许您自动或手动为您的页面指定 LCP 图像：
- 自动模式（推荐）： 默认情况下，主题将尝试自动检测每个页面上的最大图像并应用预加载属性。这是无需任何手动操作即可改善 LCP 的最简单方法。要自动检测图像，请导航到您网站的页面，然后点击管理栏中的“查找 LCP 图像”按钮。找到图像后，请按照相应下拉菜单中出现的说明进行操作。
- 手动模式： 如果您的图像未被自动检测到，或者您想要更改它，您可以使用页面 metaboxes 手动设置。您可以在页面编辑器的屏幕底部找到一个名为页面设置（来自主题的自定义 metabox） → 预加载图像的部分。此部分包含图像上传选项、其大小及其类型。
如果未自动找到图像该怎么办？
有时，当您使用自动检测时，可能找不到 LCP 图像。这通常发生在页面上的最大图像在网站加载的最初几秒内不可见的情况下。这可能是由于以下几个原因造成的：
- 图像具有初始值为
opacity: 0的动画。 - 它位于选项卡式部分中未打开的选项卡内。
- 它在轮播图的第二张幻灯片上。
- 它隐藏在关闭的离屏侧边栏中。
如果发生这种情况，请尝试使图像可见——例如，通过暂时禁用其动画——然后重新运行检测。如果这不起作用，最可靠的方法是使用页面的 metaboxes 手动设置图像，如上所述。
为什么我的页面上缺少“查找 LCP 图像”按钮？
默认情况下，您只能在“页面”上设置 LCP 图像。在所有其他帖子类型上，“查找 LCP 图像”按钮和相应的 metaboxes 将不存在。这里的“页面”一词并非指您网站上的所有页面；它特指名为“页面”的独特 WordPress 帖子类型，该类型可以拥有自己独特的自定义布局和内容。
对于像单个产品、单个文章、商店以及其他具有可预测布局的页面，您无需手动设置 LCP 图像。WordPress 被设计为默认情况下能正确识别正确的图像。例如：在单个文章页面上，LCP 图像将始终是页面标题背景（如果存在）或文章缩略图；在单个产品页面上，它是产品图库中的第一张也是主要图像。在商店页面上，它将是页面标题背景（如果存在）或产品网格中的第一个产品，依此类推。
如何为移动设备设置 LCP 图像？
您可能需要为桌面端和移动端分别设置 LCP 图像，因为页面上最大和最重要的元素可能会因设备而异。在桌面上，一个大的、全宽的英雄图像可能是您的 LCP 元素。然而，在移动设备上，此图像可能被隐藏或缩小，而另一个元素——如突出的标题或较小的图像——可能成为最大的内容绘制。通过为移动端指定不同的 LCP 图像，您可以确保在每个设备上优先预加载正确的、最重要的元素，这有助于为所有用户优化您网站的性能和核心 Web 指标得分。
在大多数情况下，桌面图像也适用于移动设备，但如果您想微调页面，您需要使用内置的浏览器工具（如 Chrome DevTools）将浏览器窗口缩小到移动设备的尺寸。然后，点击按钮搜索 LCP 图像。需要强调的是，将浏览器屏幕调整为移动设备的尺寸是正确识别移动图像的关键步骤。或者，可以在登录网站后从实际的移动设备上识别移动图像，或者通过打开页面 metabox 部分中的移动端选项卡来手动设置图像。
在图像类型选项中选择什么值？
在网站上显示图像有两种不同的方式：使用<img> 标签和 CSS 中的background-image。每种方式都有其特定的用途和对性能的影响。关键区别在于图像被视为内容还是装饰。例如，通过“单个图像”元素在页面上显示的图像将使用 <img> 标签位于页面内容中，而在设计选项（WPB）或样式 → 背景（Elementor）部分中设置为行背景的图像将被视为使用 CSS 设置的装饰性 background-image。
对于 LCP 图像选项，如果您使用自动图像检测，图像类型将为您确定。但是，当您手动设置图像时，您需要根据图像在页面上的显示方式自行决定其类型：是作为必要的内容（<img> 标签）还是作为装饰性的背景（CSS 中的 background-image）。这个技术步骤对于包含来自 srcsets 的图像并最大化您网站的性能至关重要。
