web性能优化系列总结

本文是对web性能优化系列文章的一个总结，这个系列主要记录了工作中或个人网站搭建进行性能优化的解决方案。

1. 为什么性能很重要？

在构建现代网络体验时，如果希望获得快速的体验并加以维持，那么对网站进行衡量、优化和监控就显得至关重要。性能对于任何线上项目的成功都起着重要作用，因为高性能web应用比性能欠佳的web应用体验更好，更能吸引和留住用户。

• 性能是留住用户的关键
• 性能意味着提高转化率
• 性能关乎用户体验
• 性能影响人们的访问成本

2. 性能指标

下面是一些值得考虑的指标：

• 首次内容绘制 （FCP）测量浏览器何时显示 DOM 中的第一部分内容，如文本或图像。
• 交互时间 （TTI）衡量页面完全交互并可靠地响应用户输入所需的时间。

设定目标：

• 首次内容绘制在1000ms内
• Speed Index 在1500ms内

• 在 5 秒内交付内容并实现可交互
• 在 50 毫秒内处理事件
• 在Lighthouse审计中获得 > 80 分

3. 该怎么做？

接下来一起探讨下之前的《雅虎35条军规》目前是否还适用，以及还有哪些新鲜好玩的方法。

首先，要进行性能优化，先要进行分析，这就用到一些调优工具

• web性能优化之浏览器开发者工具
• web性能优化之Lighthouse审查

其次优化加载速度

• web性能优化之资源加载
• web性能优化之缓存机制
• web性能优化之内容分发
• web性能优化之Gzip压缩
• web性能优化之HTTP/2
• web性能优化之图片处理
• web性能优化之字体优化

再优化运行速度

• web性能优化之DOM优化
• web性能优化之SSR同构渲染