0%

再谈 Blog 的优化历程

大概在 2014 年的时候,买了一台香港的VPS,开始写博客,那时候使用的是最简单最传统的 nginx + php + wordpress 博客。

最近薅(hao, 一声)了腾讯的羊毛,360 大洋搞了 7 年的低配云服务器,折腾着迁移博客,顺便做了一点优化。

先对比一下之前 香港主机的 WordPress 和 目前的 腾讯云 hexo

WordPress:

Hexo:

从 WordPress 到 Hexo

一直到2017年,才再也无法忍受 WordPress 管理起来的繁琐,开始使用 hexo + github.io 来写博客。

WordPress 在每次访问的时候,都会进行大量的数据库查询,而关系数据库查询也是非常消耗资源的。

相比 Wp,Hexo 的优势就体现出来了,它是本地的 Markdown 文件编译成静态文件,也就是说省去了 PHP –> 数据库查询 这一个步骤。无论是对服务器的负荷还是对网络的负荷都远远低于 WP。

关于 Hexo,这里是官网 https://hexo.io/,使用起来非常简单。
另外尽量使用一些简洁的主题
我使用的是: https://github.com/litten/hexo-theme-yilia

从香港主机到 GitHub, 再到 Coding 双线解析

考虑到博客的健壮性和部署的便捷性,我把博客部署目标选择到 Github 的个人主页。

参见此处:https://pages.github.com/

新建一个同名项目,如 zhukejin.github.io, 保持私有。此项目即为 github 个人主页的资源。

但是因为一些众所周知的原因,国内用户访问 github 偶尔不稳定,这时候轮到 https://coding.net/v1/pages/ 登场了,coding 的服务可以理解为国内版的 github,有着跟 github 几乎一模一样的使用、部署方式。

Hexo 自带了git 方式部署,所以只需要简单配置即可:

为了国外用户继续访问速度更快的 github,可以使用双线解析:

将海外 IP 解析到 pages.github.io, 将国内 IP 解析到 pages.coding.me。

如图使用的是阿里云的 DNS 解析:

上图是我现在的解析,不过已经干掉了 coding.me, 而是指向了我自己的腾讯云 IP,但是海外线路依旧是 Github.io

部署腾讯云

在前几天薅了腾讯的羊毛后,想同时把 hexo 三线部署到自己的服务器上,怎么搞?

  1. 在服务上安装一个 git,然后作为初始化仓库,往里面push 东西。
  2. 在服务器上安装 ftp, 然后通过 hexo 提供的 ftp 方式部署。

然鹅俺比较懒,也不想装 git 也不想装 ftp, 于是自己写了个简单的脚本:

1
2
3
4
5
6
7
8
9
10
11
12
13
#!/bin/bash
cd ../blog
zip -q -r blog.zip ./public
scp blog.zip tencentyun:/home/web
ssh tencentyun << eeooff
cd /home/web
rm -rf blog.bak.zip
zip -q -r blog.bak.zip blog
unzip -o blog.zip
rm -rf blog.zip blog
mv public blog
eeooff
echo push success!

懒人思路:
直接用 scp 把 hexo 编译的 public 文件夹打包上传到服务器,然后在服务器解压即可 TAT..

开启 Nginx 的 GZIP

GULP 双重压缩静态资源

css sprites

中文可以称之为 “CSS雪碧图”,这种方法就是把一些零碎的图片、图标集中在一张图上面,使用的时候通过 Position 来显示对应的位置。

和js、Css多文件整合一样,这样做的好处就是可以减少大量的 HTTP 请求,要知道每次 HTTP 请求都是非常消耗时间的,

CDN 接入

CDN 厂商在全国各地都有机房,方便访客以最快的速度访问最近的节点,这点显然是比我们自己的单点服务器优势要大的多。

比如在 Hexo 中使用七牛的图床、使用Bootcdn 的Jquery、Rest.css 这样的资源。

预加载

在一些比较大的项目中,如果使用了trunk 拆解后,静态资源依然很大的,可以考虑预加载的思路,常见的预加载有两种方法:

  1. 当用户触发Hover 的时候,预先加载用户 “有点击趋向” 的页面,常见绑定在菜单、导航中。在存在加载即生效的资源下,这种方式风险比较大,要谨慎使用。
  2. 而在手机页面中,click 事件本身便有300ms 的延迟,完全可以在这段时间内做预加载。

这里要提到的是一个库 InstantClick

官网:http://instantclick.io/

InstantClick 封装了这两种方式,并且提供了白名单、黑名单策略,防止敏感资源的误加载。

Nginx 通知浏览器缓存资源

考虑到图片这些资源, 基本情况是不会变的,可以在 Nginx 中做如下配置,缓存一个月。

1
2
3
location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 1M;
}

但是需要注意一点,如果开启了缓存, 最好在更新版本时加上hash值、版本号这样的标识码,以防止新资源无法加载。

关于升级 HTTPS 带来的性能损耗