查看: 552|回复: 6

如何提高Shopify页面加载速度?

[复制链接]

1

主题

28

帖子

187

积分

注册会员

Rank: 2

积分
187
发表于 2018-5-15 00:03:21 | 显示全部楼层 |阅读模式
本帖最后由 shawshank 于 2018-5-15 00:22 编辑

为什么要提高加载速度?
如果你需要为提高网页加载速度找到一个合理的理由,那么请看下面这些数据。
当加载速度延迟1秒钟:
  • 减少11%的网页浏览量
  • 客户满意度下降16%
  • 转化率下降7%
能做些什么来提高shopify页面加载速度?
今天,我们介绍如何将Shopify站点上的所有JS文件和CSS文件整合到一个JS和一个CSS文件中,以限制请求数量从而缩短加载时间。当您的站点加载了多个脚本文件和样式文件时,它自然会使页面加载速度变慢,因为服务器必须去检索所有的数据。通过将这些脚本文件和样式文件合并为一个。可以减少请求数量,并且也不会破坏网站结构。在使用谷歌页面速度测试工具时,有一条优化建议为清除首屏内容中阻止呈现的 JavaScript 和 CSS。这个方法是改善这个情况最便捷的方法之一。
欲了解跟多信息,请访问:清除首屏内容中阻止呈现的JS和CSS
如果你已经准备好了让你网站的加载速度更快。那么,请继续往下看

开始之前:备份当前模板
在Shopify后台,在online store >> themes ,点击actions >> duplicate ,这个操作会生成一个模板的备份文件在后台,防止在修改过程中出现任何异常。做任何修改之前,首先记得备份,这非常重要

整合JavaScript文件以提高加载速度
第1步:创建application.js.liquid文件
当你备份好主题代码后,打开代码编辑器,向下滚动到Assets文件并将其打开。点击Add a new asset ,然后选择Create a blank file ,将文件命名为application,并将其保存为.js.liquid文件。
第2步:将theme.js.liquid中的代码粘贴到新的Assets文件中
转到Assets中的theme.js.liquid文件并复制所有代码,但不要删除它。复制完成后,转到刚才新建的文件(application.js.liquid)并粘贴复制的代码。
第3步:在您的页面上查找其他脚本
回到您的主页,右键点击查看源代码。源代码页面打开后,按住Ctrl + F并在源代码中搜索script。查找页面上的所有不同脚本,并注意它们的加载顺序。为了找到能够解决问题的确切脚本文件,请使用Google Page Speed Insights并分析您的网站。它会告诉你清除首屏内容中阻止呈现的 JavaScript 和 CSS并按顺序列出您的脚本。
在源文件中,向下滚动,直到找到Google Page Speed Insights中列出的脚本。如下:
点击这些脚本链接,并在新标签中查看脚本文件代码。复制所有代码并按照在先后顺序将其粘贴到application.js.liquid文件的顶部。请确保不要删除任何现有的application.js.liquid代码。
第4步:将application.js.liquid添加到站点
现在您已经将所有的JS文件压缩成成一个页面,我们需要在网页代码的结束标记之前添加一个指向该文件的链接。同时,我们将使用异步加载。
有关此概念的更多信息,请访问以下链接:
在theme.liquid文件的底部,在结束标记的上方添加一行,如下:
第5步:从theme.liquid中删除jQuery 和Modernizr标签
将jQuery和Modernizr标签中的代码添加到application.js.liquid文件后,您可以从theme.liquid中删除带个脚本文件。如下:
这应该步会影响到您网站的显示
如果影响到了网也的显示,请将备份的theme.liquid代码粘贴到修改后的theme.liquid中,并从第一步开始重新进行操作。

整合CSS文件以提高加载速度
第一步:将所有CSS代码合并到theme.scss.liquid文件中
回到主页的源代码,向下滚动,直到找到其他被调用的CSS文件。记下您找到的所有CSS文件的先后顺序,因为我们需要将它们合并到一个文件中。
CSS在网页源代码中显示如下:
请记住,在这个例子中,我们需要在theme.scss.liquid的Roboto代码之下有Open Sans Condensed代码。
第2步:查找其他CSS文件并将代码添加到theme.scss.liquid样式表中
浏览主页源代码,找到所有正在调用的CSS文件,并按照它们显示的先后顺序合并到您的theme.scss.liquid中。您必须粘贴现有CSS代码之下的所有代码,以便它不会影响网站的显示。
但是,每个网站可能会有所不同,因此请确保找到您网站上的所有CSS文件,并将它们合并到您的theme.scss.liquid文件中。
第3步:从theme.liquid中删除单个CSS文件
在后台的代码编辑器打开theme.liquid文件,然后再theme.liquid文件中找到单个CSS文件。如下:
在确认所有CSS代码都已经添加到theme.scss.liquid之后,您可以从代码中删除单个样式标签。
最后一步:确保网站正确显示
刷新主页并确保一切正常显示。
结果:

更多文章请浏览:shopify fans

shopify建站及模板修改QQ:   761626101
回复

使用道具 举报

72

主题

442

帖子

1455

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1455
QQ
发表于 2018-5-15 08:13:28 | 显示全部楼层
学习了,期待更多优质内容
回复 支持 反对

使用道具 举报

5

主题

35

帖子

141

积分

注册会员

Rank: 2

积分
141
发表于 2018-5-16 10:39:09 | 显示全部楼层
楼主的设置方法看了个大概,代码部分能不能放出来,可以让大家复制粘贴那种啊?
毕竟,一个个敲代码对我们这些技术上的矮人来说,并不轻松啊。
再次感谢分享。支持一个
回复 支持 反对

使用道具 举报

1

主题

385

帖子

824

积分

高级会员

Rank: 4

积分
824
发表于 2018-9-18 10:05:59 | 显示全部楼层
谢谢楼主分享
回复 支持 反对

使用道具 举报

0

主题

8

帖子

80

积分

注册会员

Rank: 2

积分
80
发表于 2019-1-29 17:39:27 | 显示全部楼层
楼主,图挂了,可以再补充一下吗?
回复 支持 反对

使用道具 举报

0

主题

2

帖子

6

积分

新手上路

Rank: 1

积分
6
发表于 2019-2-10 15:03:10 | 显示全部楼层
谢谢楼主分享  学习了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

热门推荐

怎么删除review的多与代码
怎么删除review的多与代码
我的产品下面多出了一个评论区怎么删除求大神告诉下 两个插件的怎么删除
Shopify建站运营推广相关问题征集
Shopify建站运营推广相关
承蒙各位Shopify卖家朋友们的支持和厚爱,在运营WaimaoB2C.com博客和WaimaoB2C.cn论坛
购物按钮下的 购物安全保证图片 怎么添加
购物按钮下的 购物安全保
购物按钮下的 购物安全保证图片 怎么添加
shopify退款政策在哪里啊
shopify退款政策在哪里啊
我的shopify里checkout中怎么没有退款政策这项啊,求大神指点
怎么用图片作为颜色选项
怎么用图片作为颜色选项
有谁知道这个颜色选项用图片选择的是怎么做的,就想淘宝一样的,应该有具体的app,但
客服邮箱和订单测试
客服邮箱和订单测试
老板注册了个新的shopify网站给我弄,,,,产品的价格要设置成用户购买我们的样品才能看
如何重新排版产品信息页面?
如何重新排版产品信息页面
我在用EMPIRE这个主题,左侧是图片展示,右侧是选额变体跟假如购物车,以及文字DESCRI

Archiver|手机版|小黑屋|

  • Copyright   ©2015-2016  Shopify论坛 | WaimaoB2C.cn   Powered by©Discuz!   
快速回复 返回顶部 返回列表