2020年4月27日星期一

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主题加入的代码,也需要进行处理,以是代码轻量化(注意:已经开发好的主题不要去压缩)。

类似这样的代码压缩网站

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>标签里面:

<link rel="stylesheet" href="这里放获取的链接地址01.css"/>

<script src="这里放获取的链接地址01.js"></script>

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

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

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


没有评论:

发表评论