
又对博客优化了一波。

---

## 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(*￣▽￣*)ブ  
![好快的斯比的](/img/posts/speedup2/speedup2.png)

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

### 懒加载
使用了 [lazysizes](https://github.com/aFarkas/lazysizes/)。  
使用及其方便，只需引入一行 `<script>` 即可：
```html
<script src="lazysizes.min.js" async></script>
```
然后我们需要给 `<img>` 设置 `class="lazyload" data-src="..."`  
Hexo 可以在主题中加入 helper 来影响生成的文件，直接将helper放入主题目录的 `scripts` 文件夹里就会自动启用了。这里直接从 Butterfly 主题抄了份：
```js
/**
 * 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 冲突就注释掉了。这下又能开起来了。  
```js
"serviceWorker"in navigator&&navigator.serviceWorker.register("/sw.js")
```

### Instant.Page
删除 InstantClick 主要是发现了作者的另一个项目 [Instant.Page](https://instant.page/)，使用起来更方便一些，效果也相差无几。  
```html
<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。

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

CDN

一些设置

DNS

JS 优化

懒加载

谷歌统计

Service Worker

Instant.Page

the end.