Страницу, которую документация 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 Документация связывает часть этой задержки с длинными задачами в основном потоке.3 В Web Almanac 2024 от HTTP Archive длинные кадры анимации на компьютерах были сгруппированы по категориям скриптов.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 окрашена зелёным и помечена как Good; от 50 до 89 — оранжевым, от 0 до 49 — красным.6 PageSpeed Insights получает эту оценку, запуская Lighthouse в смоделированной среде, и называет результат лабораторными данными.7 Полевые данные реальных читателей приводятся рядом в том же отчёте.7

Оценка — это средневзвешенное пяти оценок метрик.6 В таблице для Lighthouse 10 на Total Blocking Time приходится 30 процентов, на Largest Contentful Paint и Cumulative Layout Shift — по 25 процентов, на First Contentful Paint и Speed Index — по 10 процентов.6 Interaction to Next Paint в эту пятёрку не входит. Поэтому страница может находиться в зелёном диапазоне, тогда как её читатели ждут реакции на касание дольше 200 миллисекунд.

Проверка Core Web Vitals строится на полевых данных. PageSpeed Insights берёт данные реальных пользователей из Chrome User Experience Report и охватывает предыдущий 28-дневный период сбора.7 Страница с достаточным объёмом данных проходит проверку, когда 75-е процентили всех трёх метрик находятся на уровне Good.7 Google Search Central пишет, что хорошие Core Web Vitals вместе с другими аспектами удобства страницы соответствуют тому, что стремятся вознаграждать его основные системы ранжирования.8 Прохождение проверки — это утверждение о трёх полевых показателях, а оценка 90 — утверждение о взвешенном лабораторном среднем.

Chrome выгружает рекламу, которая слишком сильно нагружает устройство читателя

Chrome также ограничивает рекламу, которая потребляет слишком много трафика и ресурсов процессора читателя. Его документация о вмешательстве в тяжёлую рекламу называет три условия.9 Первое — более четырёх мегабайт сетевого трафика, второе — более 15 секунд работы основного потока в любом 30-секундном окне. Третье — более 60 секунд работы основного потока в сумме. Рекламный фрейм, превысивший любой из этих порогов, выгружается.9

Эти цифры описывают рекламу, которая работает в собственном фрейме, со своим сетевым трафиком и своей нагрузкой на основной поток. Пузырь отрисовывается в Shadow DOM внутри собственного документа страницы, а не в рекламном фрейме. Данные по сайту, которые читает скрипт встраивания, — статический файл, который пересоздаётся при изменении кампании и кэшируется на периферии сети. Поэтому просмотр страницы ничего не стоит рекламному серверу, а единственный динамический запрос — небольшой маячок.

Сравнивать нужно собственный 75-й процентиль сайта, а не оценку

Web Almanac 2024 даёт базовые значения, с которыми издатель может сопоставить свой собственный источник. По его данным, хорошие показатели CLS были у 72 процентов сайтов, а плохие — у 11 процентов.4 Хороший INP был у 74 процентов сайтов на телефонах и у 97 процентов на компьютерах.4 Хорошие Core Web Vitals в целом, с учётом INP, были у 43 процентов сайтов на телефонах и у 54 процентов на компьютерах.4

Аккаунт издателя и скрипт встраивания настраиваются бесплатно. Смотреть после этого нужно не на зелёный диапазон. Для источника с достаточным объёмом данных PageSpeed Insights показывает 75-й процентиль Interaction to Next Paint и Cumulative Layout Shift за предыдущие 28 дней.7 Отчёт Core Web Vitals в Search Console показывает, как работают страницы сайта.8 Эти два полевых показателя, снятые до добавления скрипта и ещё раз через 28 дней после него, — те цифры, которые оценка 90 дать не может.