前言

本来我是打算先写一篇关于vim的笔记。其实我觉得自己的博客没有自己真实的技术输出，所以这些看起来文章看起来更多像自己的笔记。
我是用的是谷歌的“开发者工具”进行来实施对应优化的。

之前更多是采用Webpack的构建plugin进行优化，所以这对于我来说算是一个新的尝试。

英文词汇

Accessibility 可访问性

case n. 情况

custom n. 习惯的，v.自定义 文章里面应该指的是自定义属性之类的

collapse n. 列，简写 Col

manner n. 样子，礼貌

Performance 表演，表现

Prctices 实践，惯例

sensitive a. 敏感的，灵敏的

Treat vt. 视为，n 款待

感谢 THANKS

Is gzip compression available for GitHub pages?

skk blog

Layout Shift

html-miniifier

Fromt-End Performance Check List

术语

• Layout.shift 可视元素渲染起始位置
• Frist Contentful Paint 首次加载时间

一些建议

• Serve images in next-gen formats 2.2 s 建议我采用 Webp 或者 AVIF 格式图片。

• Efficiently encode images 1.5 s 建议我采用压缩图片和 使用更少的请求

• Eliminate render-blocking resources 0.66 s 压缩资源

• Use HTTP/2 0.3s 使用HTTP/2协议

• Image elements do not have explicit width and height 图像无明显宽高

• Serve static assets with an efficient cache policy 17 resources found应该是配置请求策略，后面转图床或者个人服务器。

• Minimize main-thread work 7.6 s 考虑减少分析、编译和执行 js 所花费的时间。

• User Timing marks and measures 用户计时标志和措施

• Keep request counts low and transfer sizes small 保持请求体积合理化

• Largest Contentful Paint element 最大绘制内容

• Avoid large layout shifts 避免大的布局变化

• Avoid long main-thread tasks

• Avoid non-composited animations

• Buttons do not have an accessible name

• **Links do not have a discernible name **

• BEST PRACTICES [user-scalable="no"] is used in the <meta name="viewport"> element or the [maximum-scale] attribute is less than 5.

• Background and foreground colors do not have a sufficient contrast ratio.背景色和前景色没有足够的对比度。

• Browser errors were logged to the console 控制台打印错误 bulma sweetaler2

• Links are not crawlable

• Web app manifest or service worker do not meet the installability requirements

• search.xml访问速度慢,search插件用的是老的数据结构能否使用json格式之类地进行，或者更加轻便的数据格式

• 工具库尝试改cdn，需要降级方案支持

• 多域名多id方案？

• 压缩模块

优化过程

• 图片资源优化可选策略
  • 替换格式，浏览器有一部分不支持，图床也要搞，还要搞个多图方案，算了吧
  • 压缩体积，采用tinify压缩，自己写启动脚本
  • 懒加载处理，以后再说
  • 小图预加载，搞到图床再说
  • 骨架渲染，现在没空
  • 分离静态资源，搞到图床再说
• 字体资源优化
  • 搞到访问好的静态服务器，最好是 free，主题里面竟然下载全部 UI 库，不过图标真的可以过我审美。
• 按钮添加可访问名称，语义化处理，seo优化
• 图片悬浮文本，语义化处理，seo优化
• 请求优化，开启 gzip 压缩
• html 压缩，css 压缩，js 压缩
• Hexo 能 treeShaking 吗

问题与思考

1. 压缩文件虽然成功了，但是部署更新并没生效。

思考：首先，我翻看了打包目录，确实html代码都被我压缩过了。

其次，我重复打包部署命令，发现里面输出文本有