Shopify 独立站速度和性能优化指南

824 阅读 0 评论 4 点赞

做独立站，当我们的站点内容越来越多时，我们可能会发现打开自己的网站速度越来越慢了，大家千万不要忽略这个速度慢的问题，很有可能它已经在直接影响着你站点的转化。

网站为什么要做速度和性能优化？

电商网站做好速度和性能优化，直观的有以下几个好处

减少用户弃单（Reducing abandoned checkouts）
更好的用户体验（Better User Experience）
提升站点在搜索引擎中的排名（Search Engine ranking）
减少用户跳出率（Reducing Bounce rate）

下面的内容，我会从原理介绍开始，讲解衡量一个网站性能的基本指标以及影响因素，接着会罗列具体改进网站性能和速度的基本措施，最后会推荐一些业内常用的分析以及改进工具。这些方法不仅适用在shopify站点上，同时也适用于任何网站进行性能优化实践。

网站性能的几个关键指标

先介绍一下网站性能的几个关键指标，这些指标基本是web业内的一些公用标准，他们分别是

指标1：LCP，测量感知加载速度。通常表现为首屏内容出现时间， < 2.5s 最佳，>4s为糟糕，这是网站加载速度感知最重要的指标

指标2：FID，页面首次可交互时间，< 1ms 最佳，>300ms为糟糕。

指标3：CLS，页面累积布局偏移度，当页面没加载完时，页面的某一块内容可能会被一些延迟加载的脚本或者css给撑开，改变原来的位置。这里也可以用另一个指标 FLT（页面内容全部加载完成的时间）来进行时间量化，< 3s 最佳，>5s为糟糕

参考：https://web.dev/defining-core-web-vitals-thresholds/

如何提升网站性能和速度

衡量一个网站的性能和速度，最直观的就是看这个网站内容出现的时间快慢，这个时间主要由三个变量决定：网站的资源数量、资源大小和资源所存储的位置。

网站资源通常是指：一个网站上的图片、视频、音频、js 脚本等文件内容。

简介浏览器渲染原理（科普篇）

当你在浏览器中访问任何一个网页，基本可以分为三个步骤：

输入 url 网址
浏览器请求对应网址中需要的资源文件
浏览器加载资源文件并渲染出页面内容

那么这3步，更详细一点是怎么发生的呢？

过程一：浏览器向服务器请求 html、js、css、图片、视频等资源文件

加载资源文件的过程中影响时间快慢的因素有

服务器距离
网络带宽大小
请求资源的数量、大小

这些文件都被存储在远程服务器，服务器可以理解为是离你很远的一台物理电脑。你的浏览器是在本地，要从远程服务器将内容拿到渲染到你本地的浏览器上，就需要进行网络请求。这个网络请求，通常是最较耗费时间之一的环节，也是最影响网站加载速度的部分。它受限于网络的传输速度，而这个传输速度又受限于我们与服务器的距离、网络带宽大小、传输的文件体积大小。

在网络中，所有的资源文件，本质上都会转化成0和1的二进制进行字节传输，而不同大小的网络带宽则限制了每个时间单位最大的传输字节大小，简单可以理解为下载速度。

举个例子：

比如我们在国内，shopify 的服务器默认在加拿大，我们每请求一个资源，就需要通过层层节点转发，在物理位置上，一直去到位于加拿大的电脑里问，你有没有这个资源？问到了，就将这个资源原路送到国内你的电脑上，然后渲染。

带宽是指一次只能传输的文件字节大小，如果这个文件过大，它就要拆分成n个请求片段传回来。所以文件过大，文件过多，服务器距离过远，都会影响到网络传输速度，从而影响到我们本地浏览器拿到这个文件的时间。

当然实际上，shopify的服务器会做CDN（Content Delivery Network）配置（可以理解为在世界各个地方复制了一份这些资源文件，方便就近获取），服务器这块我们能做的事很少，因为是用的平台，交给shopify官方即可，可以略过。但减少请求资源数量，或者减少请求资源大小，是我们能做的。

过程二：浏览器解析html结构，渲染内容

影响浏览器渲染内容结构的因素有

脚本的位置
内容模块的多少

当从服务器拿到请求资源后，浏览器就像一个仓库布布置师，到了一个个家装物件，它就开始进行室内摆放了。但这个仓库布置师，不是等所有的家具都到了才开始布置，也不是随机布置。它会依据一份布置清单按一定顺序进行内容布置。

这份清单就写在我们的 html 代码里。通常当你在导航栏输入一个网址，或者点击一个链接，进入一个网址，浏览器会首先请求这个网址的下的 index 文件（index.html， index.php 等等），这份index 文件里包含了 HTML 标签内容。在html内容里，它声明了当前页面所依赖的 js 文件、样式文件（css）、文字、图片、视频、音频等等素材资源。

一份html文档简要结构如下

对应在 shopify 的主题中，以上结构通常是在 theme.liquid 文件里。<body></body> 中存放的是我们可见的内容。<head></head>中存放的是渲染可见内容之前的一些准备脚本，例如样式文件，统计代码等。

html 标签：可以理解为是一个页面的骨架，它通过一组组标签代码，将文字、图片、视频等等安排在了页面的指定位置，这是一个页面的核心，它支撑起了所有内容的注入，你所看到的内容一定是配套标签才能注入到页面中。
css 脚本文件：可以针对html标签，进行不同的样式设定，比如页面背景是什么，字体大小、颜色是多少，图片要不要圆角，它就是一个装修师傅，没有css，页面内容仍然会出现，但会很丑。
js 脚本文件：是用于控制页面交互响应的，比如你点击了一个按钮，触发了一个弹窗，这个行为就是js脚本来控制的。同时js代码可以动态改变 html 和css 的内容。

了解了上述3种基本类型的脚本文件，我们介绍一下浏览器渲染这三种文件的顺序是什么？

浏览器渲染页面资源顺序

浏览器从上往下，一行一行解析html标签代码，遇到代码中包含了资源，则先请求资源文件，然后加载到页面中，例如图片、视频

解析过程中遇到 <script> 标签，则停止渲染内容，等待script的资源【获取】并【执行】完毕，再接着渲染

优化技术原理小结

了解了上述的基本过程，我们就能更深刻的理解，从源头上到底该如何去做优化。站在技术原理的角度，我们可以从下面3个部分来进行：

1）减少资源的请求数

减少页面需要加载的图片视频等资源。这个比较好理解，如果你有一堆包裹需要取回来，每个包裹的体积，刚好都沾满了你的运输工具，导致一次只能拿一个包裹，自然包裹数量越少，你整体取包裹的时间就越短。

2）减少请求资源大小

压缩图片、视频、js脚本等资源文件，减少资源大小。同样拿取包裹来举例，当你把包裹的体积缩小了，一次能装2个包裹了，那整体取包裹的次数也能较少，花费时间也少了。

3）减少阻塞脚本

前两个措施是从服务器请求资源的角度来看，第3个措施，减少阻塞脚本是从页面渲染的角度。它能提升首屏文字、图片内容出现速度。

Shopify 中速度为什么会慢？

脚本角度

1）统计代码过多

有一些统计代码必须要放在页面头部，否则无法完整监测用户行为，例如GA，如果我们要完整监测例如：跳出率等数据，它就必须要在页面内容呈现之前加载，根据上面的原理，它会阻塞页面内容加载。

举例：shopify中我们常见的一些统计代码有

Google Analytics (GA)：Google 最常用的数据统计工具
Google Tag Manager：更方便灵活的埋点管理，直接后台定义埋点行为，而不用每次新增埋点行为都在GA中发生，相当于GA升级版本，但是在shopify中，只有 shopify plus 才支持使用对交易行为进行监测，普通版本不支持。
Google optimize：Google AB Test 工具，用于控制页面跳转、页面内容AB版本显示（需要放在页面）

2）存在冗余代码

不要放在head中的脚本可以挪到 body 下

插件卸载以后，仍然有残留的代码，需要单独清理

内容角度

1）图片

没有进行压缩、文件大小不合理，一般不超过 200kb
格式尽量使用 jpeg（有损压缩，体积小），不要使用png（无损压缩，体积大）。图片压缩工具通常可以使用 https://tinypng.com/

2）视频

资源过大需要压缩，页面商品陈列视频，尽量不超过 10mb
主图视频长图控制在 10s 内，< 5mb 最佳

尽量不直接引用 youtube视频，耗费网络请求资源较大；一定需要引用的，请减少数量。

3）文件引用服务器位置

尽量使用 shopify 自带的文件服务器，因为可以复用shipify 自己的cdn功能，提速网站，而不是复制一个网络资源路径

4）页面pc和移动端内容重复冗余

使用shopify构建页面，特别是使用类似 pagefly 等自定义页面工具，在做pc和移动版本适配的时候，特别容易出现的一个现象是，将pc和移动版本分别做一套，然后使用隐藏属性去做自动呈现。在页面整体内容结构不多的情况下问题不大，但是一旦内容特别多，这会导致资源的翻倍引用，不仅页面dom模块暴增影响渲染性能，最大的时间支出会发生在网络资源请求上，因为虽然元素不显示，但是如果其中引用了资源，该资源仍然会被请求，占据网络加载时间。