记录给自己的网站提速的方法有哪些

最近给我自己的网站提速,像我这个破网站,随便优化优化,收益高得不得了。之前有说过我的服务器是学生价买的最低配的服务器,当前使用带宽: 1Mbps,这玩意随便几张图就急得不行。所以我网站在任何人电脑上第一次打开都得卡个十来秒来下图,辛辛苦苦做的动画啥都看不到,这可不行。

第一步:上传静态文件cdn

因为这些图片都是一些静态文件,是可以丢到 cdn 而不走自身服务器的,所以第一步就是在阿里云开了个 oss,把这些图片丢上去。过程很简单,找个最便宜的资源包,买它!再弄个 Bucket,新建个目录,上传图片。完事。这样一操作,图片加载速度一下就快了很多。

第二步:图片使用 Webp

但是图片依旧是 4、500k 的大小,太大了,是不是有别的更小的图片类型呢?

哈!Webp! 这个厉害了,同样的图,342k 的图压缩到了 57k,就这么定了!

第二步就是将全部静态图片都换成 webp 然后压缩一番再传到 oss 上,这样一来,我这个动画效果就能完美展示,再也不会出现少图的情况了!

但是!Webp 并不是所有浏览器都支持,特别是 Safari,从头到位没一点绿,这就很难受,Safari 上就是完全看不到这个动画了!

…这个…目前还没想到怎么解决,可能…全部换回png或者jpg吧…先不纠结这个了,还是看看网站哪里还能再加加速。

第三步:服务器使用 GZIP

GZIP!又是压缩!要加快就是要将同样的内容用更少的数据传给客户端。

加这个也很容易,在 nginx 的总配置的 http 里添加

  1. gzip on;
  2. gzip_min_length 1k;
  3. gzip_buffers 4 16k;
  4. gzip_comp_level 2;
  5. gzip_static on;
  6. gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  7. gzip_vary on;
  8. gzip_disable "MSIE [1-6]\.";
  9. # 每个属性都有对应的效果,可以去看看对应的文档。

配置好后重新启动一下 nginx 就好了。在看网站的对资源的请求,可以看到有 Content-Encoding: gzip 这么一条属性,这就说明 GZIP 配置成功了。

到目前,我的网站也就做了这三部来提高页面加载速度,不多,也不麻烦,但是效果很好(因为底子太差),其实很多正经项目都会有第一步和第三部的操作,可以说是基本操作,我在这只是作为一个初学者来学习这些东西。

其实之后还可以有第四步。

第四步:使用 http 2.0

目前我所见的网站大多都还是使用的 http 1.1,其实 http 2.0 老早就出了,http 2.0 相比 http 1.1/1.0 优化了好多好多,简单点说就是:多路复用,二进制分帧,首部压缩,服务端推送,更多可以参考这个。

以我目前的水平来看 http 2.0 能给我带来啥好的,我就是觉得多路复用挺好的。之前的 http 1.1/1.0协议中,浏览器客户端在同一时间,针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞。

对我的个人网站来说,欢迎页面有很多图片,但是图片不能同时请求,只能几个几个的分批请求,但是如果使用了 http 2.0 则没有这个限制。

但是 http 2.0 需要 https,这个其实也很简单,按着步骤来1、2、3 分分钟就好了。

以上就是我已经或者将要对网站加载速度做的优化操作,很简单,有的也很基础,但是对那种完全没做过优化的网站来说,这些操作带来的收益是非常非常高的,一定得做。

 

转载请注明链接地址:荐爱小站 » 记录给自己的网站提速的方法有哪些

赞 (0) 赏 !

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  • 计算 (必填)

觉得文章有用就打赏一下吧,赠人玫瑰手有余香!

支付宝扫一扫打赏

微信扫一扫打赏