探究COCONUTIO.COM网站速度为何飞快

前言

前阵子在和线下课的同学私底下交流建站的时候，提到了网站速度，突然就想起来看一下颜sir的https://coconutio.com/  的网站速度，不看不知道，一看吓一跳，移动端performance竟然有97分.

太(you)变(xiu)态了。

于是乎，研究了一下https://coconutio.com/

网站配置一览

域名解析：

Cloudflare DNS https://www.cloudflare.com/：免费，解析速度快，减少延迟，还可以隐藏真实的服务器地址。

Cloudflare是比较出名的且少有能免费使用的美国CDN服务商，虽然相对付费版本，它的免费版本功能有缩水，但是依然强大

主机服务商

https://www.hostinger.com/ 

颜sir在建站课上应该有推荐的，价格合适，速度快

页面编辑器

Oxygen Builder，相对elementor速度更快，但是上手难度高很多，普通小白不推荐食用

其他已知WP插件

Flying Press缓存插件

Fluentform 表单插件

CDN

Bunny CDN

数据分析

1. Lucky Orange

2. GA4

Google官方工具测速结果

https://pagespeed.web.dev/

测速结果如下（可以放大图片看详细）

大家可以用这个工具测一下自己的网站，移动端的performance很可能<40分

So, coconutio网站为什么速度这么快？

经过我的一番探索，最主要的应该是如下几点：

Litespeed Server

LiteSpeed服务器是一种高性能、高可靠性、安全的Web服务器。它是Apache Web服务器的替代品，因为它具有更快的性能和更低的资源消耗。LiteSpeed服务器支持所有Apache功能和模块，并且与Apache配置文件兼容，使得迁移变得非常容易。

没有七七八八多余的插件

安装过多的WordPress插件可能会对网站性能产生负面影响。虽然每个插件的影响程度不同，但总的来说，安装太多的插件会增加网站加载时间、减慢页面响应速度，并可能导致服务器负载增加。

其实B端网站的功能，没有像C端那么多，只需要装几个必要的插件的。

我见到插件最多的一个同学，安装了35个插件，大部分插件他自己记不清楚是什么时候安装的，也不清楚是做什么用的，更加不知道为什么要安装了（欢迎对号入座），最后帮他精简到只剩12个了……

网站开启了各种压缩：

○ gzip，js，css等

○ 排除或者异步加载了不用的js代码，

○ 特别是css代码，只挑有用的加载

○ 整个首页压缩之前只有660KB，可能我们很多同学的一张图片都不止这么大

○ 压缩后仅296KB

网站请求数精简到了极致

网站请求数过多可能会对 Core Web Vitals（CWV）产生负面影响，当网站请求数过多时，可能会导致以下问题：延迟页面加载：过多的请求数可能会导致页面加载时间变慢，从而影响LCP指标。阻塞用户交互：过多的请求数可能会阻塞用户与页面的交互，从而影响FID指标。视觉不稳定：过多的请求数可能会导致页面元素在加载过程中频繁移动，从而影响CLS指标。

○ 而coconutio整个首页只有29 Requests

oxygen builder做的网站，整体来说相对不那么臃肿

相对于elementor，oxygen builder在灵活性、性能优化、可重用性、定制化方面，更加有优势，虽然Oxygen Builder的价格比Elementor高，但Oxygen Builder是一次性购买，无需每年续费，因此从长远来看更经济实惠。

缺点也很明显：Oxygen Builder的学习曲线比Elementor陡峭，需要有很扎实的基础，耗费大量的时间和学习精力来掌握其功能。

因此，对于一些简单的网站建设，Elementor可能会更适合初学者。

网站图片已经优化到了极致

VPI

webp

使用svg格式图标

网站使用的FlyingPress缓存插件

网站使用的Bunny CDN

是一款性价比超高的CDN服务商，在https://www.cdnperf.com/网站排名第一，全球有70多个节点，价格还不贵

我们可以结合自己的网站来做些什么？

当然是抄颜sir作业，提升自己网站的速度了，这是我抄作业前后对比：

Before

After

SO, 你还在等什么？赶快抄作业吧。

如果碰巧@颜sir说 看到了这篇文章，还请多多指点遗漏的知识点，感谢。