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

Eric
35
文章
0
评论
2019年11月27日00:33:00 评论 592 2609字阅读8分41秒

网页加载速度在Shopify独立站中扮演着相当重要的角色。

你的网站加载速度越快,跳出率就会越低,转化率也会更高。相应的SEO的排名也会比速度慢的站点靠前。

shopify page speed and roi

Page speed is a critical factor when it comes to ranking your website higher on Google’s search engine results.
Neil Patel Seo Expert Blog

那么今天我将介绍优化shopify加载速度的所有方式。

速度测试工具

以下几个工具可以免费测试网页速度。
不要只测试首页,别忘了产品页(product page)和类目页(collection page

注意:以下步骤需要了解HTML,CSS和Javascript等知识
在开始优化之前,请备份主题!!!
在开始优化之前,请备份主题!!!
在开始优化之前,请备份主题!!!

1. 压缩图片

Shopify允许使用以下图片格式

  • JPEG或JPG
  • Progressive JPEG
  • PNG
  • GIF
  • webp

图片压缩非常重要,可以说是影响网页速度最重要的因素之一。在进行图像优化时,请确保图片尺寸正确。不要在单个页面添加太多图片

在压缩图片时,尽量保证图片质量。

Tin.Png

要压缩图片,有以下两种选择

  • 使用Shopiy图片压缩插件压缩图片
  • 使用在线图片压缩网站压缩图片,然后下载压缩之后的图片并上传。推荐大家使用TinyPng

2. 减少请求

使用GiftOfSpeed的HTTP请求检查器工具可以找出您的页面HTTPS请求总数。可以通过执行以下操作减少HTTP请求

  • 合并内联CSS
  • 合并所有JavaScript
  • 减少页面图片的数量
  • 雪碧图
  • 将图像转换为Base64代码
  • 限制社交按钮的数量

3. 分析shopify插件

shopify插件可以帮助我们提升我们的销售额。但是需要注意的是,大多数插件都会拖慢网页加载速度。

但是我不建议冒然卸载,而是应该通过以下步骤来优化:

1. 卸载效果不佳或者完全不需要的插件
你可能安装过一些看起来很炫酷,或者别人说很好用的插件。但是你一定得进行A/B test来检查它是否真的有用。
可以通过GA,插件自带的分析工具,客户的反馈,热图等工具来进行分析
2. 检查模板代码中是否有旧的插件代码
如果你已经卸载了插件。那么你的模板代码中很大概率存在没有删除干净的插件代码(很多插件单纯卸载是删不干净的)
你可以通过Chrome开发者工具打开Sources来查看

你可能无法识别每个域名,但是如果你发现了某个域名属于你卸载的插件,那么这个插件就没有删除干净,它依然在加载文件。例如,如果你卸载社交媒体登陆插件social-login.但是查看的时候依然发现了它的域名,那么就可以判断并没有删除干净

social-login

通常,你可以在theme.liquid文件中找到这些JS和CSS文件。

3. 根据条件加载插件
根据条件加载 = 仅仅在需要的页面加载资源

这个操作需要编辑html或者其他代码并且测试没有错误,请谨慎操作。

例如:大多数插件会将JS/CSS放在theme.liquid文件中。但是如果只是在产品页需要这个插件的效果。那么脚本文件就不需要加载到所有页面。

为了解决这个问题,可以限制脚本只加载到需要的地方:

{% if template == 'product' %}
<!-- 只在产品页面加载插件 -->
{% include 'app-snippet' %}
{% endif %}

4. 压缩CSS、JS文件

CSS和JavaScript用于控制网站的样式和行为。缩小这些文件可通过删除多余的字符(如空格和注释),缩短变量名以及组合常用样式来压缩它们。

使用该指南来缩压缩CSS:Shopify Liquid课程:自动压缩CSS。

使用该工具来缩小JavaScript:JSCompress

如果您的模板代码Assets文件夹中的文件名以.liquid结尾,则可能将无法使用这些策略,因为其中混入了liquid代码。也可以通过多种方式进行操作,但很繁琐,也可能可能会导致错误,因此不太建议冒然修改。

5. 选择速度更快的主题模板

实际上,shopify网站的加载速度主要取决于网站模板,因此在选择模板时,一定要检查一下内容。

  • 通过速度测试工具测试模板预览页(首页、产品页、类目页)

shopify theme update

在安装模板之后,不断检查或者联系主题作者是否有更新,请保持在模板的最新状态

6. 删除Quick Shop功能

quick shop

Quick Shop也就是产品预览/快速购买,可以很好的预览产品。不过随之而来的是更多图片,JS和DOM的加载,我认为这个功能会对转化率造成负面影响,也会拖慢加载速度不利于用户体验。所以这个功能建议关闭或删除。

7. 首页Banner使用单图而不是轮播图

轮播图之前流行了一段时间,大家通常在轮播图中添加3-4张高质量的图片。但是这极大的增加了页面加载时间,其实可以完全使用Hero image代替轮播图。

下面是一些有意思的统计,表面为什么不该使用轮播图

  • 大多数用户不会点击轮播按钮,实际上只有1%的人会点击。资料
  • 轮播图会影响用户体验。资料
  • 轮播图不利于SEO.资料
  • 轮播图在移动端不太友好。资料

建议大家使用Hero image来代替轮播图。例如以下网站均是单个Banner
Shein
Fashionnova
Colourpop

Hero image具体定义

维基百科:主页横幅 (Hero Image) 是网页设计的一个专业术语,一种特殊的网页广告。主页横幅是一个较大的横幅图片,放置在首页面的醒目位置。

主页横幅往往是针对网站访问者遇到的第一视觉页面,其目的是要提出一个该网站最重要的内容进行概述。主页横幅往往由图像和文字构成,可以是静态或动态的内容。

参考文献:

2019/11/28
Eric

展开全文
  • 版权声明: 发表于 2019年11月27日00:33:00
  • 转载注明:https://www.shopifyfans.com/how-to-optimize-shopify-page-speed.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: