Blog 优化计划（待办）

使用 Lighthouse 对页面进行了评分，不过体验比较差，下面是一些优化事项。

图片

• 使用图片给定大小，对于移动端也需要考虑到响应式
• 对于非首页的图片资源延迟加载
• 给图片进行压缩和设置为新一代图片资源，例如webp格式
• 对于首屏图片，进行预加载提高页面LCP的响应时间

资源缓存

• 对于直接引用的script脚本进行资源缓存管理，添加过期时间等

体验方面

• 对文档布局出现偏移问题修订，原因集中在图片二次加载导致
• 对标题需要正确降序，不允许出现h1 -> h4的情况出现
• dom层级嵌套太深，需要减少嵌套层数，重构dom结构
• 首页不展示过多列表项，缓存在数据中，下拉展示更多（分页继续保留）
• css重写，改用css原子化来节省空间
• 预先加载重要资源

安全

• 禁止第三方Cookie
• 在输入地方可能导致XSS攻击进行防范；

加载速度

• 使用vercel托管应用
• 使用fastly.jsdelivr.net来加速资源