Как использовать API правил спекуляции для мгновенной загрузки веб-страниц

2024 год обещает стать временем, когда мгновенная загрузка станет новым стандартом веб-производительности, а владельцы онлайн-бизнеса будут прислушиваться.

Однако переход от быстрого режима к мгновенному уже некоторое время находится в разработке.

Еще в 2009 году стремление к более быстрой и эффективной загрузке страниц привело команду Chromium к созданию первых подсказок к ресурсам, к которым позже была добавлена ​​ссылка rel="prerender".

Ожидалось, что это окажет существенное влияние на производительность, поскольку включало загрузку последующих страниц в фоновом режиме до того, как пользователь перейдет к ним, обеспечивая более быстрый рендеринг при возникновении перехода.

Однако эта версия предварительного рендеринга оказалась недостаточно эффективной и в 2017 году была объявлена ​​устаревшей.

Перенесемся в сегодняшний день: Google запустил многообещающие разработки в своем API Speculation Rules API, позволяющие использовать более сложный подход к полной предварительной визуализации и разблокировать по-настоящему плавный просмотр веб-страниц.

Что такое API правил спекуляций от Google?

API правил спекуляции — это API, определенный в формате JSON, разработанный Google для повышения производительности загрузки веб-страниц с помощью стратегий спекулятивной загрузки.

Спекулятивная загрузка включает в себя прогнозирование и предварительную загрузку ресурсов для последующей навигации по страницам, что приводит к сокращению времени рендеринга и улучшению пользовательского опыта. Google представил этот API, чтобы предоставить разработчикам более гибкий и выразительный способ указать, какие документы должны быть предварительно загружены или предварительно обработаны.

Основные сведения об API правил спекуляций:

• Таргетинг на URL-адреса документов. В отличие от традиционных механизмов предварительной выборки, ориентированных на конкретные файлы ресурсов, API Speculation Rules фокусируется на URL-адресах документов. Это делает его особенно подходящим для многостраничных приложений (MPA), а не для одностраничных приложений (SPA).

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

• Поддержка браузера: API в настоящее время совместим со всеми браузерами на базе Chromium, включая Chrome, Edge, Opera, Chrome Android, Opera Android и WebView Android. Полную информацию о совместимости см. в документации Mozilla:

Вы также можете проверить, поддерживают ли браузеры API, с помощью следующего кода:

• Альтернатива устаревшим функциям: служит альтернативой старым технологиям, таким как устаревшая функция только для Chrome , предлагая лучшую производительность и более выразительный синтаксис.
• Соблюдение безопасности. Предварительная выборка между сайтами имеет ограничения для защиты конфиденциальности пользователей. Межсайтовая предварительная загрузка работает только в том случае, если у пользователя не установлены файлы cookie для целевого сайта, что предотвращает потенциальное отслеживание активности пользователя.
  

Зачем использовать API правил спекуляции на своем веб-сайте?

API-интерфейс Speculation Rules обеспечиваетпрактически мгновенную загрузку страниц , обеспечивая удобство просмотра.

Уменьшение времени загрузки страниц,повышение удовлетворенности пользователей и потенциальные преимущества SEO— веские причины для разработчиков использовать эту технологию.

Уменьшая задержку между переходами по страницам, пользователи воспринимают веб-сайт как более плавный и отзывчивый. Это становится ясно видно восновных веб-показателях вашего сайта, где наибольшая отрисовка контента (LCP), совокупный сдвиг макета (CLS) и взаимодействие со следующей отрисовкой (INP) резко уменьшаются.

Мгновенный просмотр обеспечивает снижение показателей отказов и увеличение удержания пользователей– важные показатели успеха вашей онлайн-платформы. Таким образом, подчеркивается стратегическая ценность интеграции API правил спекуляций.

Как работает API правил спекуляций?

API правил спекуляций Google предназначен для URL-адресов документов, а не конкретных файлов ресурсов. API Speculation Rules представляет более выразительный и настраиваемый синтаксис для указания того, какие документы должны быть предварительно выбраны или предварительно обработаны.

Благодаря структуре, определенной в формате JSON в скрипте type="speculationrules", разработчики могут формулировать правила как для предварительной отрисовки, так и для предварительной выборки. Эта повышенная гибкость позволяет точно настраивать спекулятивную загрузку.

Недавно Google объявил о новом усовершенствовании API Speculation Rules API в Chrome 121, которое теперь предоставляет возможность автоматического поиска ссылок.

Это делается:

• Указание источника документа
• Выбор ссылок на странице на основе URL-адресов или селекторов CSS.
• Указание уровня «активности» — энергичный (сразу), умеренный (при наведении курсора на 200 мс) и консервативный (при нажатии мыши или касании).

Однако, если вы новичок в API спекуляционных правил, мы рекомендуем вам сначала протестировать различные настройки, приведенные ниже.

Как использовать API правил спекуляций Google

API Speculation Rules позволяет разработчикам использовать структурированный подход к оптимизации процессов предварительного рендеринга и предварительной выборки.

Настраивать

Все начинается с создания элемента скрипта type="speculationrules" и определения правил спекуляции в структуре JSON внутри него.

Правила спекуляции можно добавлять либо в заголовок, либо в тело основного фрейма.

Важно: правила предположения в подкадрах не применяются, а правила предположения на предварительно обработанных страницах применяются только после того, как пользователь переходит на саму страницу.

Правила спекуляции могут быть включены статически или динамически.

• Статическая настройка выполняется в HTML-коде страницы (идеально подходит для веб-сайтов, где следующее действие имеет высокую степень уверенности, например, новостной веб-сайт может захотеть предварительно отобразить основное событие дня).
• Динамическая настройка выполняется с помощью JavaScript (подходит для веб-сайтов, где активно используется персонализированный пользовательский интерфейс).

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

Чтобы сообщить браузеру, какие URL-адреса необходимопредварительно отрисовать , вы можете вставить инструкции JSON на свои страницы:

Аналогичным образом вставьте следующие инструкции JSON для предварительной выборки :

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

• Список URL-адресов
• Множественные правила спекуляций
• Несколько списков в одном наборе правил спекуляции
  

Указание маршрутов для предварительного рендеринга/предварительной выборки

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

Однако есть некоторые маршруты, которые считаются небезопасными, например:

• URL-адреса выхода;
• URL-адреса переключения языка;
• URL-адреса «Добавить в корзину»;
• URL-адреса потока входа в систему, по которым сервер требует отправки SMS, например, когда необходима двухфакторная аутентификация (2FA);
• URL-адреса, которые инициируют отслеживание конверсий рекламы на стороне сервера;
• URL-адреса, которые активируют ограничения на использование пользователя, например, при использовании ежемесячного лимита бесплатных статей.

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

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

Точность и компромиссы

Как упомянул Барри Поллард на нашем вебинаре «Мгновенная загрузка страниц»:

Хотя предварительная загрузка — это самый безопасный подход, который вы можете дублировать на многих своих веб-страницах, он также предлагает самую низкую награду, поскольку предполагает загрузку только определенных ресурсов.

С другой стороны, полностраничные пререндеры предлагают более высокие вознаграждения, но их следует использовать с осторожностью, поскольку они могут:

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

Чтобы правильно настроить предварительный рендеринг, вам следует учитывать поведение пользователей и анализировать типичные способы навигации по вашему веб-сайту. Используя тепловые карты и блок-схемы Google Analytics, вы можете определить основные маршруты и начать эксперименты с прогнозируемой загрузкой.

Чтобы проверить, выполняется ли предварительная обработка страницы, используйте ненулевую запись activeStart PerformanceNavigationTiming . Затем это можно зарегистрировать с помощью специального измерения:

Таким образом, вы сможете оценить соотношение между пререндером и другими типами навигации.

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

Вы можете сделать это, вызвав событие аналитики при вставке правил спекуляции, чтобы указать, что был запрошен предварительный рендеринг. Затем сравните количество этих событий с фактическим числом просмотров страниц предварительной визуализации.

Или вы можете…

Рассмотрите возможность автоматического предварительного рендеринга страниц с помощью искусственного интеллекта навигации от NitroPack

Navigation AI — это оптимизатор веб-браузера NitroPack на базе искусственного интеллекта, который активно прогнозирует и анализирует поведение пользователей для предварительной визуализации полных страниц во время пути клиента.

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

Примечание. Navigation AI — это отдельный продукт, но он на 100% совместим с NitroPack и еще больше расширяет преимущества для владельцев сайтов.

Присоединяйтесь к списку ожидания для навигационного AI и разблокируйте мгновенный пользовательский опыт на своем сайте →

Навигационный искусственный интеллект от NitroPack основан на API Speculation Rules и предлагает автоматизированное решение для достижения высокого коэффициента попадания и эффективности использования ресурсов в сценариях предварительного рендеринга.

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

Результатом является мгновенная загрузка страницы благодаря тому, что эта страница уже нарисована в фоновом режиме. На мобильных устройствах навигационный искусственный интеллект полагается на определение того, где находится пользователь на странице, и, учитывая небольшой размер области просмотра, он может легко предсказать, куда он нажмет.

На основе анализа 1200 веб-сайтов навигационный искусственный интеллект уже показывает впечатляющие результаты.

• Результат № 1. Веб-страницы, использующие ИИ навигации, постоянно показывают время загрузки ~2,86 с по сравнению с 6,12 с без ИИ навигации.

• Результат № 2: с помощью Navigation AI предварительно обработанные страницы показывают улучшение LCP на 85 % (с 3,1 с до 0,4 с) и улучшение CLS на 80 % (с 0,3 с до 0,06 с).Для предварительно загруженных страниц Navigation AI увеличивает время LCP на 52 % (с 3,1 до 1,5 с).

• Результат №3. Благодаря навигационному AI показатели производительности всего веб-сайта значительно улучшаются: LCP на 15 %, CLS на 8 % и TTFB на 26 %.

Получите доступ к Navigation AI, присоединившись к нашему списку ожидания →

API правил спекуляций и WordPress

На нашем вебинаре «Мгновенная загрузка страниц» инженер Google по связям с разработчиками Адам Сильверстайн рассказал, что команда WordPress Core Performance работает над более стабильной реализацией нового API Speculation Rules.

В настоящее время основное внимание уделяется тому, чтобы сделать небольшую часть функциональности API доступной владельцам сайтов и разработчикам экосистемы, чтобы проверить эффективность и скорость внедрения, прежде чем сделать ее частью ядра. Вот что пользователи WordPress могут использовать на данный момент:

• Модуль в плагине Performance Lab
• Автономный плагин, который реализует только интерфейс API Speculation Rules (применяет консервативный уровень «активности», но разработчики могут изменять поведение)

Маршруты WP-admin исключены по умолчанию, но разработчики WP сами должны определить маршруты, которые они хотели бы расставить по приоритетам.

Команда WordPress Core Performance также работает над более сложными реализациями плагинов в экосистеме. Это направлено на то, чтобы облегчить разработчикам тяжелую работу по выяснению того, какие маршруты являются высшими приоритетами, а какие нет.

Какие улучшения ждут правила спекуляций

В настоящее время правила спекуляций ограничены страницами внутри одной вкладки, но предпринимаются усилия по уменьшению этих ограничений.

Предварительный рендеринг по умолчанию ограничивается страницами одного и того же происхождения. Однако недавнее обновление Chrome 119 теперь поддерживает предварительную отрисовку для страниц одного и того же сайта с перекрестным происхождением, требуя согласия через HTTP-заголовок.

В будущих версиях предварительная отрисовка может быть расширена на страницы с разными источниками и разрешена на новых вкладках. API правил спекуляций будет расширяться, добавляя оценки и синтаксис для правил документа, а также обеспечивая большую гибкость, например, предварительную отрисовку ссылок при наведении курсора мыши.

Продолжающиеся эксперименты в Chrome изучают дополнительные функции, и сайты могут участвовать в пробной версии Origin, чтобы протестировать и оставить отзыв о потенциальных будущих дополнениях.