一次优化网站图片加载速度的尝试

记得看过一本小说，里面提到一户穷苦人家，因为贫困，不敢要小孩。网站也是如此，因为带宽和机器性能的限制，不敢放太多的图片。那户人家有了钱之后开始生养小孩，但是在基础设施没跟上之前，网站已经有一些手段可以使用。

“以邻为壑”是最容易想到的方案，也是我最后用的方案。

所谓“以邻为壑”，就是让图片的流量走别的速度快的网站——图床。

注册一个账号，把图片上传上去，图床会帮你生成一个URL，然后在自己的网站里引用就好了。（详情参看https://zhuanlan.zhihu.com/p/35270383）

下一步就是把网站里用到图片的地方替换成这个URL，完全自己开发的倒好办，如果使用Wordpress这类网站框架，需要一些技巧：

以Twenty Seventeen这个主题更换首页图片为例，修改parts/header/header-image.php这个文件里的the_custom_header_markup()这一行的内容为对应的HTML就好了。

需要注意的是，管理后台修改这个文件后Wordpress会试图校验其中是否含有错误，由于国内网络的原因，可能会失败，此时需要采用其他方式来直接修改服务器上的这个文件。

在做这件事情的过程中学到了不少东西：

1. 七牛云的注册功能有问题，邮件收不到确认链接
2. 图床支持以URL的方式上传文件
3. 编码不同尺寸图片的方式有.md.jpg，.th.jpg，-WxH.jpg等
4. 两个新的HTML属性：image标签的srcset和sizes
5. PHP文件的HTML注释与代码注释的区别
6. Wordpress的表设计（图片和文章存在同一个表里）
7. Wordpress和浏览器在提高网站加载速度上已经做了哪些事情
8. 如何使用Safari自带的开发者工具排查网络性能问题

从发展的眼光看，解决这个问题的过程要比结果更有意义。