提升店铺网站加载速度的四点建议

    最近发生了一件很诡异的事情,有个客户拿着他的网站的谷歌测速评分截图来找我了,询问我为什么他的网站评分这么低,尤其是手机端,低到什么程度呢?18分。。。桌面端稍微好那么一丁点儿,40分。刚开始听到这个分数的时候,我是不信的,因为他用的Turbo主题,据说是加载速度最快的主题。

我自己又亲测了一遍,不得不信。看到这个结果的我,心拔凉拔凉的。因为看到谷歌测速界面与之前有所不同,所以想想是不是有什么新算法新指标之类,第一反应是看看行业标杆,做的好的店铺评分如何,直接上截图:

 产品页的速度也大同小异,惨不忍睹。这个时候我都有点怀疑是不是没有高分店铺了,于是重新拿几个极简店铺测试一下,turbo的demo站,手机端得分64分,debut的demo站,手机端得分85分,看来还是有高分店铺的。但是高分店铺特征很明显,页面小,请求少,也就是说页面图片少,店铺安装app少。

    但是,这也并不代表完全没有优化空间,所以我又拿着客户的站到其他几个工具网站测试了一下,一共用了4个工具测,分别是:

    https://developers.google.com/speed/pagespeed/insights

    https://www.webpagetest.org

    https://gtmetrix.com

    https://tools.pingdom.com

    结果也是不相上下,因为对于改善网站速度角度来讲,认为gtmetrix几个指标比较核心,给的建议也比较详细,如下,所以先参考gtmetrix指标做调整:

我先从上面pagespeed得分最少的前几项着手,逐项排查,同时参考谷歌测速给出的建议,给客户提了如下几个步骤,也是我们正常优化Shopify网站速度时必做的几点,每点我再给点细节补充:

01

布局优化

    因为客户做的是时尚类产品,所以整个网站布局是这样的,顶部4张大尺寸banner轮播,底部6张大尺寸banner轮播,中间2个产品列表轮播,每个产品列表接近10多个产品,循环播着,再加上4个大分类列表,1个page页内容展示区,1个联系我们区。再加上每个产品鼠标划入时的quick view弹窗,订阅弹窗。

    先不说其他的,光这些首页的图片所发起的网络请求数量以及图片加载大小,就已经是很大的开销了,更重要的一点是,是否这些真的能为我们的销售带来很大的促进作用?用速度流失换取的特效,是否物有所值?

    另外,我曾经在我的qq交流群里跟很多卖家讲过,从技术实现角度来讲,鼠标滑入效果在手机端是无效的,无效的,但是我们从手机端的请求内容来看,这些quick view里面的内容还是被加载了,包括有些主题带的产品图片两张切换。当然,也有可能是主题代码原因。简单计算一下,首页如果放了20个产品,每个产品假设图片3张,有些都不止3张,核算下来,已经是60个请求了

    所以,建议,衡量一下,是否你的店铺真的需要这么多展示效果的图片尽量选择一张图片表达你想要表达的内容

    最后,在我的要求下,客户顶部保留一张图片,去除了quick view功能,其他内容还是保留了。但是尽管如此,测试之后的结果还是很明显,网站大小减小了差不多1M,以及请求数量少了至少40个。


02

图片优化

    图片优化是从三个角度去讲的,一个size大小,一个是像素大小,还有是图片范围

    解决size大小的问题,大家做Shopify的人很多都知道了,就是图片格式以及图片压缩,总体来说就是在保证图片效果不失真的前提下,size越小越好。对于图片格式,谷歌也提出了最好使用新一代的图片格式如PEG 2000或者是JPEG XR或者是Webp。JPEG 2000为JPEG的升级版,压缩率比JPEG要高出30%左右。除了要求背景必须为透明的图片外,其余图片不建议使用png格式。

    推荐压缩工具:tinypng.com / compressior.io

    像素大小,即图片尺寸。图片尺寸并不是越大越好,也并不是越小越好,其实每个主题对于其需要的图片尺寸都有明确要求。很多人都非常喜欢问的一个问题:请问shopify上面的图片尺寸多大合适?想必是大家做FB广告做多了,认为shopify也像FB一样,有一个最佳图片尺寸。Shopify的最佳图片尺寸,与主题息息相关,一般在后台主题设置或者是主题文档里有描述。

    举两个例子,免费主题Debut以及一个付费主题

    在Shopify官方主题市场内的主题,一般文档都比较清楚,搜索Debut,如下图:

      点击跳转到主题文档,一般搜索slideshow或者size,能迅速定位到图片尺寸建议,如下图:

    我想,没有比官方更合适的建议了。另外,对于尺寸,比例远比大小重要。其他地方的尺寸,如logo等,依照上述方法,在文档中去寻找,这才是最适合自己主题的图片尺寸。

    另外一种尺寸提示,如下图:

    所以,以后不要再去问别人,什么样的尺寸才是适合Shopify的,因为没有人能告诉你答案,答案只有靠自己去寻找。

    至于需要压缩图片的范围,我只能说任何一张上传到网站上的图片都需要被压缩,容易被大家忽略的有:产品详情图,尤其是需要显示在首页的产品首图,安全图标,分类的封面图片,logo图片,页面背景图,弹窗显示图,弹窗背景图等

    这些都是血淋淋的教训,因为我的客户就是页面加载了一张600多K的弹窗显示图和一张300多K的安全图标,完全没有经过压缩的,多么可怕的数据,加起来将近1M的大小,要知道很多网站,整个首页加起来可能也就1M。这些都是在不知不觉中产生的,所以千万不要小看,这些都跟我们整体网站的大小密不可分的。

03

App优化

    大家都知道后台没有用的App需要及时清理掉,尤其是涉及到前台页面显示的。往往卸载App的时候,我们都会选择直接从后台App界面删除掉。但你的App真的卸载干净了吗?
    举个例子,这位客户之前评论App安装的是Judge.me,后来卸载了,改用了Ryviu,但是在最新的一次测试结果中,我依然看到了judge.me的页面请求,虽然他没有被显示在页面上,却占用着资源,影响着速度。

    打开店铺首页,空白处右键单击,选择“查看网页源代码”,在新打开页面上Ctrl + F,搜索judge,竟然搜索出了一大段代码,这些都是属于App卸载不干净的表现。

    所以,在我们每一次卸载一个无用App的时候,都可以用上面的方法,测试一下,是否真的清理干净了。如果真的无法确定,也可联系App的开发人员,他们最清楚自己的App是否完全卸载。

做完上述三个步骤以后,当然产品图片客户还没来得及压缩,其他图片压缩,考虑到店铺显示效果,原有网页结构只是修改了头部,其余部分客户选择保留,但是重新测试的结果,几个指标依然提升了不少:

大家可以看到,从页面速度,到网站大小,到请求数量,都变少了,但是唯一一个觉得疑惑的是在其他指标都在提升的情况下,页面完全加载时间却变长了,谷歌评分也一直没有明显提升。
    

04

首页产品评论

    结合谷歌给出的优化建议,除了网页结构和图片压缩之外,还有一个“DOM规模过大”。谷歌显示网站DOM节点11400多个,DOM节点过多,页面完全加载速度会过慢。给大家一条命令,首页界面,按F12,在console界面,输入“document.getElementByTagName(‘*’).length”,回车,就能看到当前页面的DOM节点数,如下图:

    谷歌给出的标准是建议最好在1500以下,但是考虑到电商网站的特殊性,很少有店铺能做到1500以下,但是11400确实太多了。排查之后,发现是因为首页每个产品均显示了评论星星,这一个简单的操作,可能很多人都会做的一个动作,却将页面变的很臃肿,直接影响到了页面加载时间。

    将这个功能禁掉之后,整个页面的DOM节点瞬间就减到了3000多,各个测速网站的评分也明显上涨。但考虑到营销功能,选了折中的方式,只有当产品有评论的时候,才需要显示,这也是很多评论App的默认处理方式,但是Ryviu需要另外单独选择,在后台设置中。

    依照客户要求,保留该保留的App和结构,优化后结果如下:

最后,一个网站的测速说明不了问题,一个时段的测速也说明不了问题,同样,一个地区的测速也说明不了问题。因此,将该优化的部分优化,优化不了的,如服务器问题,缓存问题等,只能尽量减少使用。最终,只要正常访问起来,不会影响用户体验即可,这才是用户最真实的感受。数据是冰冷的,体验才是真实的。当然,如果注重SEO,谷歌排名的除外。

  

    本周谷歌小插件更新播报:添加了Shopify后台快捷导航,见下图。

插件链接:https://chrome.google.com/webstore/detail/sfs-plugin-collections/bjckpjbkhlogjmnanoghmfodjoopambh

    因为后台模块内容较多,每次从一个页面切换到另外一个页面的时候,可能需要通过多次跳转才能完成,插件将常用页面单独列出,点击即可直接跳转。

    如果你也有想通过插件实现的功能,请跟我们客服联系。

我只想说,做Shopify技术服务,我们是认真的。

    本篇文章就分享到这里了,如果对文中所涉及内容有疑问处,可联系小编QQ : 2790641050。

    如果觉得小编的文章对你有价值,动动你的手指,帮忙关注并转发,谢谢!

    

    除非注明,文章均为 SFS技术服务 原创,转载请注明来源,谢谢! 

    SFS为Shopify全方位专业技术服务供应商,我们提供服务,解决问题,让每一位Shopify卖家不再为技术问题而深感烦恼

往期精彩回顾
如何将你的活动商品打上”折扣标签“
亚马逊卖家转战Shopify,关于店铺你需要注意的事项都在这儿

你与Top店铺的差距,也许只是一个Page的不同

用户购物流程优化这样做,你知道吗?(下)

用户购物流程优化这样做,你知道吗?(上)

更多精彩推荐,请关注我们
专业的技术服务

本篇文章来源于微信公众号: shopify技术服务

发表评论

关闭菜单