menu Thinking Null
more_vert
记typecho的一次维护
2020-07-30 | typecho维护 | 暂无评论 | 308 次阅读 | 1382字

[TOC]

起因

博客的加载速度实在是太慢了,chrome Dev tools显示,完成加载需要15s以上,让人难以接受。
使用PageSpeed Insights进行测速,手机版20分,电脑上不到60分。是什么阻止了网页的快速加载?让我们来一探究竟。

奇怪的第三方

诊断结果--详细了解您的应用的性能。这些数字不会直接影响性能得分。
  • 降低第三方代码的影响 第三方代码将主线程阻止了 12392 毫秒

让我看看是谁敢阻塞爷

第三方传输文件大小主线程拦截时间
JSDelivr CDN200KiB0ms
Bootstrap Chinese Network480KiB10292ms
CDNJS...1100ms

???后面那两个是减速器吗???
Bootstrap是中国优化,海外节点逊可以理解,,,但CDNJS由云耀斑驱动,怎么也这么屑?好在CDNJS启用了HTTP / 3 QUIC协议所以大陆访问速度并不慢(但域名解析失败又是怎么回事?

过载的主线程

最大限度地减少主线程工作 - 8.2 秒

建议您减少为解析、编译和执行 JS 而花费的时间。您可能会发现,提供较小的 JS 负载有助于实现此目标 了解详情


开始行动

2020-07-28 to 2020-07-29

首先得把垃圾CDN扬了

BootStrap死 CDNJS死 这样以后就没有别的选择了,JSDelivr 天下第一!
Pio插件中l2d.js还是占用了加载时间的大头。其中2d模型png文件就500+KiB,传输时间动辄10s+。
Pio插件提供了便捷的cdn设置页面,

选择外链模型
model.json-JSDelivr
在这里填入一个模型配置文件 model.json 的地址,可供使用外链模型,不填则使用插件目录下的模型在这里填入一个模型配置文件 model.json 的地址,可供使用外链模型,不填则使用插件目录下的模型

Pio
原来不止我一个在用JSDelivr加载Pio插件,填好,再测试,500KiB的模型png仅加载了100ms!震撼我,...
主页加载时间从20s+一下子缩到了8s以内,但这就是极致了么?不,一定还能继续省!
很快我就发现炫彩鼠标插件HoerMouse从外部源(lib.sinaapp.com)加载了jQuery1.9.1,既然主题和各种插件都加载过jQuery了,还有加载的必要吗?我试着关闭,经测试,炫彩鼠标插件正常,谁知这却给代码高亮插件埋了雷。

还能再节省一点吗

HoerMouse

从本站也加载了好几个文件,这也对速度造成了影响,于是我从Gitee克隆,一瞬导入Github,并修改相关代码。Github-HoerMouse-First commit
使用JSDelivr加速,效果也不错。
HoerMouse GitHub GitHub tag (latest SemVer)

MDr

MDr主题看起来不错,除了背景惨白不能自定义之外都挺好。编辑外观页面提供了便捷的CDN设置,可惜MDUI静态资源来源不能选jsDelivr,什么?还有小学生递送不能加载的资源?还好可以自定义,一共加载两个文件,却只有一个输入框,一番摸索之后,终于找到文档,原来是先写css,第二行写js
MDr

好了,搞了那么多,终于大功告成了,再去测试一下

实验室数据

项目时间
首次内容绘制时间1.3 秒
速度指数1.4 秒
最大内容渲染1.6 秒
可交互前的耗时1.8 秒
总阻塞时间320 毫秒
累积布局偏移0.001

Pagespeed有时甚至能达到90(PC端),手机端分数不高,不过实际体验也不错。那本次维护就能告一段落了。

小结

JSDelivr是好文明

得益于 HTTP / 2多路复用和TLS 1.3以及CHACHA20_POLY1305算法的应用,即使是加载数十个资源,共2MiB文件,速度也很快,当然,JSDelivr在中国广泛的CDN节点分布也功不可没。

同时加载这么多资源会不会产生阻塞?

不会。在HTTP / 1.1 中,浏览器会限制并发请求数,控制TCP连接数在2-8之间,排队加载。所以在过去,静态资源要从多个域名下加载。在HTTP / 2 中,由于多路复用,从同一个域名下加载静态资源,不仅不会阻塞,还能减少DNS解析次数,连接建立的耗时等。

旁生枝节

EditorMD

EditorMD在加载首页时会请求几个css和js,为什么不给它们加上CDN呢?就像刚刚一样,我修改了plugin.php内的地址,在一次测试中发现,网页上所有代码高亮都没了!

一瞬回档(初中生行为,怎么办呢,,,

  • 上一次看到代码高亮是什么时候?
  • 有无备份?

思考完这些问题后,先回档到修改EditorMD之前,没有用,再回到开始维护之前,还是没有用。:scream:完了qwq
干脆直接回到建站之初,只有3篇文章的那个备份。乱捣鼓一阵,还是没用,原来我只备份了网站,没有备份数据库。而插件的设置正是保存在数据库里的,我只能一个个回忆改了什么设置,一个个改回来。

尾声

原来是HoerMouse里加载jQuery的选项被我关了,这样不影响炫彩鼠标,却影响了代码高亮。控制台还没有提示,看上去一切正常,服了。


总结

通过这次维护,我学会了:

  • 及时备份
  • 测试做完整,不能只测试首页
  • 注意事物之间的联系
  • 使用Git进行版本控制
  • 使用To Do List记录做了什么,没做什么
  • 少做少错,不做不错

以上

2020-08-06 19:21 星期四
awsl.blog控制台


下次维护列表-gugugu

  1. 搞清楚各个插件之间的依赖关系,尽量相互独立
  2. 减少不必要的js
  3. 制作位于英国的镜像站,符合GPDR
  4. 搞一个更好看的背景
None
发表评论
暂无评论
textsms
account_circle
email
link