web前端应用性能指标优化方案有哪些？

接上一篇介绍前端性能指标的内容，本文主要总结下一般使用的指标优化方案

加载相关：

FCP 优化 ：

• 降低服务器响应时间：确保服务器能迅速响应请求，这样浏览器就能更快地开始处理并渲染页面内容。可以通过优化服务端代码、改善静态资源的提供方式（如将图片部署到 CDN）来实现。
• 延迟加载非关键资源：对于非关键的脚本和 CSS 样式表，使用defer属性或async属性（对于脚本）来延迟加载，这样它们就不会阻塞页面的初次渲染。
• 使用 code splitting 和 lazy loading 优化资源加载
• 移除不必要的资源：检查页面并移除那些未被使用的样式表和JavaScript脚本，这些不必要的资源会拖慢 FCP 的时间。
• 内联关键样式：虽然这种做法会受到质疑，但如内联一些关键的 CSS 样式确实可以减少浏览器解析外部资源所需的时间，从而加快渲染速度。
• 使用预渲染，将首屏内容预先渲染好。
• 优化图片和视频的加载，使用 webp 格式的图片和视频。
• 减少首次请求数量，合并文件并使用 HTTP/2 的 server push。
• 使用浏览器缓存，设置正确的Cache-Control和Expires头。
• 优化 JavaScript 执行性能，减少首次渲染时间

TBT总阻塞时间优化

减少 TBT 时间的方式包括：

• 减轻第三方代码的影响
• 缩短JavaScript执行时间
• 减少主线程的工作量
• 控制请求数量和传输大小
  理想情况下，TBT 在移动设备上应低于 300 毫秒，在桌面 Web 上应低于 100 毫秒。

交互相关

CLS 优化
影响 CLS 分数的常见的原因主要有：

• 图片、视频和 iframe 没有预先设定尺寸，导致页面加载时元素位置变化。
• 字体加载过程中可能产生文本短暂消失或样式未加载的文本闪烁，影响布局稳定性。
• 动态内容（如广告、通知等）注入 DOM 后，尤其是网络请求之后，往往会导致页面布局发生突变

CLS 是由于布局中的意外变化而发生的，因此在编写 HTML 和 CSS 时，可以考虑以下原则：

• 避免布局重叠：不要将新元素插入到现有元素之上，因为这可能导致页面布局发生意外的变化。尤其是当插入通知或警告框时，应该考虑使用不会干扰其他页面元素的设计方法。

• 预留空间：为图像和视频元素指定尺寸属性，以便浏览器在内容加载之前就能为它们预留出正确的空间。这有助于防止页面在加载过程中发生不必要的布局调整。

• 谨慎使用动画：动画和过渡效果可以提升用户体验，但应确保它们不会导致页面布局发生不必要的改变。选择那些不会移动元素或改变布局尺寸的过渡效果，以保持页面的稳定性和一致性。

TTI：可交互时间优化
TTI 时间主要取决于以下因素：

• 页面布局稳定，所有可见的内容都已经被加载。

• 主线程空闲。如果还在加载脚本或处理其他任务，那么应用将不会处于交互状态。用户的点击和其他操作将被忽略（或排队）直到线程空闲。
  以下是一些优化策略：

• 清除冗余脚本：移除所有未使用的脚本，避免浏览器花费时间去解析不必要的代码，从而提升页面加载速度。

• 分割脚本文件：将大型脚本拆分成多个较小的文件。这有助于浏览器更有效地加载和解析这些脚本，减少阻塞时间。

• 动态加载脚本：对于来自外部资源且无法直接分割或修改的脚本，考虑采用动态加载的方式，以减少对页面初始加载时间的影响。