Guides

2025 年如何轻松为你的 Shopify 店铺添加“懒加载”

· Updated
1 分钟阅读
2025 年如何轻松为你的 Shopify 店铺添加“懒加载”
目录

TL;DR

The easiest way to add lazy loading to Shopify in 2026 is to use native loading="lazy" on below-the-fold images, while keeping hero and LCP images eager with fetchpriority="high". Most modern themes already support this in some form, so check your theme before adding apps or scripts. For most stores, native lazy loading plus proper image sizing, width and height attributes, and testing in PageSpeed Insights is the best combination of speed, simplicity, and maintainability.

尽管全球网速已显著提升——截至 2024 年初，固定宽带平均达到 90.67 Mbps，移动网络平均达到 44.67 Mbps——但许多客户仍会因所在地区和网络状况不同而遇到较慢的连接。因此，确保你的产品页面能尽可能快地为所有客户加载至关重要。

一个简单的替代方案是在页面中加入懒加载。懒加载是一种将资源识别为非阻塞并仅在需要时才加载的策略，可缩短关键渲染路径并减少页面加载时间。它主要用于网站图片。

懒加载的好处

一方面，它能提升性能与速度。懒加载通过减少初始加载时间、改善最大内容绘制（LCP）等 Core Web Vitals 指标，并尽量降低服务器资源占用，从而直接影响店铺性能——这些都是 Google 在网站排名时会考虑的关键指标。另一方面，它还能让客户在“感知性能”的作用下觉得产品加载更快。

你可以通过以下方式为你的 Shopify 店铺添加懒加载。

使用原生 HTML 懒加载

目前所有主流浏览器（如 Chrome、Firefox、Safari 和 Edge）都已支持原生懒加载。最简单、也最现代的做法，是直接在图片标签上添加 loading=”lazy” 属性。操作方法如下：

  • 进入 Shopify 后台并选择 Online Store。
  • 选择 Themes 并选中你要编辑的主题。
  • 选择 Actions 并点击 Edit Code.
  • 在模板文件中找到图片标签（例如产品模板、集合页面等）。
  • 为首屏以下（below the fold）出现的图片，在图片标签中添加 loading=”lazy” 属性。
<img src="image.jpg" loading="lazy" alt="Product image" />

重要提示：不要对页面加载时很可能处于可视区域内的图片进行懒加载，尤其是 LCP（Largest Contentful Paint）图片，否则可能对性能产生负面影响。对于首屏图片，请改用 loading=”eager”。

添加懒加载脚本（旧版方法）

如果你需要兼容较老的浏览器，或希望采用 JavaScript 库的方式，仍然可以使用此方法。操作如下：

  • 进入 Shopify 后台并选择 Online Store。
  • 选择 Themes 并选中你要编辑的主题。
  • 选择 Actions 并点击 Edit Code.
  • 进入 Layouts 目录。
  • 点击 themes.liquid.
  • 然后在在线代码编辑器中，将以下代码粘贴到 </head> 标签之前。
{{ '//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js' | script_tag }}

保存更改。现在，带有 lazyload class 的图片将会以懒加载方式加载。

为特定图片添加懒加载

如果你不想对整个店铺启用该设置，也可以指定哪些图片需要懒加载。若要让某张图片懒加载，请添加 ‘lazyload’ class，并将 src 属性替换为 data-src. 

<!-- Before -->

<img src="image.jpg" />


<!-- After -->

<img class="lazyload" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src="image.jpg" />

在 JS 文档中添加懒加载

如果你将这段 Javascript 代码添加到店铺 Assets 目录下的 js.liquid 或 .js 文件中，网站就会启用懒加载。

$(document).ready(function(){$("img.lazyload").lazyload();});

使用 App

如果你不太熟悉编辑主题文件，又需要一个快速解决方案，可以看看提供此功能的应用。

Loadify

使用 Loadify，通过可自定义的加载屏幕与顺滑的页面过渡来提升你的 Shopify 店铺性能与用户体验。它可通过将图片与视频延后到需要时再加载来实现懒加载，并结合基于悬停的链接预测与 link prediction 来提升页面速度。

Tiny SEO Image optimize

TinyIMG 提供一整套页面速度与 SEO 优化工具，包括图片 ALT 文本、JSON-LD、404 页面管理、301 重定向、插件 SEO、富摘要（rich snippets）以及 SEO 图片压缩器。它还支持 AI 生成描述、照片尺寸调整、图片压缩、懒加载、站点地图创建，以及 ChatGPT AI 集成。

结论

懒加载是一种有效的技术：通过将图片延后到需要时再加载，来提升你的 Shopify 店铺性能与速度。图片懒加载是一项强大的技术，可通过减少初始页面加载时间与整体带宽使用来提升网站性能；随着现代浏览器与 JavaScript API 的普及，实现懒加载也变得前所未有地简单。

通过原生 HTML 属性（推荐的现代方式）或脚本来实现懒加载，你可以为用户带来更顺畅的浏览体验，尤其是对网速较慢的用户。这将提升客户满意度，并可能带来更高的转化率。为你的 Shopify 店铺添加懒加载是一个相当直接的过程，却能为店铺性能与客户体验带来显著收益，尤其是在加载速度持续成为电商成功关键因素的当下。

分享这篇文章

相关文章