大家好，我是烧麦

本篇文章我们来聊聊如何提升网站的加载速度，因为网站的加载速度关系到客户的转化率。

这个我们在广告投放中可以很清晰地看到，也就是链接点击量与落地页的浏览量，如果说你的网站整体加载速度超过了 3 秒钟，那你的网站至少要流失 50% 以上的人，如果你的广告还没有什么吸引力的话，那你的流失率甚至最高可以达到 70%-80% 以上。

这是妥妥的捐钱做慈善的行为，所以本篇文章就从：

  • 图片压缩 & 加速
  • 视频加速 & 压缩
  • 服务器提速

着重来讲一讲如何用小改动提高 80% 的网站加载速度，话不多说，我们进入正题：

图片压缩

虽然 Shopify 这种Saas 建站平台本身自带自动压缩功能，但我们尽量不要将美工设计出来的原图——尤其是那些几 MB 甚至十几 MB 的大图——直接上传到网站的产品页面。

这么说大家可能没有概念，举个例子：

首先，现在独立站 80% - 90% 的流量来自移动端，也就是手机。这意味着我们不能以家用的这种光纤去看待加载速度，而是要用一些真实的移动端网络去展开测试。例如我经常说的，就是当你的独立站做好之后，你将手机切换成流量网络，然后再开启一个国外的节点去看看打开你网站的速度。

在理想的 5G 环境下，下载一张 6MB 的图片只需要零点几秒。但在真实的生活环境中，情况完全不同：

  • 基站的覆盖密度： 欧美国家地广人稀，网络基建的覆盖远没有国内这么密集。在核心大城市的确很快，但一旦用户走进室内、身处郊外、或者在公路上通勤时，网络经常会瞬间掉回 4G 甚至弱网状态。你的广告往往就是在这个时候触达用户的，在不稳定的网络下，6MB 的图片就会原形毕露，变成灾难，在这种状态下，图片下载到他的手机里，就需要 1.7 秒到 2.4 秒。
  • 现实的排队效应： 当打开网站的时候，浏览器并不是一次只下载这一个图片！它还要下载你网站的主题 CSS、运行那堆复杂的 JS 代码、加载其他商品图。
  • 手机的渲染卡顿： 图片下载后并不能直接展示，手机的 CPU 还需要把这 6MB 的压缩数据解压、渲染到屏幕上。对于一些配置稍旧的手机，这种大体积图片会直接导致页面滑动时的卡顿甚至白屏。

所以，当用户未处在理想的 5G 网络环境中，那这一张 6MB 的主图，你的网页首屏完全展示出来的时间，会被生生拖长 3 到 5 秒。

而根据 Google 的官方数据：移动端网页加载时间从 1 秒增加到 3 秒，用户的跳出率就会急剧增加 32%；如果达到 5 秒，跳出率高达 90%。

这就意味着，你花重金从广告平台买来的点击，有将近一半的人因为不耐烦看着白屏，直接划走了。这张 6MB 的图片，不仅没有帮你展示产品细节，反而吃掉了你一半的广告费。

所以，在网站的图片上，是我们需要重点关注的，有以下六种解决方法：

  • 放弃 PNG 格式：虽然 PNG 这种格式的图片对于整体画面以及质感方向的保存是最好的，但它的代价就是图片大小偏大，除非你的图片必须要用透明背景，否则在网站上永远不要使用 PNG 格式。
  • 使用TinyPNG、Iloveimg等在线工具将图片无损压缩小一点。TinyPNG对于 5MB 以下的图片，通常可以压缩到一半以上。Iloveimg这个工具差不多可以压缩到 70%-80%，对于上传的图片大小相对宽松一些， 二者我都用过，使用感受都差不多
  • 转换为Webp 格式：这个格式也是我新接触到的一个格式，它非常适用于在网站上做展示。它可以在极大程度保留画面细节的情况下（肉眼几乎看不出损耗），将你的图片大小压缩到可能只有原来的 1%，目前我博客中的所有图片全都改为了 Webp 格式，强烈推荐
  • 图床：如果你的图片上传支持使用 Web 外部链接，那么你也可以直接将图片上传到你的图床，然后直接引用就可以了。这样的话，整体图片的渲染和加载就不会在你的服务器上发生，而是在你图床的服务器上完成。这种方式的整体速度会非常快，并且不占用你服务器的任何资源。在网站去做 SEO、写各种文章、加图片的时候，我会比较推荐你直接使用图床。
  • 关于 GIF 图转化为 Webp：这里我要修正一下以前的说法，就是为了极大提高网站的加载速度，直接在网站上传GIF 图还是太大了，我们也可以通过将其转化为动态的 Webp 格式，也就是 Gif to Webp，其大小一般可以压缩50% 以上。
  • 关于 GIF 图转化为 MP4：要说什么是最小的，那当然是mp4 的格式，但“视频+文字”这种版面形式，只有那些付费的、质量较好的主题才会有。一般的主题采用的都是“图片 + 文字”的版面形式，而 GIF 图也是作为图片被识别的，所以用的场合会更多。但如果要强行使用 MP4 格式，但又不想购买昂贵的付费主题，那就只能采用手动代码的形式（我会在后面讲）。

视频加速 & 压缩