前言
这次优化围绕页面打开速度和访问者来访第一印象为中心进行优化。
提前说明: 此次打开速度优化基于webpagetest.org、Lighthouse性能检测测试结果和建议进行修改,因为博主会的代码不多,所以只是在表面修改一下,更深入的比如修改框架什么的不会。
1.分类、标签、标题
标签和分类是我在写文章最头疼的事情,因为我一直确定不好文章该放到哪个分类里面,应该为文章添加那些标签,最后导致我在一年前从 WordPress 迁移到 Typecho 之后放弃了给文章添加标签,分类也重新开了两个常用。
我喜欢在标题前带一个【】里面写上这个文章的分类,这样访客会一眼看到这篇文章是什么类型,我的博客首页也会整齐一点,刚写文章时候我不怎么会固定写常用的分类,导致标题前的分类很乱。
分类、标签: 我参考了noodlefighter.com的文章,其他分类项合并留下常用的两个分类,标签经过优化去除了重复和独立标签留下三个固定标签,之后标签也会增加一些但不会增加重复意义的标签。
标题: 我下载了可以批量修改文章标题的插件Github,根据我上面优化的分类称修改了之前胡乱加上的标题前缀。
2.页面加载速度
- 字体不使用主题自带的.woff2 文件,使用中文网字计划字体在线分包重新部署,实现字体分包按需载入,相对于之前字体加载速度大幅提升。
- 页面大部分图片使用squoosh.app、tinypng.com重新压缩并更换为 webp 格式。
- 格式化加载小表情的 json、css、js 代码,小表情使用
img
标签,所以可以使用loading="lazy"
进行懒加载。 - 启用 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.最终测试截图
后记
这篇优化也持续了差不多2~3个月,主要因为现实世界的事情太多导致操作到一半就被唤去干其他事情,等下次再碰到电脑也过了2-3天之前操作的也忘的差不多了。
Lighthouse和webpagetest上的一些测试项目已经尽力修改了,但我理解起来蛮吃力的,之后有时间慢慢研究一下。
之后也会时不时优化一下站点,会像这样把优化内容整合到一起攒攒字数再发布。
June 2nd, 2024 at 05:51 pm
有优化意识的大佬,好强!
June 2nd, 2024 at 08:32 pm
大佬不敢当不敢当
June 1st, 2024 at 06:08 am
优化哪里都记得这么清楚👍我一般优化后都不晓得自己优化了什么 😂
June 1st, 2024 at 06:25 am
没有啦,我都是土办法优化一点写一点
June 1st, 2024 at 08:18 am
不错👍