为 INP 做准备:Taboola 如何利用全新渲染引擎提高页面性能

Engage in sale leads forums for valuable lead-generation strategies
Post Reply
lopebix427
Posts: 133
Joined: Thu Dec 12, 2024 8:40 am

为 INP 做准备:Taboola 如何利用全新渲染引擎提高页面性能

Post by lopebix427 »

数字出版行业面临着持续的挑战,网站流量是主要问题。根据Echobox 2023 年出版趋势报告,近一半的出版商(47%)认为流量下降是一个主要问题,而 63% 的出版商则优先考虑增加流量。在这些挑战中,优先考虑积极的用户体验至关重要。

Google 最近对核心网页指标的更新强调了对用户体验的重视。交互到下一次绘制 (INP)现在取代了首次输入延迟 (FID),成为更全面的页面交互性衡量标准。虽然这种转变无疑为增强用户体验(对网站参与度 巴西电话格式 至关重要)提供了机会,但它也为发布商带来了额外的障碍。

例如,在执行第三方脚本(如 Taboola 的脚本)时,浏览器可能会对用户输入和渲染更新无响应,从而可能产生较差的 INP 分数。Taboola 认识到尽量减少页面加载影响以增强页面体验和确保核心 Web Vitals 成功的重要性。

Taboola 对页面性能的响应
为了有效限制 Taboola 在页面上的存在,我们引入了一种全新的渲染流程,该流程可保持相同的广告效果,并且不需要新的发布商代码。Taboola 当前的引擎并非专门为页面性能而构建,这意味着文件包含多个繁重的模块,导致传输量大且执行时间长,但我们的新解决方案解决了所有这些问题。

介绍 TRECS
TRECS(Taboola 推荐可扩展客户端服务)是一种经过重新设计的渲染流程,它仅执行站点配置所需的任务,从而确保浏览器工作量最小化。这意味着删除当前引擎中的两个主要渲染文件,并创建一个满足发布商所有需求的单个文件。

Image


图片:Chrome DevTools 中显示的 loader.js 和 impl.js 文件

当前的 loader.js 和 impl.js 文件(见上图)将被 TRECS 加载器取代,后者旨在在大小和执行时间方面更加精简。全面推出后,TRECS 加载器文件将比当前的 loader.js 和 impl.js 文件总和轻 50%!

TRECS 加载器会启动其他文件来呈现页面所需的内容。我们将这些工作称为“扩展”,这项工作包括非呈现功能(如性能跟踪或同意信号处理)和可见功能(如 Taboola Feed 或卡片自定义)的组合。



图片:TRECS 扩展的可视化

性能推子
为了在采用新产品时将浏览器工作量降至最低,TRECS 包含一项名为Performance Fader的性能管理功能。此工具使用浏览器 API 来优化任务执行,限制 Taboola 阻塞时间并优先处理更关键的任务——这是 INP 成功的必备条件。

Fader 还会重新调整被中断的 Taboola 任务的优先级,以尽快完成其活动(和 Taboola 脚本),并避免在页面视图中推荐加载过晚的风险。



长动画帧 API
除了改进加载和任务优先级之外,Taboola 还率先采用了新的 Chrome 工具——长动画帧 API。此工具允许我们识别导致渲染更新延迟超过 50 毫秒的特定脚本。渲染更新可能是非用户生成的,也可能是由用户输入引起的。

通过使用 LoAF API,我们能够分析(在真实用户监控 (RUM) 条件下):

站点长动画帧阻塞时间
Taboola 生成长动画帧阻塞时间
站点 INP
Taboola 生成的 INP
借助 LoAF 和 TRECS,Taboola 能够减少发布商网站上的总 INP,同时保持相同的广告效果指标。查看Google 对我们工作的案例研究,了解所有详细信息。

产品状态和成功
那我们该怎么办呢?Taboola 目前正在向我们所有的发布商推广 TRECS。页面上的代码无需更改,也不需要发布商进行任何开发工作。

为了保持一致性,我们将逐步将关键组件从当前引擎转移到 TRECS。这意味着页面性能将不断提高,直到不再依赖当前引擎。如今,数千家使用 Javascript 集成的 Taboola 发布商已在其网站上运行 TRECS 上的元素!

初步结果非常令人满意,我们预计随着开发的进展,还会有进一步的改进。我们已经看到多项关键指标的减少:*

网站 TBT – 高达 44%
站点长动画帧阻塞时间 – 高达 38%
Taboola 生成的长动画帧阻塞时间 – 高达 40%
场地 INP – 最高可达 44%
流量可能仍然是我们这个领域的一个持续挑战,但 Taboola 致力于为我们的发布合作伙伴提供两全其美的解决方案:高性能原生广告和引人入胜的编辑内容推荐,以及可提高页面性能并实现 SEO 成功的 INP 解决方案。请联系我们了解有关 TRECS 的更多信息以及 Taboola 如何致力于为发布商开发团队提供创新技术。

*我们使用百分位数测量所有绩效数据,取 75 个百分点来计算百分比变化。此处分享的结果显示了各个合作伙伴的最佳结果。
Post Reply