认识 Thor 渲染引擎：创建闪电般快速的页面

我叫 Piotr Dolistowski，是 Instapage 的高级工程总监。 我领导公司在波兰华沙的技术部门，包括项目协调和人员管理。 今天文章中的所有内容都是我的团队为 Instapage 客户创建更快的页面呈现系统所做努力的直接结果。

页面加载速度对用户参与度和跳出率有直接影响，这对数字营销人员来说已经不是什么秘密了。 至少几年来，谷歌和其他公司已经将页面速度作为任何从事数字营销工作的人的重点，因此这对 2019 年来说并不是什么新鲜事。

我们之前已经多次介绍过这一点，但谷歌的研究表明，对于缓慢加载的页面，用户参与度会直线下降，而跳出率会上升：

这就是为什么我们的团队孜孜不倦地为您带来 Thor Render Engine™。 渲染引擎是我们新的页面生成器，也是我们完全响应式页面体验的一部分，可确保您的点击后登录页面加载速度非常快，无需您付出任何努力。

在我们深入了解 Instapage 的新呈现系统的细节之前，让我们回顾一下为什么加载缓慢的点击后登陆页面不利于转化。

页面加载缓慢对转化的影响

缓慢加载页面到底有多慢？ 移动页面加载时间的每一秒延迟都会导致转化率下降：

翻译：在线用户没有耐心等待您的页面加载很长时间。 因此，如果它没有立即加载，他们就会离开页面。 这会增加跳出率，降低用户参与度，不利于整体用户体验，并最终限制转化。

Akamai 在收集顶级在线零售商的 100 亿用户访问数据后得出以下见解：

• 一半的消费者在他们的智能手机上浏览产品和服务，而实际上只有五分之一的人在他们的手机上购买。
• 网站加载时间延迟 100 毫秒会使转化率降低 7%
• 网页加载时间延迟两秒会使跳出率增加 103%
• 53% 的移动网站访问者将离开加载时间超过三秒的页面
• 手机购物者的跳出率最高，而平板电脑购物者的跳出率最低

那么，如何才能确保您的点击后登录页面加载速度快呢？ Google 的 PageSpeed Insights 可以提供帮助，但作用有多大？

Google 的 PageSpeed Insights 报告页面的性能，显示页面在移动和桌面设备上是快速、平均还是慢速。 它还提供了有关如何改进该页面的建议：

但是，如果您没有技术背景，页面速度见解可能会让您感到困惑。 了解什么是首次内容绘制 (FCP) 和首次输入延迟 (FID) 指标可能让您难以理解。

输入 Instapage 的Thor Render Engine™。

Thor Render Engine™ 背后的细节

我们开发了 Thor Render Engine™ 以确保所有 Instapage 的点击后登录页面都能快速加载。

这意味着要全面重写点击后登陆页面的各个方面——更改 HTML 结构、JavaScript 和 CSS 重构以及 CSS 响应性，以确保页面后端的所有内容都可以立即加载。

所有这些更改中最好的部分是您无需执行任何操作，因为 Thor Render Engine™ 在幕后静默工作，使您的页面快如闪电。

让我们分解这些更改，看看我们为加快页面加载速度所做的工作。

HTML结构

从 HTML 的角度来看，从资源优先级开始，很多工作都致力于使页面呈现系统更快。

资源优先级

我们已经去除了大量未使用、模棱两可或非最佳代码的点击后登录页面，从而产生清晰、快速呈现的标记。

新的 HTML 结构保证所有资源将以正确的顺序加载。 页面样式（字体样式除外）已添加到 head 部分，因为在那之后，页面加载速度比使用 CSS 样式表更快。

响应能力不再需要 CSS 或 JavaScript 中的额外断点，因为无需额外代码，页面将加载快速且看起来很棒。 此外，所有脚本都放在页面主体的底部，因此它们不会阻塞页面呈现。 关键脚本和资源（例如字体）使用浏览器预加载功能，这意味着它们在页面呈现时不会被阻止。 此外，页面的 head 标记中没有放置任何同步 JavaScript。

图片和视频延迟加载

尽管图像和视频不会渲染阻塞，但是当页面上存在多个图像和视频时，带宽可能会因请求过多而阻塞，尤其是对于大图像。 这可能会导致糟糕的用户体验，因为顶部折叠中的图像会与折叠下方的图像同时加载，而访问者看不到这些图像。

为了解决这个问题，我们引入了以下优化：

• 折叠上方的图像具有更高的优先级——下载立即开始，因此它们甚至在页面交互之前就可见。
• 折叠下方的图像和视频是延迟加载的——当用户滚动到它们时触发下载。 灰色框用作尚未加载图像的占位符。
• 为了防止用户看到这些灰色框，图像实际上是在滚动到视口中时加载的。 但是当它们滚动到视口底部 400 像素的距离时。 当他们进入视口时，他们已经加载。
• 同样的规则适用于在 iframe 中加载的视频。

为了实现这一点，我们利用了 IntersectionObserver 的尖端 API，这使得延迟加载超级高效且代码占用空间小：

JavaScript 重构

JavaScript 重构包括以下优化：

1. 模块化架构：点击后登录页面上的所有 JavaScript 代码都与特定小部件的功能相关。 我们将代码分成多个包，每个包包含特定功能的代码。 因此，当用户设计一个只有图像和链接的页面时，不会加载 Form 或 Popup 小部件的代码，从而使页面加载速度更快。
2. 超轻量级：我们删除了旧库并重新设计了整个代码架构，这使我们能够将页面上的 JavaScript 总大小从超过 1MB 减少到大约 200kB（减少了 5 倍！），而典型的页面将加载不到 100kB由于上述模块化。
3. 全部异步：由于 JavaScript 是渲染阻塞的，我们将所有脚本导入移到了 BODY 标签的底部。 这允许浏览器在执行脚本之前呈现整个页面，从而允许访问者更早地看到有意义的内容。 提供交互性的脚本只有在它们开始与页面的该部分交互后才会加载和执行。 这提供了非常好的体验，尤其是在性能较低且互联网连接通常较差的移动设备上。

CSS重构

我们还重新编写了整个 CSS 样式表，删除了不必要的第三方代码，使我们的样式表可重用、可读且轻量级。 此外，我们使用通用的 CSS 类来尽可能地重用 CSS 代码。

我们还通过 GPU 加速实现了纯 CSS 动画。 我们 CSS 堆栈中最重要的变化是引入了相对单位“rem”而不是像素。 得益于此，点击后登录页面现在可以在从智能手机到 4k 桌面显示器的各种设备尺寸上顺畅地缩放。

CSS 响应能力

我们将“rem”与“vw”单元结合使用，使点击后着陆页具有响应性。 这意味着当点击后登录页面缩小到 768 到 1200 像素宽度和低于 400 像素宽度时，设备分辨率有两个差距。 在所有其他分辨率中，主要内容保持固定宽度，就像在构建器中一样。 移动设备的固定宽度值为 400px，桌面设备为 1200px。

“Rem”单位使我们能够顺利地重新计算小部件的位置和大小。 这也意味着我们不必使用 JavaScript 来实现这一点。

总之：

• 低于 400 像素的内容会自动缩放以适合屏幕宽度
• 在 400px 和 767px 之间，内容宽度是固定的
• 从 768px移动视图切换到桌面视图
• 从 768px 到 1200px 的内容会自动缩放以适应屏幕宽度
• 1200px以上内容固定

Thor Render Engine™ 速度测试示例

由于您永远不知道人们如何查看您的点击后登录页面（桌面、移动或平板电脑），因此页面体验完全响应非常重要。 Thor Render Engine™ 解决方案完全响应所有分辨率。

现在让我们将新的呈现引擎与旧的页面生成器进行比较。 下图显示了同一页面的页面速度结果，尽管 URL 不同。 （注意：这些页面不再处于活动状态，因为这些 URL 仅用于测试目的）：

旧的 Instapage 页面渲染结果：

雷神渲染引擎™ 结果：

在第一次测试中获得 56 分，在第二次测试中将其提高到 95 分，页面加载速度提高了 58.9%！

页面加载速度比较

在总结了 Thor Render Engine™ 的所有变化之后，让我们看看 Instapage 的页面加载速度与竞争对手相比如何。

我们在 3G 连接上测试了此页面的速度（屏幕截图仅显示在首屏）：

这是页面加载所需的时间：

• 使用旧的 Instapage 页面呈现系统（顶行）：10.5 秒开始加载
• Thor Render Engine™（中排）：5 秒内，页面加载 98%
• 使用竞争对手（底行）：8 秒开始加载

在 4G 连接上，结果如下：

• 使用旧的 Instapage 页面渲染系统：4.5 秒开始加载
• Thor Render Engine™：在 3.5 秒内完全加载
• 使用竞争对手：4.5 秒才开始加载

使用 Thor Render Engine™ 享受更快的页面加载

页面速度在用户体验和最终转化中起着重要作用。 当页面加载时间滞后时，您不仅会冒高跳出率的风险，还会在此过程中造成沮丧的用户。

借助 Thor Render Engine™，我们现在可以保证您的点击后登录页面将立即加载，而无需您付出任何努力。 立即注册 Instapage Enterprise 演示，亲身体验不同之处。