有任何问题请联系:im@6s.ink

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

技术 · 23 天前 · 201 人浏览

前言

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

1.分类、标签、标题

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

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


2.页面加载速度

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

3.网站 LOGO

网站 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优化前测试

优化后Lighthouse测试
Lighthouse优化后测试

后记

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

技术 优化网站
  1. 广树 21 天前

    有优化意识的大佬,好强!

    1. Mello (作者)  21 天前
      @广树

      大佬不敢当不敢当

  2. 刘郎 23 天前

    优化哪里都记得这么清楚👍我一般优化后都不晓得自己优化了什么 😂

    1. Mello (作者)  22 天前
      @刘郎

      没有啦,我都是土办法优化一点写一点

      1. 刘郎 22 天前
        @Mello

        不错👍

大棉博客. All Rights Reserved.
Theme Jasmine by Kent Liao
BlogFinder | 个站商店 | 博友圈