Shopify网页加载速度优化技巧实操教程-雨果网

Shopify网页加载速度优化技巧实操教程

电商网站展示商品信息，那么就会有大量的图片，图片的大小，格式，以及使用的图片处理技术都会影响到网页加载的速度。

Shopify网页加载速度优化技巧实操教程

大家好，最近有卖家向小编反应Shopify搭建好后，网页加载非常慢，有时候一个网页加载十多秒，访客停留时间也比较短，今天为了回馈关注本公众号的粉丝卖家，关于优化Shopify速度的实操教程。

1.优化图片电商网站展示商品信息，那么就会有大量的图片，图片的大小，格式，以及使用的图片处理技术都会影响到网页加载的速度。根据我的运营经验总结出如下几点图片优化技巧：

1 图片大小：

在不影响网站图片清晰度情况下，尽量压缩图片的尺寸；

2 图片格式：

建议选用JPEG 2000、JPEG XR 和 WebP 等图片格式，他们的压缩效果通常比 PNG 或 JPEG 好，因此下载速度更快，消耗的数据流量更少。

3 图片处理技术：

把图片处理成progressive jpeg适合网页加载的图片；通过这工webpagetest 网址：https://www.webpagetest.org/ 输入你的网站域名，分析出可优化图片，根据图片链接下载图片，使用如上工具压缩图片，将JPEG图像的压缩级别设置为85.最后替换掉以前的图片。

4 少图：

能用文字替代的，尽可能少使用图片。还有在使用图标时候，使用Svg格式的图标，体积比图片小。

5 选择正确的图像尺寸：

理想情况下，您的页面永远不应提供大于用户屏幕上呈现的版本的图像。任何大于此的东西都会导致浪费的字节并减慢页面加载时间。您可以为每个图像生成多个版本（pc.jpg和mobile.jpg），然后使用媒体查询，在手机端调用尺寸较小的手机端图像，

@media screen and (max-width: 698px) { .xxx{background:url(../mobie.jpg);}}

2.优化css, html, js代码 1 压缩代码：

前端开发工程师在写Shopify主题时候，为了代码的可读性，会在代码里面加一些空格，占位符，以及注释等，在网站上线前，代码会被工程师压缩去掉空格，所以，卖家在Shopify主题加入的代码，也需要进行处理，以是代码轻量化(注意：已经开发好的主题不要去压缩)。

类似这样的代码压缩网站：http://tool.oschina.net/jscompress/，复制代码进去，运行即可压缩。

2 移除未使用代码：

网页有的代码是未使用的代码，比如引入的CSS文件，默认情况下，浏览器必须先下载，解析和处理它遇到的所有外部样式表，然后才能将任何内容显示或呈现给用户的屏幕。但是引入的未使用的CSS文件会被浏览器下载，增加了网络负载，所以需要去掉这样的引入链接。对于关键的CSS可以使用内联，所谓内联关键CSS举一个例子就明白；

<div style=”color:gray;”></div>里面的style=“color:gray;”就是内联CSS用法，直接把CSS代码写入html代码里面，浏览器只需要加载几个字体不需要加载整个CSS文件。（简单的理解是这样）

找出无关的CSS代码，可以尝试使用ChromeDevTools运行代码覆盖率测试。

3 移除不必要的Shopify APP：

用过Shopify的卖家知道安装过多的APP（就是插件），会明显感觉到网页速度加载变慢了。除了安装APP增加了代码，最重要的因素是，一般APP的代码是放在APP服务商的主机上面（因为人家要收你钱，且不想轻易让你改代码），每次打开网页时候，会从APP服务商那边调用代码，这中间的网速过慢，会拖累网速。所以很多时候会看到，实时聊天或者review会后显示一步。

4 合并CSS，JS代码：

分别将js和css分别合并到一个共享文件，这样不仅能够简化代码，而且在执行js文件是，如果js文件较多，就需要多次向服务器请求数据，这样将会延长加载速度，将js文件合并在一起，减少了请求的次数，就能够提高加载的速度；

具体操作是：新建一个文件后缀名修改成01.css 01.js 然后分别把多个CSS文件的代码复制黏贴到01.CSS，分别把多个CSS文件的代码复制黏贴到01.js.将这2个文件上传到Shopify，获取文件链接。将如下的两行代码放到Shoipfy主题的<head></head>标签里面：

3.优化网页视频加入网页的视频选用清晰度高容量小的视频，当然可以考虑嵌入YouTube视频，会根据访客网速，给访客不同的视频质量.

其次，网页加载时候，禁用视频自动播放。

4.启用网页预加载对应产品很多的卖家，你的产品一页不能全部展示完所有的产品，所有你要分页展示，那么对于分页展示的商品，第二页就可以采用网页预加载技术来提高网页的打开速度；如下图所示，当点击第二页时候，会立即跳到第二页，当访问第三页时候，浏览器会在后台加载第三页，以此类推。

（来源：K哥聊出海）