如何把网站性能优化了3倍,让网页打开速度变快5倍!-配置CDN和HTTP/2教学

前言

大家好,我是不二导师,这段时间发的文章越来越多,用户的需求也越来越大,最近就有朋友向我反映不二导师网站 (buerds.com)打开页面加载速度有点慢,所以我决定先简单优化一下。

其实我只做了一件小事,等于就是在后台花了两至五分钟分钟左右,就把网站的加载速度从 5 秒左右优化到了 1.5 秒!从时间成本和效果来看,这已经是一个质的飞跃了。

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

网站加载速度优化

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

先说说 CDN,即内容分发网络。本来我们的网页文件其实都是放在你一个服务器(或集群)上面的,然后来自全网东南西北的用户都只能从这太服务器获取网址内容,这样有几个缺点。

1单个服务器压力过大
2、如果服务器故障,所有用户都将无法访问(单点故障)
3
离服务器越远的用户,访问速度越慢
而 CDN 的作用就是帮助我们把原服务器上的文件分发到多个不同地域的网络节点上,当用户访问网站时,只需要从离他们最近的节点获取网页文件即可(如果获取不到,CDN 会自动从源站拉取文件,俗称 回源 )。

因此,使用 CDN 可以分摊单台服务器的负载、减少网站文件传输时间、为网站提升了一定的容错能力。如果前段时间西安某程序用了 CDN,可能也不会闹出事故了

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

图片[1]-如何把网站性能优化了3倍,让网页打开速度变快5倍! - 不二导师-配置CDN和HTTP/2教学-不二导师

如何给网站开启 CDN 呢?我们普通人是很难自己搭建 CDN 的,一般都是使用云服务商提供的 CDN 服务。像我肯定是用腾讯云了,因为我的网站前后端全部放在了腾讯云上,CDN 配置更轻松、回源更快速、有问题也相对好解决。

图片[2]-如何把网站性能优化了3倍,让网页打开速度变快5倍! - 不二导师-配置CDN和HTTP/2教学-不二导师
腾讯云 CDN 配置

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

首先要配置一个 CDN 域名,一般是自己的二级域名(xxx.com)再加上 cdn / static 之类的前缀,比如:cdn.buerds.com。

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

图片[3]-如何把网站性能优化了3倍,让网页打开速度变快5倍! - 不二导师-配置CDN和HTTP/2教学-不二导师
回源配置

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


图片[4]-如何把网站性能优化了3倍,让网页打开速度变快5倍! - 不二导师-配置CDN和HTTP/2教学-不二导师
防盗链

还可以配置 IP 访问频率限制,可以防止单个 IP 地址的用户攻击你的网站,也可以一定程度上限值流量,给自己省点钱。虽然 DDOS 还是防不住,但总比没有要好。

图片[5]-如何把网站性能优化了3倍,让网页打开速度变快5倍! - 不二导师-配置CDN和HTTP/2教学-不二导师
IP 访问限频

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

图片[6]-如何把网站性能优化了3倍,让网页打开速度变快5倍! - 不二导师-配置CDN和HTTP/2教学-不二导师

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

图片[7]-如何把网站性能优化了3倍,让网页打开速度变快5倍! - 不二导师-配置CDN和HTTP/2教学-不二导师

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

  • DCDN:全站加速,不仅能加速静态资源,还能通过路由优化来加速动态内容。适用于实时性要求比较高的动态数据,可以给接口加速哦~(理解不了的话就想想家里的梯子 )
  • SCDN:安全加速,给 CDN 加上一层防护能力,应对 DDOS、CC 等攻击。

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

我之前没做 CDN 主要也是考虑到前期规模小、不值得,但通过统计分析后发现,目前网站用户已经覆盖了全国各地,还是用 CDN 好一些,给大家更好的体验。而用了 CDN 后,我的网站首次加载时长从 5 秒降到了 3 秒左右,不得不说,真香!

之后,在腾讯云的 CDN 配置页面,我很惊喜地发现了 HTTP/2 的开关:

图片[8]-如何把网站性能优化了3倍,让网页打开速度变快5倍! - 不二导师-配置CDN和HTTP/2教学-不二导师

HTTP/2 作为最新的 HTTP 协议,相对于现在最广泛应用的 HTTP 1.1,大幅提升了 Web 性能,进一步减少了网络延迟。

HTTP/2 的水可是很深的,什么特么二进制、多路复用、数据流、服务器主推,我是看一遍头疼一遍,后面再单独出篇文章给大家讲讲吧。现在直接用起来,快就完事!

开启 HTTP/2 后,我的网站加载速度直接从 3 秒提升到了 1.5 秒左右,如果不是有一些图片资源,还能更快!

图片[9]-如何把网站性能优化了3倍,让网页打开速度变快5倍! - 不二导师-配置CDN和HTTP/2教学-不二导师

以上就是本期分享,如果大家喜欢实践类的知识分享,求点个 赞 + 在看 吧,有什么需要补充的或者有更好的讲法可以留言哟,感谢大家 ❤️

温馨提示:本文最后更新于2022-01-13 14:48:24,某些文章具有时效性,若有错误或已失效,请在下方留言或联系不二大叔
------本页内容已结束,喜欢请分享------

© 版权声明
THE END

获取更多精彩文章请收藏本站

点赞96赞赏 分享
评论 抢沙发

请登录后发表评论