压缩并延迟 JavaScript 和 CSS

[zihadhasan011]

脚本和样式表是会减慢最大内容绘制 (LCP) 速度的功能。在呈现任何内容之前，浏览器需要解析页面的 HTML。这些元素可能会导致分析暂停并延迟内容的加载。

因此，为了避免延迟，您可以缩小代码，这意味着删除不必要的字符以减少文件并推迟加载对页面不重要的脚本和样式表。

减少缓慢资源的加载时间
有些元素对于页面加载至关重要，并会影响 LCP。

您可以按照以下步骤加快加载速度：

优化和压缩图像；
预加载重要资源；
压缩文本文件；
根据网络连接提供不同的资产（自适应服务）；
使用服务工作者启用缓存。
将繁重的 JavaScript 分解为较小的异步任务
当浏览器执行 JavaScript 时，它无法响应用户交互。因此，繁重的脚本会延迟网站响应，即首次输入延迟（FID）。

为了解决这个问题，将长 JavaScript 任务分解为较小的异步任务。这些长任务会阻塞主要活动 50 毫秒或更长时间，这表明 JavaScript 的工作时间超过了用户当前需要的时间。

因此，拆分成更小的任务往往会减少页面输入延迟。

使用 Web Worker
Web Worker 可以让延迟响应用户的 JavaScript在后台运行。

非UI操作被移至工作线程，而浏览器可以 卢森堡电话号码数据 执行用户请求的任务。通过这种方式，可以改善FID。

使用字体加载 API
加载网络字体也会导致加载延迟和布局突然改变，从而破坏体验。

当它们没有加载时，浏览器可能会使用不可见字体（Flash of Invisible Text 或 FOIT）或通用字体（Flash of Unstyled Text 或 FOUT），这可能会导致布局配置错误。然后当加载原始字体时，布局突然改变。

为了防止这种情况发生，您可以使用字体加载 API，以确保您的文本字体已预加载。

包括图像和视频的宽度和高度属性
始终在图像和视频上包含宽度和高度尺寸属性。缺少此设置是 CLS 性能不佳的主要原因之一，因为这些元素可能需要很长时间才能加载并导致布局突然改变。

另一方面，当您定义宽度和高度测量值时，浏览器已经知道需要为特定内容分配的正确空间。