减少网站加载时间的 5 种最有效方法

您的网站或应用程序最初加载的速度是用户的第一印象。 在本指南中,我们将列出经过验证的技术,可以从初始页面加载中节省宝贵的时间。

初始加载时间

从您的用户或客户输入您的网站域名到他们看到内容所花费的时间是您必须留下良好第一印象的最重要的几秒钟。

亚马逊发现,每延迟 100 毫秒,他们的销售额就会损失 1%。

然而,许多网络开发人员将其视为事后的想法。 越来越多的库被添加到越来越多的功能中,随着时间的推移,他们开始看到越来越少的转换。 更糟糕的是,这些转换损失很难检测到,因为它们在有时间发送任何指标之前就放弃了加载缓慢的页面。

其中一些是可以在前端实现的技术,一些可以在后端实现。 无论如何,网络应用程序必须快速加载。

添加正确的测量值

您需要做的第一件事是添加测量值。 加载过程有很多阶段,如果不测量正确的段,您将不知道瓶颈在哪里。

以下是加载过程中最重要的里程碑:

尺寸 | 图创建于 地形结构

这意味着您应该跟踪此图表的每个部分的指标。

让我们来看看你如何做到这一点。

浏览器请求响应服务:

在您的服务器上进行测量。 您希望了解您的 API 从收到请求到提供响应的时间。 根据是否进行外部调用(例如,对数据库的调用),这可能非常短或成为重大瓶颈。

响应服务于收到的响应:

这更难衡量,但一种方法是在响应离开服务器时添加时间戳,并在第一时间用用户端的当前时间衡量该时间(HTML 头部的脚本标记)页)。

收到对第一个内容丰富的油漆的响应:

第一个内容绘制指的是第一个元素在 DOM 上呈现的时间。 这可以是一些简单的文本、背景或加载微调器。 这可以通过在 Chrome 开发工具中运行 Lighthouse 来测量。

第一个内容绘制到最大内容绘制:

最大内容绘制指的是最大元素在用户浏览器视口中呈现的时间。 这通常表示页面加载的“呈现”部分结束,并且用户会看到填充的屏幕。 这也是通过运行 Lighthouse 来衡量的。

互动时间最多的内容绘画:

最后,交互时间是指用户何时可以执行滚动、单击和键入等操作。 如果这个持续时间很长,这可能会特别令人沮丧,因为他们会在他们面前看到一个渲染的屏幕,但在他们期望他们能够做的时候却无能为力! 这是 Lighthouse 帮助我们衡量的另一个指标。

减少代码

现在您有了测量结果,就可以开始进行优化了。 优化需要权衡,测量结果会告诉您哪些是值得的。

加载速度最快的页面是空白页面,但是在任何人注意到它与空白页面之间加载速度的差异之前,可以将大量代码添加到应用程序中。 经常发生的情况是,增量是如此之小,以至于直到有一天你才察觉到构建与构建之间的差异,它只是开始感觉缓慢。 您意识到您的应用程序臃肿,此时减少代码会有所作为。

当你减少代码时,你会得到两个速度上的提升:

  • 您的应用程序通过网络传输的速度更快。
  • 用户的浏览器更快地完成代码解析。

第一次加速很小; 由于请求是通过线路压缩的,如果您削减 1 MB 的源代码,则可能只节省 10 KB 的带宽。 然而,解析 less 带来的加速是显着的。 您的用户可能会在各种浏览器和计算机上运行您的应用程序,其中许多人的计算能力无法像您自己那样快速解析代码。

或者它们可以在计算能力更低的移动设备上运行。 差异可以是秒的大小。

  修复英雄联盟登录会话出现意外错误

因此,您拥有的代码越少,浏览器完成解析并开始运行您的应用程序的速度就越快。 即使你想显示一个由 Javascript 控制的加载屏幕,它也会先解析该代码。

但是您不想削减功能或实际删除代码。 幸运的是,有一些标准做法可以减少代码而不必这样做。

  • 通过压缩器运行你的代码。 Minifiers 执行优化,如将长名称缩短为短名称(signUpDarkModeButton 变为 ss),删除空白字符,以及其他优化,以使您的代码尽可能紧凑而不会丢失任何内容。
  • 导入部分。 图书馆经常堆满了你不需要的东西,但它们被打包在一个伞包下。 也许您只需要实用程序库的特定功能,因此您可以只导入所需的代码,而不是导入整个库。
  • Tree-shake 死代码。 有时您出于调试目的而留下代码,或者没有彻底清理过时的功能,尽管它在您的源代码中,但它永远不会运行。 JavaScript 工具链中有一些工具,例如 Webpack,可以检测死代码或未使用的依赖项,并自动为您从生产构建中删除它们。

将代码拆分成块

从整个应用程序中尽可能多地减少代码后,您可以考虑进一步压缩这个想法并减少初始加载所需的代码。

假设您有 20% 的代码为应用程序的某些功能提供支持,用户只能在点击几下后才能访问这些功能。 浏览器在显示加载屏幕之前解析该代码将浪费时间。 将代码拆分成块可以显着减少交互时间。

不要为所有 Javascript 文件使用相互交织的导入依赖关系图,而是确定容易切割的区域。 例如,一个组件可能会加载一些繁重的库。 您可以将该组件隔离到它自己的文件中,然后仅在用户准备好与该组件交互时才导入。

有几个库可以延迟加载,具体取决于您使用的框架。 没有必要为此做太多事情并拆分每个组件,因为这样用户就有了一个快速的初始加载并且必须等待每个后续交互。 找到您可以分割的最大部分,并在那里拆分您的源代码。

服务器端渲染

鉴于浏览器需要进行所有密集的解析和编译,并且用户使用 Chromebook 和移动设备,因此减少加载时间的一种常用技术是让您的服务器承担部分负载。 这意味着您可以在服务器上运行一个 Javascript 引擎(通常是 Node.js)并填写尽可能多的数据和内容。

您的服务器将比用户的浏览器快得多且可预测。 不可避免地,他们仍然需要解析一些 Javascript 代码以使应用程序具有交互性。 不过,服务器端呈现可以填充大部分初始内容,因此当用户获取页面时,它至少已经显示了加载屏幕或进度条。

如果初始视图需要数据,则客户端无需单独请求即可获取; 它已经在应用程序中被水化以供客户使用。

压缩资产

资产使页面栩栩如生,在这些资产完成呈现之前,页面不会感觉完全加载。 这可能是您的背景、用户界面图标、用户个人资料图片,甚至是加载微调器。 通常,资产也可以改变布局,因此如果用户开始尝试与某些东西交互,页面可能会在加载资产时继续跳来跳去。有时,这些资产是最大的内容绘制。

但资产也是应用程序中最重的部分之一。 一张图片可能有几兆字节,加载很多图标很容易超过浏览器的最大并发网络请求限制,导致加载队列惊人。

您几乎不想从互联网上下载图像,然后在您的应用程序中引用它。 图像的大小应调整到它们将显示的最小可能尺寸。 如果您有一个用户配置文件以 50 x 50 像素的微小元素显示,并且没有调整大小,您的应用程序将花时间下载看起来像桌面墙纸一样清晰的完整图像,然后将其缩小到很小的尺寸。

其次,图像可以根据其格式进行压缩。 如今,webm 是首选格式,但网络压缩领域正在不断改进,许多新格式即将出现。 由于格式的不断变化,某些浏览器可能不支持更新的格式! 幸运的是,浏览器技术可以让用户的浏览器加载他们支持的任何格式。

所以,压缩到最新最好的格式,但也保留一个不太现代的版本,并使用支持后备格式的图片和视频元素。

结论

这些是让您的用户在您的应用程序上首次加载时速度极快的五种最有效的技术。 这些将提高您的转化率、用户满意度,甚至搜索排名,因为 SEO 会奖励快速加载时间。 在 地形结构,我们采用这些技术以及更多技术,以便用户可以尽快创建和查看您在本文中看到的图表。