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

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

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

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

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

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

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

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

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

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

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

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

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

举个例子：

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

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

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

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

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

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

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

一份html文档简要结构如下

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

浏览器渲染页面资源顺序

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

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

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

1）减少资源的请求数

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

2）减少请求资源大小

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

3）减少阻塞脚本

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

脚本角度

1）统计代码过多

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

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

2）存在冗余代码

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

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

内容角度

1）图片 

2）视频

3）文件引用服务器位置

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

5）不必要的内容过多

【快速工具-测页面请求数】Pingdom

https://tools.pingdom.com/

Pingdom是一个免费的网站测速工具，从多方面测试网站，可以测试网站加载速度，也可以对页面和大小进行分析。我们可以查看详细的测试报告，帮助用户找出影响网站速度的因素如图片、CSS等，并给出详细的优化网页性能的方案。

【快速工具-测不同区域首次加载速度】Dotcom

https://www.dotcom-tools.com/website-speed-test

Dotcom-tools的强大和特别之处即，我们可以在这个网站查看全球各个地区打开我们网站的时间，可以查看你网站在全球的速度怎么样。当然和上述测速网站一样，操作简单，不用注册会员就可以使用。

GTmetrix

https://gtmetrix.com/

GTmetrix也是一款常用的网站测速分析工具，操作页面简洁，功能强大，因此受到了很多大型网站的欢迎，比如PayPal、耐克和惠普等。

GTmetrix操作简单，输入网址或URL点击“Analyze”。我们以chinabrands.com

为例，测试了该网站的速度。测试结果以6个维度的形式呈现，分别是网页速度、YSlow、瀑布图、网页加载速度、页面加载视频、和报告历史。可以详细的展示出具体哪些资源拖累了整个网站性能。

非会员可以直接使用GTmetrix测试，默认是从加拿大节点进行网站测速。注册免费账号之后，可以使用的功能更多，可以选择7个不同节点测速，也可以选择浏览器（Chrome或Firefox）查看测试结果。

以上内容从网站性能指标、浏览器内容加载原理、优化的实践措施、相关使用工具几个层面给大家做了下介绍，基本能覆盖所有站点速度慢的问题，希望能有所帮助。