Web 应用程序的性能改进

网络生命

1. FCP（首次内容绘制）（快速响应）
2. LCP（最大内容油漆）（进入正题） 大图/文章
3. CLS（累积布局移位）（不移动元素）
4. 首次输入延迟（不要加载太多数据） 浏览器在后台处理异步工作，因此会造成延迟

注意：-

累积布局变化

1. 在用户看到的文档的整个生命周期中影响页面元素的移动。
2. 而且，这是昂贵的，因为布局会改变，然后它会再次进行布局、绘制和合成。另请注意，如果有任何损坏的像素，它将再次重新渲染

基准

LCP：

好

FID：

好

CLS：-

好

*工具：- *

用于应用程序性能监控的字段数据（实际用户数据）

1. Light House（本地性能监控具体取决于您的系统偏好）
2. https://developer.chrome.com/docs/crux/dashboard/
3. https://www.lightest.app/ （与同类应用程序比较）
4. https://www.performancebudget.io/

FCP 改进：

1. 如果您的用户距离服务器较远，最好使用 CDNS。
2. 影响很大（也可以考虑gzip）

改善 LCP

1. 将资源推迟到稍后（脚本中的 defer/async）

<script src="/assets/js/abc.js" defer></script>
// For Other image tags / video links from I frame we can use intersection Observer to handle when the view port intersect with the element.

2。优化图像（非常重要）
正如我上面提到的，即使我们加载了一点，但有些图像是 2Mb 大小，这是不需要的

有两种方法

a.使用图像压缩器（tinyPng）（imagemin npm 包）
b.使用 srcset 进行各种响应式设计，如下所述

<img
data-src="pic-1200.min.png"
src="" 
data-srcset=""
data-srcset="pic-600.png 600w, pic-900.png 900w, pic-1200.png 1200w"
sizes="(max-width: 600px) 600px, (max-width: 900px) 900px, 1200px"
/>

3。减少请求开销

预加载和预连接

<link rel="preconnect" href="https://fonts.gstatic.com" />
    <link rel="preload" href="/assets/css/index.css" />

改善 CLS

1. 请不要移动元素，即经验法则
2. 对于广告，我们需要提及这是分配的 div 的最大高度
3. 假设我们可以在底部修复 cookie 横幅。然后，与我们将它们显示在顶部相比，将会有很大的提升，并且当用户单击“接受”并消失时，我们的布局结构将不会受到影响
4. 我们的目标是 0.01 (0.059) (CLS)(LightBox)
5. 对于图像标签，我们可以指定宽度和高度属性

改善 FID

a.不要将所有事情推迟到最后，因为假设您的 LCP 已完成并且用户尝试与 UI 交互，但正如我们所做的一切推迟浏览器直到将它们加载到后台一样，所以这不是一个好主意一切都推迟。

只有不需要立即的js文件，我们可以推迟。

参考：-
https://frontendmasters.com/courses/web-perf

以上是Web 应用程序的性能改进的详细内容。更多信息请关注PHP中文网其他相关文章！