AMZ123跨境卖家导航
拖动LOGO到书签栏,立即收藏AMZ123
首页跨境头条文章详情

Shopify速度优化全流程指导

13500
2019-07-30 20:06
2019-07-30 20:06
13500

速度在任何网站中都扮演着重要的角色。你的shopify网店加载的越快,跳出率就越低。如果你shopify网店很快,你就有更有机会在google上取得好的排名,因此对于shopify速度优化也显得非常重要。

BBC 发现其网站的加载时间每增加一秒,便会多失去 10% 的用户。

这篇文章将详细介绍优化Shopify网店所使用的所有方法,并创建一个新的Shopify店铺来展示如何准确地优化Shopify店铺以提高速度。我们开始吧!


速度测试工具



我们需要一些工具来测试你网店的速度,通过下面的两个在线工具,可以先测试一下你网店的速度如何。

  • Google PageSpeed Insights

  • Gtmetrix

提示:这些步骤可能需要一些技术知识,如HTML、CSS和JavaScript。

 

在开始优化Shopify店铺之前,请确保下载之前Shopify模板备份起来。对于如何修改shopify CSS请参考前面的文章。


shopify后台 > 在线商店 > 模板 > 编辑 > 下载模板文件


你的备份shopify会把它发送到与你的邮件中。



一、压缩图片




拉低网店速度和降低转换率的一个主要关键因素是图片


要压缩图片,有两个办法

  1. 使用压缩图片Shopify App

  2. 可以使用在线压缩工具,你需要下载图片并上传到网站,压缩处理后,你需要重新上传图片并替换为未压缩的图片,我通常使用TinyPng,这是我最喜欢的图片优化工具之一。


二、减少浏览器请求次数



下面将详细介绍一下如何减少浏览器请求的数量。

1、进入Shopify 后台 > 模板 > 编辑 > 编辑代码

 

2、创建一个 app.js 文件

Assets > 新增 asset > 创建空白文件 > 选择.js > 输入 app

 

3、将Assets目录中的所有javascript文件内容粘贴到app.js文件中

 

4、在theme.liquid中添加 app.js

Layout > theme.liquid

你需要在</head>标签之前添加app.js引用,并且把原来整合进app.js的其他引用都删除掉。

 


三、删除没有必要的Shopify Apps


大部分Shopify网店都安装了Shopify Apps,一些Shopify 网店的店主不知道某些Shopify app可能会影响您的网店加载速度,你可能已经删除了所有不必要的apps,但您还需要删除Shopify apps在你的模板遗留下来的代码。因为有一些Shopify app在安装时会自动将代码插入到模板中,卸载的时候并不会自动清理。

四、仅加载可见的图片



在我们的店铺网页,可能会比较长,分成好几屏,当用户看到第一屏的时候,那么我们只需要把第一屏所需要的图片加载出来,其他不可见的屏,当用户往下滚动时,我们再加载,这样会极高的提高加载速度。为了解决这个问题,我们有一种称为“延迟加载”的技术,用户将向下滚动时才会加载图像,这里有该技术的演示,也可以在其他一些媒体网站上看到此技术。

有一些Shopify模板已经在它的模板中实现了延迟加载。以后有机会给大家推荐一些比较好的模板。

这步操作需要技术人员协助你来完成,它涉及到了Html5 、CSS3 和 liquid, 如果处理不好,可能导致你的模板出bug。

五、预加载web字体



这个技术将预加载字体,不要等到浏览器有需要的时候才会下载字体,这将降低加载速度。通常模板使用的都是Google字体,我们只需如下就行了。

https://fonts.googleapis.com/css?family=Lobster&display=swap

只需在URL末尾添加&display=swap

六、预加载js和css



这个和预加载Web字体功能相同,这个用于JavaScript和CSS文件。

预加载CSS

<link rel="preload" href="{{'theme.scss.css' | asset_url }}" as="style" type="text/css" >

预加载JS

<link rel="preload" href="{{'app.js' | asset_url }}" as="script" type="text/javascript" >

 

希望通过以上的办法能够让你的shopify网店速度得到改善,转化率大大增加!


免责声明
本文链接:
本文经作者许可发布在AMZ123跨境头条,如有疑问,请联系客服。
最新热门报告作者标签
美国农业部下调2025年农业收入预期,疲软态势将持续至2026年
美国农业部最新的农业收入预测强化了美国农业面临的艰难现实。
商店页面评分对投放影响
Google Play 页面评分,为什么很重要?很多团队把 Google Play 的评分当成“面子工程”:
Shopee发布紧急通知提醒;越南电商订单剧增,快递不堪重负;金华2025年进出口额首超万亿元
01 Shopee发布紧急通知提醒据外媒消息,面对猖獗的高科技诈骗,Shopee 正式发布紧急警告,提醒用户注意安全“红线”。第一条警告直接针对虚假信息和电子邮件的复杂程度。诈骗分子现在经常冒充 Shopee 发送拼写错误的通知、索取个人信息或提供诱人的工作机会。为了避免落入此类陷阱,用户必须记住,所有合法通知只会出现在 Shopee 应用或经过验证的社交媒体账户(带有蓝色勾号的账户)上。一条黄金法则是:绝对不要点击任何来路不明的链接或下载任何来自未知来源的附件,并立即向客服举报任何异常活动。关于账户安全,Shopee 特别强调了“重置密码”链接的风险。
长江和记:警告马士基
围绕巴拿马运河两端关键集装箱码头的运营权争议持续发酵。2月12日,长江和记实业发布最新声明称,已依据投资保护条约向巴拿马共和国正式发出争端通知并邀请磋商,同时警告马士基旗下APM Terminals(APMT),未经同意接管相关港口将引发法律行动。长和强调,两座码头能否持续运营,“完全取决于巴拿马最高法院和巴拿马政府的行动”,已不在公司控制范围之内。长江和记12日的一份声明称,其正在采取进一步措施,以保障其在这两处巴拿马港口的“权益”。声明称,和记港口集团有限公司已通知马士基航运集团,在未经长江和记同意下,任何由马士基航运集团或其任何联属公司,在任何时期、以任何方式接管这两处港口的管理或运营,将引发“法律行动”。
靠一个睡袋,一年卖出3300万美金?从母婴爆品到品牌闭环,它做对了什么?
Kyte Baby的案例说明,真正有生命力的品牌,并不是靠概念创新突围,而是通过对真实需求的理解建立连接。
《非洲B2C电商与支付2026》报告:即时支付与移动基础设施驱动万亿美元数字商业新时代
最新报告显示非洲电商规模将于2033年突破万亿美元,即时支付与移动金融成为核心驱动力,智能手机普及和数字基础设施升级正重塑大陆商业格局。随着移动互联网、金融科技与即时支付体系的快速发展,非洲数字商业正在进入结构性扩张阶段。最新发布的《Africa B2C E-Commerce &amp; Payments 2026》报告指出,非洲电商与数字支付生态正在经历深刻转型,移动优先与实时支付正成为推动市场增长的关键力量。非洲电商迈向万亿美元规模报告预测,非洲电子商务市场规模将从 2024年的3170亿美元增长至2033年超过1万亿美元,进入长期结构性增长阶段。
美国农业部下调2025年农业收入预期,疲软态势将持续至2026年
美国农业部最新的农业收入预测强化了美国农业面临的艰难现实。
《中企出海美国季度研究报告》PDF下载
近年来,随着全球化进程的深化与中国经济实力的持续提升,越来越多的中国企业将目光投向海外市场。美国作为全球最大经济体创新高地和消费市场,始终是中企出海战略中的关键目标。从制造业到科技领域,从消费品到金融服务,中国企业的国际化步伐不断加快,既彰显了“中国智造”的全球竞争力,也面临复杂的政策环境、文化差异与市场竞争等挑战。
《跨境蓝海拉美市场洞察 - 墨西哥篇》PDF下载
墨西哥位于北美大陆南部,北邻美国,政局稳定,法律健全,是拉丁美洲地区第一贸易大国和重要的外国直接投资目的地。墨西哥拥有 1.28亿人口,是仅次于巴西的拉美第二大经济体,同时也是拉美第三大线上零售市场,无论是互联网的普及率还是使用率在拉美市场都处于佼佼者。
《东南亚出海合规实操指南手册》PDF下载
近年来,东南亚电商市场以迅猛的增长态势成为全球贸易的新蓝海,印尼马来西亚、新加坡等六国凭借庞大的人口基数、持续提升的互联网渗透率吸引着无数中国卖家前来布局。
《2025中国新能源汽车产业链出海洞察报告 - 匈牙利篇》PDF下载
中国汽车市场新能源汽车渗透率已达50%,各主机厂纷纷开启价格战,让利消费者,并承担相应的利润损失,在中国新能源汽车市场逐渐成为红海的的大背景下,海逐渐成为各主机厂主动或被动的选择。
《2024哥伦比亚电商市场概览报告》PDF下载
哥伦比亚位于南美洲西北部,是拉丁美洲第三大国家,北部是加勒比海,东部与委内瑞拉接壤,东南方是巴西,南方是秘鲁和厄瓜多尔,西部是巴拿马和太平洋。

《2026独立站卖家日历》PDF下载
2026 独立站卖家日历 2026 全年营销节奏
《2025中东北非消费者数字经济报告》PDF下载
2025年的报告不仅持续跟踪数字经济的同比增长,也更深入:我们探讨了新兴技术对下一波数字化转型的影响力,还首次将中东北非国家及地区的消费者行为偏好与全球其他市场进行对比。
《2025年终大促旺季AI消费趋势报告》PDF下载
随着人工智能 AI的爆发式增长,如 ChatGPT、Perplexity 和Llama等交互式聊天机器人正在渐渐成为大众研究和推荐的首选工具。根据 AI智能体功能的更新迭代,目前已经可以完成网购下单、预订服务、及交易支付,现已被统称为 AI智能体电商Agentic Commerce,且其采用率正呈现出滚雪球式的增长。
跨境学院
跨境电商大小事,尽在跨境学院。
欧洲电商资讯
AMZ123旗下欧洲跨境电商新闻栏目,专注欧洲跨境电商热点资讯,为广大卖家提供欧洲跨境电商最新动态、最热新闻。
AMZ123选品观察员
选品推荐及选品技巧分享。
AMZ123会员
「AMZ123会员」为出海者推出的一站式私享服务
跨境电商赢商荟
跨境电商行业唯一一家一年365天不断更的媒体!
侃侃跨境那些事儿
不侃废话,挣钱要紧!
北美电商资讯
AMZ123旗下北美跨境电商新闻栏目,专注北美跨境电商热点资讯,为广大卖家提供北美跨境电商最新动态、最热新闻。
亿邦动力网
消除一切电商知识鸿沟,每日发布独家重磅新闻。
首页
跨境头条
文章详情
Shopify速度优化全流程指导
跨境电商实战研究
2019-07-30 20:06
13500

速度在任何网站中都扮演着重要的角色。你的shopify网店加载的越快,跳出率就越低。如果你shopify网店很快,你就有更有机会在google上取得好的排名,因此对于shopify速度优化也显得非常重要。

BBC 发现其网站的加载时间每增加一秒,便会多失去 10% 的用户。

这篇文章将详细介绍优化Shopify网店所使用的所有方法,并创建一个新的Shopify店铺来展示如何准确地优化Shopify店铺以提高速度。我们开始吧!


速度测试工具



我们需要一些工具来测试你网店的速度,通过下面的两个在线工具,可以先测试一下你网店的速度如何。

  • Google PageSpeed Insights

  • Gtmetrix

提示:这些步骤可能需要一些技术知识,如HTML、CSS和JavaScript。

 

在开始优化Shopify店铺之前,请确保下载之前Shopify模板备份起来。对于如何修改shopify CSS请参考前面的文章。


shopify后台 > 在线商店 > 模板 > 编辑 > 下载模板文件


你的备份shopify会把它发送到与你的邮件中。



一、压缩图片




拉低网店速度和降低转换率的一个主要关键因素是图片


要压缩图片,有两个办法

  1. 使用压缩图片Shopify App

  2. 可以使用在线压缩工具,你需要下载图片并上传到网站,压缩处理后,你需要重新上传图片并替换为未压缩的图片,我通常使用TinyPng,这是我最喜欢的图片优化工具之一。


二、减少浏览器请求次数



下面将详细介绍一下如何减少浏览器请求的数量。

1、进入Shopify 后台 > 模板 > 编辑 > 编辑代码

 

2、创建一个 app.js 文件

Assets > 新增 asset > 创建空白文件 > 选择.js > 输入 app

 

3、将Assets目录中的所有javascript文件内容粘贴到app.js文件中

 

4、在theme.liquid中添加 app.js

Layout > theme.liquid

你需要在</head>标签之前添加app.js引用,并且把原来整合进app.js的其他引用都删除掉。

 


三、删除没有必要的Shopify Apps


大部分Shopify网店都安装了Shopify Apps,一些Shopify 网店的店主不知道某些Shopify app可能会影响您的网店加载速度,你可能已经删除了所有不必要的apps,但您还需要删除Shopify apps在你的模板遗留下来的代码。因为有一些Shopify app在安装时会自动将代码插入到模板中,卸载的时候并不会自动清理。

四、仅加载可见的图片



在我们的店铺网页,可能会比较长,分成好几屏,当用户看到第一屏的时候,那么我们只需要把第一屏所需要的图片加载出来,其他不可见的屏,当用户往下滚动时,我们再加载,这样会极高的提高加载速度。为了解决这个问题,我们有一种称为“延迟加载”的技术,用户将向下滚动时才会加载图像,这里有该技术的演示,也可以在其他一些媒体网站上看到此技术。

有一些Shopify模板已经在它的模板中实现了延迟加载。以后有机会给大家推荐一些比较好的模板。

这步操作需要技术人员协助你来完成,它涉及到了Html5 、CSS3 和 liquid, 如果处理不好,可能导致你的模板出bug。

五、预加载web字体



这个技术将预加载字体,不要等到浏览器有需要的时候才会下载字体,这将降低加载速度。通常模板使用的都是Google字体,我们只需如下就行了。

https://fonts.googleapis.com/css?family=Lobster&display=swap

只需在URL末尾添加&display=swap

六、预加载js和css



这个和预加载Web字体功能相同,这个用于JavaScript和CSS文件。

预加载CSS

<link rel="preload" href="{{'theme.scss.css' | asset_url }}" as="style" type="text/css" >

预加载JS

<link rel="preload" href="{{'app.js' | asset_url }}" as="script" type="text/javascript" >

 

希望通过以上的办法能够让你的shopify网店速度得到改善,转化率大大增加!


咨询
官方微信群
官方客服

扫码添加,立即咨询

加群
官方微信群
官方微信群

扫码添加,拉你进群

更多
订阅号服务号跨境资讯
二维码

为你推送和解读最前沿、最有料的跨境电商资讯

二维码

90% 亚马逊卖家都在关注的微信公众号

二维码

精选今日跨境电商头条资讯

回顶部