Shopify网站打开速度优化

新注册Shopify账户可获得 14 天免费使用优惠 – 立即注册账户获取

网站优化是一个系统而繁杂的工作,相比较于其他建站系统,Shopify已经解决了相当一部分的优化工作,但是其中一些工作,我们可以让它表现的更加优秀,比方说网站的打开速度。

网站优化系列就从网站的速度优化开始说起。网站打开速度的快慢关系重大。假如你一天投入100美金的FB广告,其中50美金的广告点击因为你的网站打开速度太慢而变成了无效点击,是不是件很悲催的事情?如果你的Shopify网站已经上线运营,在开始阅读本文之前,请先跟WaimaoB2C.com来对你的网站做个小测试。首先打开网站 webpagespeed.org 然后将你的网站放到下面的搜索框中, 然后点击 Start Test按钮

shopify优化

等待几秒钟,看看测试结果,你的 First View 的Load Time 是多少?应该不会比WaimaoB2C.com的17秒更惨了吧!记下来你的Load Time, 继续往下看。

shopify优化

在Google从事Webmaster Trends Analyst 相关工作的John Mueller在Twitter上回答网友的问题曾经提到:“There’s no limit per page. Make sure they load fast, for your users. I often check https://webpagetest.org  and aim for <2-3 secs

shopify网站优化

你的First view 的 Load Time在3秒以内吗? 如果在3秒以内,可以直接忽略本文了

我会在后面依据自己的经验提供一个以提高网站转化率为目标的网站优化的系列指导教程。网站打开速度就当做第一篇吧。在系列教程的开篇,首先希望大家思考的一个概念就是— 优化,你所理解的优化是什么? 以下是博主Conway的个人观点,欢迎拍砖交流

  • 优化首先是一个系统工程,不是一朝一夕的事情。有些优化是经过事实验证的正确的普遍经验之谈,比方说网站的打开速度,这个优化目标是毋庸置疑的,肯定是速度越快越好,所用的时间越短越好,我们只需要以这个为目标去优化网站即可。有些优化是没有理论依据的,没有经验参考的,就需要进行不断的测试,对测试结果进行比较,取最好的那个结果。
  • 优化是要以数据为导向的,最直接的,就是经过你的“优化”操作,网站的订单有没有上涨。仔细分析就是你的网站产品加入购物车的比例有没有增长,购物车到实际订单的转化率有没有增长,邮件订阅的转化率有没有增长等等。
  • 数据是否有参考价值,也是一个值得商榷的问题。数据里面会有噪音,要思考如何尽可能的减小数据噪音对优化结果判断的影响。同时,数据量越小,参考价值就越小。例如今日访客数量2,产生了1个订单,依据这个数据做网站优化,是无从谈起的。

感觉自己说了一堆废话。。。      -_-||

回到本篇,为什么我们要谈下Shopify网站的打开速度优化呢?

Google早在2010年就已经声明网站打开速度是Google排名算法考虑的因素之一,当然是网站打开速度越快,越受Google的青睐。更重要的是,网站打开速度直接关系到网站访客的浏览体验。网站打开速度越快,留给访客的第一印象越好,这个第一印象是相当重要的!

国外的一项调查显示:

“ Fast websites to be professional and reliable. We relate speed to efficiency, trust, and confidence. A slow website, on the other hand, makes us think it’s unsafeinsecure, and untrustworthy. And it’s really difficult to turn around that negative first impression. 79% of online shoppers say they won’t go back to a website if they’ve had trouble with load speed.”

生活节奏的加快,让网上购物的消费者越来越没有耐心。Kissmetrics 的一项数据调查显示:

47% 的人希望网站加载时间在2秒以内。网站如果超过3秒还没有打开,40%的人会选择关闭页面离开。85%的互联网用户希望移动端的网站加载速度比PC端更快。

网站打开速度越慢,网站跳出率越高,网站停留时间越低,最终影响到网站的转化率和订单量。下图为Walmart网站的一项关于网站Load time 和 Conversion Rate的关系的图表。

shopify优化

一秒看似没有多长时间,但是Radware的一项关于移动端网站打开速度对网站各项指标的影响数据分析显示,1秒钟的时间对网站的各项转化率数据确实有相当大的影响:

shopify网站优化

由此,可以看出网站打开速度的重要性了吧? 尤其是如果你在花钱做Facebook广告,请务必先检测下你的网站的打开速度,否则花费了大量的广告费,带来了大量的点击,有可能很多的点击连你的网站都没有打开就已经离开了,更别提转化了!

shopify优化

来做个测试,盯着上图看5秒,你是什么样的感受?

那么问题来了,我们该这么做来提高我们网站的打开速度呢?网上有几款免费的网站打开速度分析工具,大家可以拿来分析自己的网站,看看具体是什么问题,然后对症下药。

本站推荐的3个网站打开速度测试分析工具:

因为本文的读者大多使用的是Shopify,而Shopify其实已经完成了大部分的网站加速优化工作,例如,Shopify网站服务器的优化,CDN内容网络分发技术的使用,网站基础代码的优化,甚至你上传到Shopify上的每一张图片Shopify都会进行压缩优化等等,因此,我们使用上面的工具测试出来的数据,对我们来说能做的并不是很多,因此这里就不再赘述上面工具的使用方法了,三个工具都比较简单,输入你的网站地址开始测试就可以了。这里要说明的是,网站的测试数据仅供参考,不同测试服务器测试结果有时候相差也比较大,不同测试工具测试结果相差也有可能比较大。不用纠结。

Shopify网站打开速度优化

下面就Shopify网站,我们还可以做哪些具体的优化工作,展开来说:

#1. 优化你的网站图片

有句话说,“成也萧何,败也萧何”, 网站上的图片之于网站也是如此。精美清晰的图片,尤其是产品图片可以提高用户的浏览体验,提高网站的转化率,但是另外一方面你需要警惕的是,高清晰度的图片,文件大小必然比较大,如果只是追求图片质量而忽略了图片文件过大影响到网站加载速度,就得不偿失了。再精美的产品图片,如果连展示给客户的机会都没有,也就无所谓精美不精美了。

考虑到Images make up to 60 percent of an average page’s total size,因此网站图片的优化,是网站速度优化的重中之重了。

在网站图片的格式上,优先推荐使用jpg格式的图片,在同样文件大小的情况下,jpg格式的图片清晰度是最好的。如果有必要使用透明背景的图片,可以选择使用png格式的图片。

其次在产品图片或者Banner图片上传之前,一定要清楚你的图片尺寸在多少像素X多少像素是合适的。如果主题说明文档里面没有相关的说明,可以自行先做几张不同尺寸的图片上传到Shopify看下,哪个尺寸的图片效果更好。如果800*800的图片和1000*1000的图片在效果上并没有太大的差别的话,果断使用800*800的。

再次,在规划好产品图片的尺寸之后,在图片上传之前,一定要用无损压缩工具对你的图片压缩一下,虽然上文中提到上传到Shopify的图片Shopify会进行优化处理,但是我们提前做一些预处理,效果可能会更好一些。

压缩前的图片 – 200K

shopify优化

压缩后的图片 – 150K

shopify优化

推荐的图片在线压缩工具有:

另外Photoshop也是一款不错的图片压缩工具。下面两张tinypng压缩效果的截图图片的尺寸一致,都是1103*439. 上图图片大小为443K,格式为PNG,下图图片大小为113K,格式为JPG,如果是你,你更倾向于选择哪张图片?
shopify优化

PNG  / 443K

shopify优化

JPG / 113K

另外,现在的网站都比较流行Full Width Slider大图,不少Shopify的主题都支持这一功能。个人建议是,可以使用,但是尽可能的控制Slider的数量,控制单个Slider图片的尺寸。图片在上传使用之前一定要进行压缩。例如Ella主题的Demo站Slide图片(下图)尺寸为1880*720,但是文件大小仅118K,比上面经过优化的tinypng的截图稍稍大一点儿。

shopify优化

然而很多人上传的Slideshow的图片是从网上下载下来就直接上传上去的,通常要大几百K甚至2M的大小,尤其是一些免费图片资源网站提供的图片,下载下来的高清图片要10M甚至20M,直接上传到Shopify上也难怪网站慢了。

关于Shopify网站图片的优化,可以查看文章《Shopify网站图片要求与优化》了解详情

#2. 尽可能减少Apps的使用,没有在用的App要及时删除

安装Apps可以帮你的Shopify网站变的更加强大,但是并不是说安装的Apps越多越好,和上面我们用“成也萧何败萧何”来描述图片对网站的作用一样,安装过多的Apps会让你的Shopify网站变的臃肿不堪。因为大部分的Apps功能的实现需要额外的JavaScript和Css文件来支撑,也就意味着,你安装的App越多,客户在打开你的网站的时候,需要下载的JavaScript文件和Css文件也就越多,直接导致你的网站打开速度变慢。

shopify优化

我推荐大家安装App来实现Shopify功能的拓展,但是具体安装哪些App,需要你以自己的实际需要来判断。具体安装多少数量以内的App比较好,这个没法说,因为不同的App功能上不同,需要的JavaScript文件Css文件的数量和大小不同,但是你可以使用上面的Webpagetest工具来测试App安装前后网站打开速度的变化,来做一个参考。

但是那些你安装了却没有在用的App,一定要及时删除掉,因为这些App虽然你没有在使用,但是客户在打开你的网站的时候同样会加载JavaScript文件和Css文件。

#3. 选择一款优秀的网站主题

什么样的Shopify主题算是一款优秀的Shopify主题呢?

shopify优化

首先要是一款移动友好的网站主题,Mobile Friendly 或者叫 Responsive 类型的Shopify主题。好吧,我承认这是句废话,因为现在绝大部分的Shopify主题,无论是Shopify官方提供的免费或者付费的主题,还是Themeforest等等第三方主题网站提供的Shopify主题都是Mobile Friendly的主题。但是不排除一些主题可能是非Mobile Friendly的。为什么一定要 Mobile Friendly 或者 Responsive? 因为现在移动端发展势头很猛,你可以看下这篇文章了解下2016年一季度Shopify的财报数据

  • 在Shopify上开店的商家所产生的订单总数中,有超过51%的订单来自于移动端
  • 在Shopify上的总流量,有62%的流量来自移动端

而那些Mobile Friendly 或者叫 Responsive类型的Shopify主题在文件大小和访问速度上都是经过对Mobile流量进行优化的。最简单的检验一款主题是否是移动优化好的,就是使用你的手机浏览器访问主题的demo站点体验一下。

除此之外,你可以使用上面我提到的三款网站速度测试工具对主题的Demo站点进行测试,看下他们的评分数据如何。下面是Shopify官方免费主题和Themeforest热销榜前十名在Google Pagespeed Insight里面的得分,测试时间为2017年9月4日,具体数据在不同时间可能会有变化,数据仅供参考。满分100. 以下列表按照Desktop的评分由高到低排序。

对以上三个方面进行一些优化操作,基本上你的网站打开速度就能有一定的改善了。现在就先动手试试吧。

另附一张kissmetrics出品的关于网站打开速度的信息图 (点击下图查看大图或者下载本图)

未经允许不得转载:歪猫跨境独立站博客 » Shopify网站打开速度优化

赞 (12)
新评论邮件通知
提醒
guest
3 评论
由新到旧
由旧到新 点赞最多
Inline Feedbacks
View all comments
  • 关注公众号 “ WaimaoB2C ” 第一时间获取网站最新内容,了解跨境电商独立站圈内圈外每天发生的那些事儿,和20000+独立站卖家共同成长。

    $$$$$$$$ 每月 1 本书 $$$$$$$$
    2020年8月推荐
    <The Truly Ultimate Guide To 10X Your Shopify Store> 

    公众号回复信息“ 10X ”获取本电子书下载链接。不想关注公众号的直接Google搜索书名,在搜索结果中同样可以获得电子书下载链接地址。
    该电子书不是“葵花宝典”,所以不能指望靠它“独步武林”,不过个人觉得对独立站新手来说还是有非常大的帮助的。对老手来说,实用性没那么大,不过如果电子书中有那么一两点对你的网站运营有所启发,我觉得也算是比较值了。

    *推荐亚马逊购买正版Kindle电子书或纸质书籍,获取最佳阅读体验。本分享来自于互联网以及网友上传,网站内所提供的下载链接均为站外链接,版权归原作者以及开发商所有,网站本身不存储相关资源文件. 如侵犯到版权方,请发送邮件到 hello@waimaob2c.com,站长会在第一时间删除并向您道歉。

  • Shopify 新卖家账户注册注意事项-非常重要

  • Shopify新卖家注册账户前请务必认真阅读以下注意事项:

    注册前使用本地IP; 不建议使用 QQ,126,163邮箱注册账号
    打开Shopify官网 WWW.SHOPIFY.COM 获取 14 天免费使用
    注册账户时地址信息真实有效; 缴纳月租前使用本地IP