Google 的 web.dev 文档用三个阈值来界定它所说的良好页面。加载指标 Largest Contentful Paint 应在页面开始加载后的 2.5 秒内出现。响应性指标 Interaction to Next Paint 应不超过 200 毫秒。视觉稳定性指标 Cumulative Layout Shift 应不超过 0.1。1同一页面还指出,要衡量的数值是页面加载的第 75 百分位数,并按手机和桌面设备分别计算。1只有当四位读者中有三位获得良好体验时,页面才算通过。
已发布的记录指出,广告是三项指标中两项的成因
web.dev 关于优化 Cumulative Layout Shift 的页面指出,广告是网络上布局偏移的最大成因之一。2该页面说,嵌入式小部件在加载之前往往不知道其内容有多大,因此提供这些小部件的平台并不总会预留空间。2它给出的解决办法是在初始布局中预留空间,为广告位设置最小高度或宽高比。2它还补充说,在视口顶部附近注入的内容通常会造成更大的偏移。2每一种解决办法都假定广告是一个在到达之前尺寸未知的矩形。
Interaction to Next Paint 衡量的是另一种代价。它观察读者整个访问过程中每一次点击、点按和键盘交互的延迟,INP 不超过 200 毫秒即视为响应性良好。3该文档将部分延迟归因于主线程上的长任务。3HTTP Archive 的 2024 年 Web Almanac 按脚本类别对桌面电脑上的长动画帧进行了分组。4广告属于大多数 INP 落入较差区间的类别之一。4
附着在页面词语上的广告没有需要预留的广告位
附着在段落中已有词语上的广告不需要矩形,而这正是 AdBubbles 销售的形式。发布商添加一个脚本 adbubbles.js,其文章中被购买的词语就会显示一条浅色点状下划线。将鼠标悬停在该词语上或点按它,就会打开一个小气泡,其中包含一个“Ad”(广告)标签、一段简短的标题和正文、广告主的域名,以及一个链接。该脚本是一个用纯 JavaScript 编写的静态文件,没有任何依赖,并在页面 DOM 就绪后加载。在读者操作之前,页面上既没有气泡,也没有空的广告位。
AdBubbles 不设置 Cookie,不存储标识符,也不收集读者的任何个人数据。嵌入脚本发送三种信标:每次页面加载发送一次浏览信标,气泡保持可见满一秒时发送一次打开信标,点击链接时发送一次点击信标。除此之外,没有任何信息离开页面。正如运作方式页面所述,AdBubbles 所做的是将页面上的词语与购买这些词语的广告主相匹配。它不选择哪些人看到广告,不在页面或网站之间跟踪读者,也不承诺任何效果。嵌入脚本对网站各项指标的影响,只有该网站自己的测量数据才能显示。
Cumulative Layout Shift 的定义对气泡如何打开很重要。该指标统计的是意外偏移,而在点按、点击或按键等离散输入后 500 毫秒内发生的偏移会被标记,并可被排除在外。5在手机上点按会打开气泡,在键盘上按 Enter 键也会打开气泡;两者都是离散输入。在桌面设备上,气泡在短暂的悬停延迟后打开,届时是否有任何内容发生移动,需要看网站的实地数据。
发布商决定嵌入脚本可以读取页面的多少内容。范围是它扫描的元素,例如 article 元素;在范围内,嵌入脚本会跳过标题、链接、代码、表单控件、导航、页眉、页脚,以及任何标记为 data-noads 的内容。它只为每个已购买词语的第一次出现添加下划线,绝不在同一段落中放置两个气泡,并在达到发布商设定的上限时停止。配置选项包括范围、每页上限,以及要排除的广告主类别。
90 分来自实验室,而通过评估来自读者
性能目标中的 90 指的是 Lighthouse 的一个分数区间,而不是 Core Web Vitals 的结果。Chrome 关于 Lighthouse 性能评分的文档将 90 到 100 分标为绿色并称之为良好;50 到 89 分为橙色,0 到 49 分为红色。6PageSpeed Insights 通过在模拟环境中运行 Lighthouse 得出该分数,并将结果称为实验室数据。7来自真实读者的实地数据则在同一份报告中与之并列。7
该分数是五项指标得分的加权平均值。6在 Lighthouse 10 的权重表中,Total Blocking Time 占 30%,Largest Contentful Paint 和 Cumulative Layout Shift 各占 25%,First Contentful Paint 和 Speed Index 各占 10%。6Interaction to Next Paint 不在这五项之中。因此,一个页面可以处于绿色区间,而其读者却要等待超过 200 毫秒才能让一次点按生效。
Core Web Vitals 评估则以实地数据为基础。PageSpeed Insights 的真实用户数据取自 Chrome 用户体验报告,涵盖之前 28 天的收集期。7对于数据充足的页面,当三项指标的第 75 百分位数均为良好时,即通过评估。7Google 搜索中心表示,良好的 Core Web Vitals 连同其他页面体验因素,与其核心排名系统力求奖励的内容相一致。8通过评估是关于三项实地数据的陈述,而 90 分是关于一个加权实验室平均值的陈述。
Chrome 会卸载过度占用读者设备资源的广告
Chrome 还对过度消耗读者带宽和处理器的广告实施限制。其关于重度广告干预的文档给出了三个条件。9第一个是网络带宽超过 4 MB,第二个是在任意 30 秒窗口内主线程时间超过 15 秒。第三个是主线程时间总计超过 60 秒。超过其中任何一项的广告框架都会被卸载。9
这些数字描述的是在自身框架中运行、拥有自身网络流量和主线程工作的广告。气泡在页面自身文档内的 Shadow DOM 中渲染,而不是在广告框架中。嵌入脚本读取的各网站数据是一个静态文件,在广告活动发生变化时重新生成,并在边缘节点缓存。因此,一次页面浏览不会给广告服务器带来任何负担,唯一的动态请求就是那个很小的信标。
应当比较的数值是网站自身的第 75 百分位数,而不是分数
2024 年 Web Almanac 给出了发布商可以用来对照自身来源的基准。它报告称,72% 的网站获得了良好的 CLS 得分,11% 的网站得分较差。4良好的 INP 在手机上占网站的 74%,在桌面电脑上占 97%。4以 INP 衡量,整体 Core Web Vitals 良好的比例在手机上为 43%,在桌面电脑上为 54%。4
设置发布商账户和嵌入脚本完全免费。之后要看的数值不是绿色区间。对于数据充足的来源,PageSpeed Insights 会显示之前 28 天 Interaction to Next Paint 和 Cumulative Layout Shift 的第 75 百分位数。7Search Console 中的 Core Web Vitals 报告会显示网站页面的表现。8在添加脚本之前读取一次、28 天后再读取一次的这两项实地数据,正是 90 分无法提供的数字。