主页关于链接归档灯泡

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

代码

又对博客优化了一波。


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( ̄▽ ̄)ブ
好快的斯比的好快的斯比的

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。

the end.