Как Google ускоряет загрузку страниц, встраивая их первый экран (ATF) прямо в поисковую выдачу

Описание

Какую задачу решает

Патент решает проблему задержки (latency) между кликом пользователя по результату поиска и отображением целевой страницы (landing page), что особенно критично в мобильных сетях. Он направлен на создание ощущения мгновенной загрузки путем маскировки сетевых задержек. Дополнительно система улучшает безопасность и юзабилити сторонних страниц за счет их транскодирования (оптимизации и очистки кода).

Что запатентовано

Запатентована система транскодирования ресурсов и метод их доставки. Суть изобретения заключается в предварительной обработке (transcoding) веб-страниц, разделении их на первую часть (Above-The-Fold, ATF) и вторую часть (Below-The-Fold, BTF). ATF-часть встраивается непосредственно в страницу результатов поиска (SERP) и доставляется вместе с ней, обеспечивая мгновенное отображение при клике.

Как это работает

Система работает в двух основных фазах:

1. Офлайн (Индексирование): Google анализирует структуру сайтов, создавая шаблоны транскодирования (Transcoding Templates) для определения основного контента. Ресурсы транскодируются: оптимизируется код, удаляются небезопасные или медленные скрипты. Затем ресурс делится на ATF (первый экран) и BTF (остальное).
2. Онлайн (Обслуживание запроса): При генерации SERP система встраивает подготовленную ATF-часть в код выдачи. Когда пользователь кликает на результат, ATF-часть отображается немедленно (так как она уже загружена). Одновременно устройство запрашивает BTF-часть, которая загружается в фоновом режиме (часто в отдельном безопасном контексте, например, iFrame) и подгружается бесшовно.

Актуальность для SEO

Высокая. Описанные механизмы лежат в основе технологий Google, направленных на ускорение веба, концептуально схожих с AMP (Accelerated Mobile Pages) и различными техниками пре-рендеринга. Учитывая постоянный фокус Google на скорости загрузки, мобильном опыте и Core Web Vitals, этот патент (и его активное продолжение в 2023 году) остается крайне актуальным.

Важность для SEO

Влияние на SEO критическое (9/10). Патент описывает инфраструктуру, которая напрямую влияет на то, как контент доставляется пользователю и с какой скоростью он отображается. Понимание того, как Google анализирует рендеринг, идентифицирует шаблоны, определяет ATF-контент и потенциально модифицирует код сайта, критически важно для технического SEO, оптимизации под Core Web Vitals (особенно LCP) и обеспечения корректного пользовательского опыта.

Детальный разбор

Термины и определения

Above-the-fold (ATF) portion (Контент первого экрана)

Первая часть ресурса, видимая в браузере сразу после загрузки, до прокрутки. В контексте патента — это часть, которая транскодируется и встраивается в SERP.

Below-the-fold (BTF) portion (Контент ниже первого экрана)

Остальная часть ресурса, требующая прокрутки. Загружается в фоновом режиме после клика пользователя.

Browsing Context (Контекст просмотра)

Среда отображения документа (например, вкладка или iFrame). Патент предлагает загружать ATF и BTF в разных контекстах для безопасности.

Interactivity Score (Оценка интерактивности)

Метрика, основанная на доле пикселей в регионе, которые реагируют на действия пользователя (ссылки, кнопки). Высокий показатель часто указывает на boilerplate (навигация).

Layout Engine (Движок разметки/Рендеринга)

ПО (например, Webkit, Gecko), обрабатывающее HTML и CSS для генерации визуального представления страницы.

Render Tree (Дерево рендеринга)

Структура данных, создаваемая Layout Engine. Содержит информацию о визуальных элементах и их стилях после применения CSS. Критична для анализа макета страницы.

Transcoding (Транскодирование)

Процесс модификации исходного ресурса для создания оптимизированной версии (меньший размер, выше безопасность, лучше юзабилити).

Transcoding Template (Шаблон транскодирования)

Набор правил, определяющий, какие части ресурса включать/исключать при транскодировании. Генерируется путем анализа выборки страниц с похожей структурой URL.

URL Depth (Глубина URL)

Количество элементов пути в URL после имени хоста. Используется вместе с хостом для группировки страниц с похожей структурой.

Ключевые утверждения (Анализ Claims)

Примечание: US20230244725A1 — это публикация заявки (Application), являющаяся продолжением (continuation) ранее выданных патентов. Формула изобретения (Claims) здесь сфокусирована на действиях клиентского устройства.

Claim 2 (Независимый пункт): Описывает метод, выполняемый вычислительным устройством (клиентом).

1. Получение страницы результатов поиска (SERP) в ответ на запрос. SERP содержит результат поиска для документа.
2. Получение вместе с SERP первой части (first portion, ATF) этого документа.
3. Обнаружение взаимодействия пользователя с результатом поиска.
4. В ответ на взаимодействие: (a) Рендеринг первой части (ATF) на дисплее И (b) Запрос второй части (second portion, BTF) документа.
5. Рендеринг второй части (BTF) на дисплее.

Ядро изобретения — доставка ATF-контента заранее, вместе с SERP, и его немедленный рендеринг при клике, параллельно с фоновым запросом BTF-контента. Это обеспечивает мгновенную видимую загрузку.

Claim 3 (Зависимый от 2): Уточняет, что первая часть содержит Above-the-fold content, а вторая — Below-the-fold content.

Claim 5 (Зависимый от 2): Уточняет, что первая часть (ATF) исключает по крайней мере некоторый скриптовый контент (script content) документа.

Это критически важно для безопасности и скорости. Удаление скриптов из ATF ускоряет рендеринг и снижает риски выполнения кода в основном контексте браузера.

Claim 6 (Зависимый от 2): Уточняет, что устройство является мобильным (mobile computing device). Это подчеркивает основной фокус технологии.

Claim 7 (Зависимый от 2): Уточняет, что скриптовый контент может быть заменен контентом на языке разметки (markup language content), который воспроизводит функциональность скрипта.

Система стремится сохранить функциональность, переписывая ее безопасными методами (например, замена JS на HTML/CSS).

Где и как применяется

Изобретение затрагивает этапы индексирования (для анализа и подготовки контента) и метапоиска (для доставки контента).

CRAWLING – Сканирование и Сбор данных
Система собирает исходные ресурсы (HTML, CSS, JS, изображения) для последующей обработки.

INDEXING – Индексирование и извлечение признаков
Основная работа по патенту происходит на этом этапе (офлайн-процессы):

• Генерация шаблонов: Система группирует ресурсы по схожести URL (Hostname, URL Depth), рендерит выборку страниц (используя Layout Engine) и анализирует Render Tree. На основе метрик (Interactivity Score, Text Style Consistency) создаются Transcoding Templates для автоматического определения основного контента.
• Транскодирование: Ресурсы модифицируются с использованием шаблонов, оптимизируются (сжатие, инлайнинг) и очищаются от небезопасного контента. Упоминается возможность изменения позиционирования элементов (например, с fixed на static).
• Анализ разметки: Определяются границы ATF и BTF для транскодированных ресурсов на основе типичных размеров экрана.
• Хранение: ATF и BTF части сохраняются в репозитории.

METASEARCH – Метапоиск и Смешивание
На этом этапе (онлайн-процесс) система генерирует SERP. Она извлекает предварительно подготовленные ATF-части из репозитория и встраивает их непосредственно в ответ сервера (например, как Javascript string literal).

Входные данные:

• Исходный контент ресурсов (HTML, CSS, JS).
• URL ресурсов (для группировки).
• Данные рендеринга (Render Tree).
• Запрос пользователя и контекст (тип устройства).

Выходные данные:

• Transcoding Templates и транскодированные ресурсы (ATF/BTF) (Индексирование).
• SERP с встроенными ATF-частями (Метапоиск).

На что влияет

• Типы устройств: Наибольшее влияние оказывается на мобильные устройства, где сетевые задержки более критичны. Патент явно фокусируется на мобильном поиске.
• Типы контента: Влияет на любые HTML-ресурсы, которые Google решает транскодировать (статьи, новости, страницы продуктов).
• Метрики производительности: Напрямую влияет на показатели скорости загрузки, такие как LCP (Largest Contentful Paint) и FCP (First Contentful Paint).

Когда применяется

• Триггеры активации: Применяется при обслуживании поисковых запросов, когда для целевой страницы доступна предварительно сгенерированная транскодированная версия в репозитории.
• Условия: Система активирует механизм встраивания ATF, если определит, что запрос поступил с мобильного устройства или при медленном соединении.

Пошаговый алгоритм

Алгоритм состоит из четырех основных процессов.

Процесс А: Генерация Шаблонов Транскодирования (Офлайн)

1. Группировка ресурсов: Выбор набора ресурсов на основе общности URL (Hostname, URL Depth).
2. Сэмплирование: Выбор подмножества (subset) из набора для анализа.
3. Рендеринг: Рендеринг каждой страницы в подмножестве с помощью Layout Engine для получения Render Tree.
4. Анализ рендеринга: Оценка Render Tree. Вычисление Interactivity Score (доля интерактивных пикселей) и анализ консистентности стилей текста для разных блоков.
5. Скоринг: Присвоение оценок блокам. Блоки с низкой интерактивностью и консистентным текстом считаются основным контентом.
6. Генерация шаблона: Выявление общих закономерностей в подмножестве и создание Transcoding Template.

Процесс Б: Транскодирование Ресурса (Офлайн)

1. Получение контента: Загрузка исходного ресурса.
2. Применение шаблона: Использование Transcoding Template для извлечения основного контента и удаления boilerplate.
3. Оптимизация и Безопасность:
   • Оптимизация CSS (например, объединение инлайн-стилей).
   • Изменение позиционирования (например, fixed на static).
   • Санитайзинг скриптов: удаление функций, не входящих в список безопасных, или замена JS на HTML/CSS.
   • Встраивание небольших статических изображений.
4. Разделение ATF/BTF: Идентификация границы Above-The-Fold в транскодированном ресурсе.
5. Хранение: Сохранение ATF и BTF частей в репозитории.

Процесс В: Обслуживание Запроса (Онлайн)

1. Получение запроса: Система получает запрос (например, от мобильного устройства).
2. Генерация SERP и Встраивание ATF: Система извлекает сохраненную ATF-часть релевантных результатов и встраивает ее в код SERP (например, как строку, чтобы избежать рендеринга до клика).
3. Отправка ответа: Отправка SERP (включая встроенный ATF-контент) клиенту в одном ответе.

Процесс Г: Взаимодействие на Клиенте

1. Отображение SERP: Клиент отображает результаты. Встроенный ATF-контент скрыт.
2. Взаимодействие пользователя: Пользователь кликает на результат.
3. Мгновенное отображение ATF: Клиент немедленно рендерит и отображает встроенную ATF-часть.
4. Фоновый запрос BTF: Одновременно клиент запрашивает BTF-часть.
5. Загрузка и отображение BTF: Клиент получает BTF-часть и загружает ее ниже ATF-части, часто в отдельном Browsing Context (например, iFrame), обеспечивая бесшовную прокрутку.

Какие данные и как использует

Данные на входе

• Технические факторы:
  • Структура URL (Hostname, URL Depth): используется для группировки страниц и выбора шаблонов.
  • CSS: анализируются стили, свойства позиционирования (absolute/fixed).
  • Javascript: анализируется на предмет безопасности вызываемых функций.
• Контентные и Структурные факторы:
  • HTML структура (анализируется через DOM и Render Tree).
  • Визуальные характеристики текста (размер шрифта, начертание, цвет) — извлекаются из Render Tree.
• Мультимедиа факторы:
  • Изображения: анализируется размер файла и частота обновления для принятия решения о встраивании (embedding) в транскодированный ресурс.

Какие метрики используются и как они считаются

• Interactivity Score (Оценка интерактивности): Рассчитывается для блока как доля пикселей, реагирующих на действия пользователя (interactive pixels), к общему числу пикселей в блоке. Если доля превышает порог, блок может считаться boilerplate (например, навигация).
• Text Style Consistency (Консистентность стилей текста): Метрика, оценивающая вариативность форматирования текста внутри блока. Высокая консистентность и достаточный объем текста указывают на основной контент.
• Similarity Score (Оценка схожести контента): (Упоминается в описании патента). Оценка того, насколько контент в определенном блоке похож на контент в аналогичных блоках других страниц выборки. Высокая схожесть указывает на boilerplate.
• Размер ATF: Определяется как объем контента, необходимый для заполнения области отображения (display area) определенного размера (например, в пикселях) на целевом мобильном устройстве.

Выводы

1. Google глубоко анализирует рендеринг для понимания структуры страницы: Система не полагается только на HTML. Она использует Layout Engine для создания Render Tree, чтобы понять визуальную структуру и алгоритмически отделить основное содержание от шаблонных элементов (Boilerplate) на основе визуальных и интерактивных признаков (Interactivity Score, Text Style Consistency).
2. Структурная консистентность сайта критична для автоматизации: Google генерирует Transcoding Templates, предполагая, что страницы с похожими URL (Hostname, URL Depth) имеют схожую структуру. Неконсистентность может привести к ошибкам транскодирования.
3. Приоритет скорости и ATF-контента: Вся система построена вокруг мгновенной доставки Above-The-Fold контента путем его встраивания в SERP. Это подтверждает критическую важность оптимизации первого экрана и метрик Core Web Vitals (особенно LCP).
4. Готовность Google модифицировать исходный код (Транскодирование): Для достижения скорости и безопасности Google активно переписывает ресурсы: удаляет скрипты, меняет CSS (например, fixed на static), оптимизирует код. Разработчики должны учитывать эту возможность.
5. Безопасность через изоляцию и очистку: Применяется агрессивная очистка кода (удаление Javascript) в ATF для быстрого и безопасного рендеринга. BTF-часть, которая может содержать больше интерактивности и рекламы, часто загружается в изолированном контексте (iFrame).

Практика

Best practices (это мы делаем)

• Критическая оптимизация ATF-контента и LCP: Убедитесь, что Above-The-Fold контент рендерится максимально быстро и содержит ключевую информацию (LCP-элемент). Он должен быть функциональным без сложного Javascript, так как скрипты могут быть удалены при транскодировании.
• Обеспечить четкую визуальную и структурную иерархию: Используйте семантическую разметку и чистый CSS. Основной контент должен иметь консистентное форматирование текста и низкую плотность интерактивных элементов по сравнению с навигацией. Это поможет системе корректно идентифицировать его с помощью Interactivity Score и Text Style Consistency.
• Поддерживать консистентность шаблонов и структуры URL: Страницы одного типа должны иметь схожую структуру URL и использовать схожие шаблоны разметки. Это облегчает Google генерацию эффективных Transcoding Templates.
• Использовать статическое позиционирование для ключевых элементов: Избегайте зависимости от position: fixed или position: absolute для критически важных элементов, так как патент указывает, что система может принудительно изменить их на static при транскодировании.
• Следовать принципам Прогрессивного улучшения (Progressive Enhancement): Разрабатывайте сайт так, чтобы основной контент был доступен и корректно отображался при отключенном или удаленном JS.

Worst practices (это делать не надо)

• Зависимость от Javascript для рендеринга ATF: Если первый экран требует выполнения тяжелых скриптов для отображения контента (например, при чистом Client-Side Rendering без SSR), это замедлит загрузку и может привести к проблемам при транскодировании, так как скрипты могут быть удалены.
• Неконсистентное форматирование основного текста: Использование множества разных стилей текста внутри основного блока статьи может снизить оценку Text Style Consistency и привести к неверной классификации блока как boilerplate.
• Высокая плотность интерактивных элементов в основном контенте: Если основной контент перенасыщен ссылками или кнопками, он может получить высокий Interactivity Score и быть ошибочно классифицирован как boilerplate.
• Использование нестандартных или запутанных шаблонов: Если каждая страница имеет уникальную структуру или если структура URL хаотична, система не сможет создать надежный Transcoding Template.

Стратегическое значение

Этот патент является фундаментальным для понимания подхода Google к ускорению веба и лежит в основе технологий типа AMP. Он подтверждает стратегический приоритет Google на скорость, техническое качество кода и мобильную оптимизацию. Для SEO это означает, что оптимизация производительности (особенно рендеринга ATF) и чистая архитектура сайта являются необходимыми условиями для эффективного взаимодействия с поисковыми системами и обеспечения наилучшего пользовательского опыта.

Практические примеры

Сценарий 1: Оптимизация шаблона новостной статьи для корректного транскодирования

1. Анализ текущего шаблона: SEO-специалист замечает, что в основном блоке статьи присутствует много блоков перелинковки (потенциально высокий Interactivity Score) и используются разные размеры шрифта для врезок (низкая Text Style Consistency).
2. Действие: Рекомендовать команде разработки унифицировать стили текста в основном контенте и переместить часть блоков перелинковки ниже или в боковую колонку, уменьшив плотность ссылок в основном тексте.
3. Цель: Улучшить метрики, используемые для генерации Transcoding Template, чтобы система гарантированно идентифицировала тело статьи как основной контент.
4. Ожидаемый результат: При транскодировании Google корректно извлекает полный текст статьи, что улучшает пользовательский опыт при быстрой загрузке из SERP.

Сценарий 2: Оптимизация ATF для мгновенной загрузки

1. Анализ текущего ATF: Первый экран содержит тяжелый Javascript-слайдер баннеров.
2. Действие: Заменить слайдер на статичное оптимизированное изображение (Hero Image) с основным УТП. Внедрить Critical CSS для стилей ATF.
3. Цель: Убрать зависимость от Javascript (который может быть вырезан при транскодировании) и ускорить загрузку LCP-элемента.
4. Ожидаемый результат: Транскодированная ATF-версия страницы содержит ключевой визуальный элемент и загружается мгновенно из SERP, улучшая поведенческие факторы и Core Web Vitals.

Вопросы и ответы