【技术】网站优化简易报告

前言

这次优化围绕页面打开速度和访问者来访第一印象为中心进行优化。
提前说明： 此次打开速度优化基于webpagetest.org、Lighthouse性能检测测试结果和建议进行修改，因为博主会的代码不多，所以只是在表面修改一下，更深入的比如修改框架什么的不会。

1.分类、标签、标题

标签和分类是我在写文章最头疼的事情，因为我一直确定不好文章该放到哪个分类里面，应该为文章添加那些标签，最后导致我在一年前从 WordPress 迁移到 Typecho 之后放弃了给文章添加标签，分类也重新开了两个常用。
我喜欢在标题前带一个【】里面写上这个文章的分类，这样访客会一眼看到这篇文章是什么类型，我的博客首页也会整齐一点，刚写文章时候我不怎么会固定写常用的分类，导致标题前的分类很乱。
分类、标签： 我参考了noodlefighter.com的文章，其他分类项合并留下常用的两个分类，标签经过优化去除了重复和独立标签留下三个固定标签，之后标签也会增加一些但不会增加重复意义的标签。

标题： 我下载了可以批量修改文章标题的插件Github，根据我上面优化的分类称修改了之前胡乱加上的标题前缀。

2.页面加载速度

1. 字体不使用主题自带的.woff2 文件，使用中文网字计划字体在线分包重新部署，实现字体分包按需载入，相对于之前字体加载速度大幅提升。
2. 页面大部分图片使用squoosh.app、tinypng.com重新压缩并更换为 webp 格式。
3. 格式化加载小表情的 json、css、js 代码，小表情使用img标签，所以可以使用loading="lazy"进行懒加载。
4. 启用 CDN 缓存大部分不常更改的资源，使用 typecho 页面缓存插件TpCache。

3.网站 LOGO

网站 logo 之前一直使用的是我设定约的模板稿子,优化后使用申请版权的常稿作为网站 LOGO，并且增加了更多格式和尺寸。

4.去除无用的调用链接

之前一直使用 cdn.dmxvx.cc 放置小表情、LOGO 什么的东西，现在发现放置的东西都可以转到主域名下，而且方便一些。
把全部东西改到主域名下，cdn.dmxvx.cc 更改为 CloudFlare CDN 放置友情链接需要请求的 LOGO。
在修改过程中发现主题调用的图标iconify.design链接已经无法连接，重新修改图标 CDN 链接。

5.网站多重备份

网站之前使用堡塔Onedrive插件自动备份，但Onedrive免费只有5G空间，插件有时候抽风没法自动删除过期的备份文件导致空间时不时爆满，之后翻堡塔免费插件时候看到有谷歌硬盘备份插件，谷歌免费空间是15G足够我的网站文件备份好几天。

6.文章图片上传

之前一直是使用 Typecho 后台自带的图片上传，但由于 Typecho 过于“简洁”只有基本的图片上传和查看，想要一些其他的功能需要重新安装插件。
我安装了网上说的最多的兰空图床并不适合我，兰空图床功能确实多但是安装过于繁琐并且需要数据库才能使用，而且备份会占用更多空间，迁移服务器的话也会很琐碎。
最终我使用的简单图床，简单图床不需要数据库支持只需要 PHP 和一些 PHP 插件即可使用，并且主界面很简洁，自带的一些功能足够我使用，备份直接上传网站文件夹即可全站备份。

7.最终测试截图

webpagetest.org 测试结果

优化前Lighthouse测试

优化后Lighthouse测试

后记

这篇优化也持续了差不多2~3个月，主要因为现实世界的事情太多导致操作到一半就被唤去干其他事情，等下次再碰到电脑也过了2-3天之前操作的也忘的差不多了。
Lighthouse和webpagetest上的一些测试项目已经尽力修改了，但我理解起来蛮吃力的，之后有时间慢慢研究一下。
之后也会时不时优化一下站点，会像这样把优化内容整合到一起攒攒字数再发布。