5分钟,我把网站性能优化了3倍

大家好,我是小德,最近有用户反映官网 页面加载速度有点慢所以我决定安排技术人员优化一下

技术花了两分钟左右敷衍我一下,但是就这样敷衍一下,网站的加载速度从 5 秒左右优化到了 1.5 秒!从时间和效果来看,这已经是一个质的飞跃了。

那究竟用了什么黑科技呢?给大家简单分享一下。

网站加载速度优化

用到了两个技术,分别是 SCDN 和 HTTP/2 ,这里重点讲下前者。

先说说 SCDN,即内容分发网络。原本,我们的网页文件都是放到单个服务器上的,来自天南地北的所有用户都只能从这台服务器上获取网站。这样有几个缺点:

1. 单个服务器压力过大

2. 如果服务器故障,所有用户都将无法访问(单点故障)

3. 离服务器越远的用户,访问速度越慢

而 SCDN 的作用就是帮助我们把原服务器上的文件分发到多个不同地域的网络节点上,当用户访问网站时,只需要从离他们最近的节点获取网页文件即可(如果获取不到,SCDN会自动从源站拉取文件,俗称回源)

因此,使用 SCDN 可以分摊单台服务器的负载、减少网站文件传输时间、为网站提升了一定的容错能力。

放一张对比网络拓补图,一目了然:

如何给网站开启 SCDN 呢?普通人是很难自己搭建 SCDN 的,一般都是使用服务商提供的 SCDN 服务。SCDN 配置更轻松、回源更快速、有问题也相对好解决。

通过上图左侧的列表,我们可以看到SCDN相关的配置是非常非常多的。

首先要配置一个域名到SCDN上,添加主域名还是二级域名看个人需求

然后要给该域名配置回源地址和回源HOST,如果SCDN还没有缓存你的文件,则会从该地址拉取源文件。回源HOST主要是为了告诉源站你是谁、是谁要从我这拿文件,从而返回给你正确的资源。

还可以进行访问控制,比如只允许特定自己域名的网页来请求文件,从而防止文件被其它网站盗用,刷了你的SCDN资源用量(扣你的钱)。

还可以配置IP访问频率限制,可以防止单个IP地址的用户攻击你的网站,也可以一定程度上限值流量,给自己省点钱。下面还有一堆的配置就不全部截图处理查看了,涉及技术配置了

使用 SCDN 的话,还得注意下缓存时间的设置,相对不发生变化的网站静态文件,缓存时间可以设置长一点。而动态网页(页面内容动态更新)一般不要缓存,否则用户看到的都是同样的内容。

这里建议大家每次更新网站静态文件时,给文件生成一个随机的后缀,可以防止更新网页文件后 CDN 没更新导致的用户看不到最新页面的问题。现在很多的前端框架和打包工具一般都会自动帮你生成文件后缀了,也不用做什么额外工作,比如技术用的 UMI 框架 + Webpack 打包工具

除了给网站加速外,如今的CDN还推出了一些派生能力,比如:

l DCDN:全站加速,不仅能加速静态资源,还能通过路由优化来加速动态内容。适用于实时性要求比较高的动态数据,可以给接口加速哦

l SCDN:安全加速,给CDN加上一层防护能力,应对DDOS、CC等攻击。(这就是小德目前在用的)

不过SCDN肯定是要花费成本的,一般是按流量计费,所以建议大家上SCDN前先思考是否有必要。比如你的网站前期用户不多、或者用户都在你服务器的机房里面关着,那大可不必增加一笔消费了。