Page 1 of 1

使用动态导入

Posted: Tue Dec 24, 2024 9:20 am
by ferene322
当使用具有大量交互式组件(例如注册表单、模式或弹出窗口)的复杂 Web 应用程序时,可以使用 动态导入来提高性能。这种方法可确保仅在实际需要时加载必要的代码,而不是在初始页面加载时加载。

例如,假设您有一个隐藏在模态框后面的注册表单。默认情况下,当用户访问该页面时,即使用户没有点击打开模态框,也会下载表单的代码(包括其所有字段)。这意味着页面加载时间会增加,因为它正在获取用户可能不会立即与之交互的代码。

使用动态导入,只有当用户点击按钮打开模式时,才会加载该表单的代码。这可以显著减少 Web 应用的初始加载时间,因为您不会预先下载不必要的代码。

提示#6:注意布局转变
我尝试使用动态导入来优化我们的网站,这可以将 JavaScript 加载时间缩短几秒钟,但由于布局发生了重大变化,我们的新 Lighthouse 分数低于以前。当网页上的元素在页面加载时突然移动或“跳跃”时,就会发生布局偏移,从而给用户带来不愉快的体验。这被认为是一种糟糕的用户体验,正如我所描述的,它会显著降低您的 Lighthouse 分数。

布局偏移的一个常见原因是加载大型图像或其他重资产 加拿大电话营销数据 如果图像在加载时没有预留指定空间,则当图像最终出现时,可能会迫使其他元素移动。

为了防止布局偏移,在加载图像和内容时为其预留空间至关重要。一种有效的解决方案是使用 骨架 UI — 模拟最终内容结构的占位符元素。骨架可以在获取内容时保持布局稳定,从而从页面开始加载的那一刻起提供更流畅的体验。Next.js 等工具提供内置图像优化功能,使用透明占位符来预留空间,保持一致的页面布局并避免意外跳转。


Kontent.ai 应用程序中骨架 UI 的示例
建议 7:全面思考这些事情
在进行这些优化时,重要的是要全面考虑您网站的性能,尤其是灯塔得分。对于营销网站来说,较高的灯塔得分至关重要,因为它直接影响 SEO,影响您的网站在搜索结果中的排名,并最终推动自然流量。但是,如果您正在开发用户主要用来执行任务或工作的应用程序,那么对 SEO 的重视就不那么重要了。在这些情况下,关注灯塔指标可能不会产生同样的好处。相反,请优先考虑支持用户目标的无缝用户体验。

提高灯塔评分的关键要点
为了提高您网站的性能和灯塔分数,请考虑以下基本策略:

优化资产格式:使用 WebP 等高效文件格式来减小文件大小,同时又不影响质量。这可以加快加载时间并增强用户体验和 SEO。
管理第三方脚本:通过 Google Tag Manager 等工具添加的脚本可能会影响加载速度。 对非关键脚本使用Defer 和 属性,以确保主要内容加载速度更快,并将脚本限制在必需的页面上。Async
分析包大小:使用包分析器识别代码库中的大型库和不必要的依赖项。用更轻量的库替换庞大的库(例如 Moment.js),以减少最终的包大小。
尽量减少 JavaScript 的使用:对于静态网站,将 JavaScript 限制在真正需要它的组件上,例如表单或弹出窗口,同时保持其余内容为静态。这可以减少 JavaScript 负载,提高性能和 Lighthouse 分数。如果要采用更简化的方法,请考虑使用支持孤岛架构的框架(如 Astro)。
使用动态导入:仅在需要时加载模态框等交互式组件,而不是在初始页面加载期间加载,以减少加载时间。
防止布局偏移:为图片和资产预留空间,避免页面出现意外跳转。使用骨架 UI 可实现更流畅的加载,尤其是在 Next.js 等动态框架中。
根据网站类型确定优先级:对于营销网站,较高的 Lighthouse 分数可以提升 SEO,但对于以用户为中心的应用,应注重优化用户体验而不是 SEO 指标。