关于这几日对博客做的一些优化·贰

date
Apr 22, 2022
slug
speedup2
status
Published
tags
代码
summary
又对博客优化了一波。
type
Post
又对博客优化了一波。

CDN

都上备案了,不能白跑一趟,火速上了又拍云的 CDN 加速,说实话我对 CDN 这方面完全不懂,只能随便设置两下,但是提升还是很大的。

一些设置

全局缓存一天(源站资源迁移的生效条件是缓存过期时间必须大于 24 小时) 分段缓存 智能压缩均拉到3级 页面压缩打开 证书使用了腾讯云免费发的,直接上传就能用了。 TLS 1.3 开启,最低 TLS 1.0 开启 HTTP/2 + Server Push (自动推送 css 和 js ) 想少挨点打,还是开了 IP 限制:一分钟内超过50个请求就屏蔽10分钟 CC 防护打开 WAF 保护打开 WebP 自适应打开

DNS

境外访问解析到 Vercel,国内则解析到又拍云。
一波操作后,直接就是绿油油一片o( ̄▽ ̄)ブ
notion image

JS 优化

加入了懒加载、谷歌统计和 Service Worker。然后把 InstantClick 去掉了。

懒加载

使用了 lazysizes。 使用及其方便,只需引入一行 <script> 即可:
<script src="lazysizes.min.js" async></script>
然后我们需要给 <img> 设置 class="lazyload" data-src="..." Hexo 可以在主题中加入 helper 来影响生成的文件,直接将helper放入主题目录的 scripts 文件夹里就会自动启用了。这里直接从 Butterfly 主题抄了份:
/** * Butterfly * lazyload * replace src to data-lazy-src */ 'use strict' const urlFor = require('hexo-util').url_for.bind(hexo) function lazyload (htmlContent) { const bg = hexo.theme.config.lazyload.placeholder ? urlFor(hexo.theme.config.lazyload.placeholder) : 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' return htmlContent.replace(/(<img.*? src=)/ig, `$1 "${bg}" data-lazy-src=`) } hexo.extend.filter.register('after_render:html', function (data) { const config = hexo.theme.config.lazyload if (!config.enable) return if (config.field !== 'site') return return lazyload.call(this, data) }) hexo.extend.filter.register('after_post_render', data => { const config = hexo.theme.config.lazyload if (!config.enable) return if (config.field !== 'post') return data.content = lazyload.call(this, data.content) return data })
按照自己需求改动即可。

谷歌统计

不知道是什么时候谷歌统计已经升级成了 gTag.js,总之要兼容 InstantClick 我是不知道怎么弄,总是重复发生请求,一次访问会统计两次。 既然解决不了问题,那就解决掉提出问题的人,直接对 InstantClick进行一个 Delete。

Service Worker

老东西了,貌似现在还有升级版,不过我这个主题最初编写的时候就有加入 sw.js,后来因为和 InstantClick 冲突就注释掉了。这下又能开起来了。
"serviceWorker"in navigator&&navigator.serviceWorker.register("/sw.js")

Instant.Page

删除 InstantClick 主要是发现了作者的另一个项目 Instant.Page,使用起来更方便一些,效果也相差无几。
<script src="instantpage-5.1.0.js" type="module" defer></script>
原理主要是利用 <link rel="prefetch" href="url"> 来预加载页面之后缓存起来,在点开链接的时候就可以直接使用缓存的内容。 默认是在鼠标悬停链接上65ms后开始预加载,但是这样有可能造成浪费,可以在 <body> 加入 data-instant-intensity="mousedown" 更改为鼠标按下时开始预加载。 也有像 data-instant-intensity="viewport-all" 全屏预加载这种丧心病狂的设置。之后或许会单独出一篇文章介绍 Instant.Page。

© Cesirdy 2022

粤ICP备2022045639号又拍云