前段时间发生了两件很怪异的事情，有位顾客拿着他的中文网站的Google慢速打分截屏来找我了，查问我为什么他的中文网站打分那么低，尤其是智能手机端，低到什么程度呢？18分。。。桌面端稍微好那么一丁点儿，40分。刚开始听到这个分数的时候，我是不信的，即使他用的Turbo主轴，据说是读取速率最快的主轴。

我自己又Jarnisy了一遍，不得不信。看到这个结论的我，心拔凉拔凉的。即使看到Google慢速界面与之前有所不同，因此想想呢有什么新算法新分项之类，第一反应是看看行业标杆，做的好的店面打分如何，直接上截屏：

商品页的速率也大同小异，惨不忍睹。这个时候我都有点怀疑呢没有最高分店面了，于是重新拿两个Becoming店面试验呵呵，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罚球最少的前几项着手，逐项排查，同时参照Google慢速给出的提议，给顾客提了如下表所示两个步骤，也是他们正常强化Shopify中文网站速率时必做的几点，每点我再给点细节补充：

1.产业布局强化

即使顾客做的是时尚类商品，因此整个中文网站产业布局是这样的，顶端4王英体积bannerExi，底部6王英体积bannerExi，中间2个商品条目Exi，每一商品条目接近10多个商品，循环播着，再加上4个大分类条目，1个page页文本展区，1个联系他们区。再加上每一商品滑鼠划入时的quick view快捷方式，订阅快捷方式。

先不说其它的，光那些主页的相片所发起的网络允诺数量和相片读取大小不一，就已经是很大的开销了，更重要的一点是，与否那些吗能为他们的销售带来很大的促进作用？用速率流失换取的特效，与否物有所值？

另外，我曾经在我的qq交流朋友圈跟许多卖家讲过，从技术实现视角来说，滑鼠掉入效用在智能手机端是合宪的，合宪的，但他们从智能手机端的允诺文本来看，那些quick view里面的文本却是被读取了，包括有些主轴带的商品相片两张切换。当然，也有可能是主轴代码原因。简单计算呵呵，主页如果放了20个商品，每一商品假设相片3张，有些都不止3张，核算下来，已经是60个允诺了。

因此，提议，衡量呵呵，与否你的店面吗需要那么多展示效用的相片，尽量选择两张相片抒发你想要抒发的文本。

最后，在我的要求下，顾客顶端留存两张相片，去除了quick view功能，其它文本却是留存了。但尽管如此，试验之后的结论却是很明显，中文网站大小不一减小了差不多1M，和允诺数量少了至少40个。

2.相片强化

相片强化是从三个视角去讲的，两个size大小不一，两个是画素大小不一，还有是相片范围。

解决size大小不一的问题，大家做Shopify的人许多都知道了，就是相片格式和相片压缩，总体来说就是在保证相片效用不失吗前提下，size瘤果好。对相片格式，Google也提出了最好使用新一代的相片格式如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。那些都是在不知不觉中产生的，因此千万不要小看，那些都跟他们整体中文网站的大小不一密不可分的。

3.App强化

大家都知道后台没有用的App需要及时清理掉，尤其是涉及到前台网页显示的。往往卸载App的时候，他们都会选择直接从后台App界面删除掉。但你的App吗卸载干净了吗？

举个例子，这位顾客之前评论App安装的是Judge.me，后来卸载了，改用了Ryviu，但在最新的一次试验结论中，我依然看到了judge.me的网页允诺，虽然他没有被显示在网页上，却占用着资源，影响着速率。

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

因此，在他们每一次卸载两个无用App的时候，都可以用下面的方法，试验呵呵，与否吗清理干净了。如果吗无法确定，也可联系App的开发人员，他们最清楚自己的App与否完全卸载。

做完上述三个步骤以后，当然商品相片顾客还没来得及压缩，其它相片压缩，考虑到店面显示效用，原有网页结构只是修改了头部，其余部分顾客选择留存，但重新试验的结论，两个分项依然提升了不少：

大家可以看到，从网页速率，到中文网站大小不一，到允诺数量，都变少了，但唯一两个觉得疑惑的是在其它分项都在提升的情况下，网页完全读取时间却变长了，Google打分也一直没有明显提升。

4.主页商品评论

结合Google给出的强化提议，除了网页结构和相片压缩之外，还有两个“DOM规模过大”。Google显示中文网站DOM节点11400多个，DOM节点过多，网页完全读取速率会过慢。给大家一条命令，主页界面，按F12，在console界面，输入“document.getElementByTagName(*).length”，回车，就能看到当前网页的DOM节点数，如下表所示图：

Google给出的标准是提议最好在1500以下，但考虑到电商中文网站的特殊性，很少有店面能做到1500以下，但11400确实太多了。排查之后，发现是即使主页每一商品均显示了评论星星，这两个简单的操作，可能许多人都会做的两个动作，却将网页变的很臃肿，直接影响到了网页读取时间。

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

依照顾客要求，留存该留存的App和结构，强化后结论如下表所示：

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

本周Google小插件更新播报：添加了Shopify后台快捷导航，见下图。

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

即使后台模块文本较多，每次从两个网页切换到另外两个网页的时候，可能需要通过多次重定向才能完成，插件将常用网页单独列出，点击即可直接重定向。

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

我只想说，做Shopify技术服务，他们是认吗。

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

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

原文：

http://www.globaleseller.com/?/article/271