Правила упреждающей загрузки можно использовать для предзагрузки и предварительной отрисовки навигации по следующей странице, как описано в предыдущей статье. Это позволяет значительно ускорить или даже сделать мгновенной загрузку страниц, что существенно улучшает Core Web Vitals для такой навигации по страницам.
Отладка правил прогнозирования может быть сложной. Это особенно актуально для предварительно отрисованных страниц, поскольку они обрабатываются в отдельном средстве визуализации – своего рода скрытой фоновой вкладке, которая заменяет текущую вкладку при активации. Поэтому для отладки не всегда можно использовать стандартные инструменты разработчика.
Команда Chrome усердно работала над улучшением поддержки правил спекуляции в инструментах разработчика. В этой статье мы расскажем, как использовать эти инструменты, чтобы понять правила спекуляции страницы, почему они могут не работать, а также когда разработчики могут использовать более привычные параметры DevTools, а когда нет.
Объяснение терминов с приставкой "предварительный"
Существует множество терминов с приставкой "пред-", которые могут запутать, поэтому мы начнем с их объяснения:
- Предварительная выборка – предварительное извлечение ресурса или документа для повышения производительности в будущем. В этой статье рассказывается о предзагрузке документов с помощью Speculation Rules API, а не похожего, но более старого варианта
<link rel="prefetch">, который часто используется для предзагрузки субресурсов. - Предварительная отрисовка. Это следующий шаг после предварительной выборки. Страница отрисовывается полностью, как если бы пользователь перешел на нее, но остается в скрытом фоновом процессе отрисовки. Если пользователь действительно перейдет на страницу, она будет готова к показу. Повторим, что в этом документе рассматривается более новая версия Speculation Rules API, а не более старый вариант
<link rel="prerender">(который больше не выполняет полную предварительную отрисовку). - Предполагаемые переходы. Общее название для новых вариантов предварительной загрузки и отрисовки, которые активируются правилами предположений.
- Предварительная загрузка. Этот термин может относиться к ряду технологий и процессов, включая
<link rel="preload">, сканер предварительной загрузки и предварительную загрузку навигации сервис-воркера. Мы не будем рассматривать их в этой статье, но включили этот термин, чтобы четко отделить их от "предполагаемых переходов".
Правила прогнозирования для prefetch
Правила прогнозирования можно использовать для предварительной загрузки документа, который будет открыт следующим. Например, если вставить на страницу следующий код JSON, будут предварительно загружены ресурсы next.html и next2.html:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"],
"tag": "rule-set-tag-1"
}
]
}
</script>
Использование правил спекуляции для предварительной загрузки навигации имеет некоторые преимущества перед старым синтаксисом <link rel="prefetch">, например более выразительный API и результаты, хранящиеся в кеше памяти, а не в кеше диска HTTP.
Отладка правил упреждающей загрузки (prefetch)
Предварительные выборки, активированные правилами упреждающей загрузки, можно посмотреть на панели Сеть так же, как и другие выборки.
Два запроса, выделенные красным, – это предварительно загруженные ресурсы, как видно в столбце Тип. Они извлекаются с приоритетом Lowest, поскольку предназначены для будущих переходов, а Chrome отдает приоритет ресурсам текущей страницы.
Если нажать на одну из строк, вы также увидите HTTP-заголовок Sec-Purpose: prefetch, по которому эти запросы можно идентифицировать на стороне сервера:
Как отлаживать prefetch с помощью вкладок упреждающей загрузки
В раздел Фоновые службы на панели Приложение в Инструментах разработчика Chrome добавлен новый раздел Упреждающая загрузка, который помогает отлаживать правила упреждающей загрузки.
В этом разделе есть три вкладки:
- Упреждающие загрузки. Здесь указан статус предварительной отрисовки текущей страницы.
- Правила. Здесь перечислены все наборы правил, найденные на текущей странице и обозначенные как URL или теги правил (если они есть).
- Предположения. Здесь перечислены все URL, для которых выполнялось предзагрузка и предварительная отрисовка на основе наборов правил.
На скриншоте выше показана вкладка Speculations (Прогнозирование). На ней видно, что для этой страницы задан один набор правил прогнозирования для предзагрузки трех страниц. Две из этих предварительных выборок были успешными, а одна – нет. Нажав на значок рядом с набором правил, вы перейдете к источнику набора правил на панели Элементы. Вы также можете нажать на ссылку Статус, чтобы перейти на вкладку Предположения, отфильтрованную по этому набору правил.
На вкладке Speculations (Предположения) перечислены все целевые URL, а также действие (предзагрузка или предварительная отрисовка), набор правил, из которого они получены (поскольку на странице может быть несколько наборов), и статус каждого предположения:
Над URL есть раскрывающийся список, в котором можно выбрать, какие URL показывать: из всех наборов правил или только из определенного. Ниже перечислены все URL. Чтобы посмотреть подробную информацию, нажмите на URL.
На этом скриншоте показана причина ошибки для страницы next3.html (которая не существует и поэтому возвращает код статуса HTTP 404, не относящийся к категории 2xx).
На вкладке Упреждающая загрузка есть отчет Статус упреждающей загрузки для этой страницы, в котором указано, использовалась ли для этой страницы предзагрузка или предварительная отрисовка.
Если страница была предзагружена, то при переходе на нее вы увидите сообщение об успешном выполнении:
Несопоставленные спекулятивные процессы
Если при переходе со страницы с правилами упреждающей загрузки не выполняется предзагрузка или предварительная отрисовка, в дополнительном разделе вкладки будет указано, почему URL не соответствует ни одному из URL упреждающей загрузки. Это позволяет выявлять опечатки в правилах упреждающей загрузки.
Например, мы перешли на страницу next4.html, но предзагружены только next.html, next2.html и next3.html. Как видите, ни одно из этих правил не подходит.
Вкладки Упреждающая загрузка очень полезны для отладки правил упреждающей загрузки и поиска синтаксических ошибок в JSON.
Что касается самих предварительных загрузок, то панель Сеть, скорее всего, более знакома. В примере с ошибкой предварительной загрузки вы можете увидеть код 404:
Однако вкладки Упреждающие загрузки становятся гораздо полезнее для правил прогнозирования предварительной отрисовки, о которых рассказывается далее.
Правила прогнозирования для prerender
Правила прогнозирования для предварительной отрисовки имеют тот же синтаксис, что и правила прогнозирования для предварительной загрузки. Пример:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"],
"tag": "rule-set-tag-1"
}
]
}
</script>
Этот набор правил запускает полную загрузку и отрисовку указанных страниц (с учетом определенных ограничений). Это может обеспечить мгновенную загрузку, хотя и за счет дополнительных ресурсов.
Однако, в отличие от предварительной выборки, эти запросы не отображаются на панели Сеть, поскольку они извлекаются и отрисовываются в отдельном процессе отрисовки в Chrome. Поэтому вкладка Упреждающие загрузки становится более важной для отладки правил упреждающей предварительной отрисовки.
Как отлаживать prerender на вкладке "Упреждающие загрузки"
Для правил прогнозирования предварительной отрисовки можно использовать те же экраны Упреждающая загрузка, что и для предзагрузки. Это показано на примере демостраницы, которая пытается выполнить предварительную отрисовку трех страниц вместо их предзагрузки:
Здесь мы снова видим, что один из трех URL не удалось предварительно отрисовать. Разработчики могут получить подробную информацию по каждому URL на вкладке Speculations (Предположения), нажав на ссылку 2 Ready, 1 Failure (2 готово, 1 ошибка).
В Chrome 121 мы запустили поддержку правил для документов. Это позволяет браузеру выбирать их из ссылок на тот же источник на странице, а не перечислять определенный набор URL:
<script type="speculationrules">
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{"href_matches": "/*"},
{"not": { "href_matches": "/not-safe-to-prerender/*"}}
]
},
"eagerness": "moderate"
}
]
}
</script>
В этом примере в качестве кандидатов на предварительную отрисовку выбираются все ссылки с тем же источником, кроме тех, которые начинаются с /not-safe-to-prerender.
Он также устанавливает для параметра prerender eagerness значение moderate. Это означает, что предварительная отрисовка навигации выполняется, когда пользователь наводит указатель мыши на ссылку (на компьютере), нажимает на нее или когда ссылка появляется в области просмотра (на мобильном устройстве).
Похожие правила есть на демонстрационном сайте правил упреждающей загрузки. Если вы откроете на нем новый раздел Упреждающая загрузка, то увидите, что в нем перечислены все подходящие URL, которые браузер нашел на странице.
В столбце Статус указано Не активировано, поскольку процесс предварительной отрисовки для этих страниц не запущен. Однако, когда мы наводим указатель на ссылки, мы видим, как меняется статус по мере предварительной отрисовки каждого URL:
В Chrome установлены ограничения на предварительную отрисовку, в том числе не более двух предварительных отрисовок для значения moderate параметра eagerness. Поэтому после наведения указателя мыши на третью ссылку мы видим причину сбоя для этого URL:
Как отлаживать prerender с помощью других панелей инструментов разработчика
В отличие от предварительно загруженных страниц, предварительно отрисованные страницы не будут показываться в текущих процессах отрисовки на панелях инструментов разработчика, например на панели Сеть, поскольку они отрисовываются в собственном фоновом средстве отрисовки.
Однако теперь вы можете переключать систему визуализации, используемую панелями инструментов разработчика, с помощью раскрывающегося меню в правом верхнем углу или выбрав URL в верхней части панели и нажав Проверить.
Это раскрывающееся меню (и выбранное значение) также используется на всех остальных панелях, например на панели Сеть, где можно увидеть, что запрашиваемая страница является предварительно отрисованной:
Если мы посмотрим на HTTP-заголовки этих ресурсов, то увидим, что для всех них будет задан заголовок Sec-Purpose: prefetch;prerender:
или на панели Элементы, где можно посмотреть контент страницы. На скриншоте ниже показан элемент <h1> для предварительно отрисованной страницы.
или на панели Console (Консоль), где можно посмотреть журналы консоли, созданные предварительно отрисованной страницей:
Как отлаживать правила прогнозирования на предварительно отрисованной странице
В предыдущих разделах рассказывается, как отлаживать предварительно отрисованные страницы на странице, которая инициирует предварительную отрисовку. Однако предварительно отрисованные страницы могут сами предоставлять сведения для отладки, выполняя вызовы аналитики или регистрируя данные в консоли (которые можно просмотреть, как описано в предыдущем разделе).
Кроме того, когда пользователь перейдет на предварительно отрисованную страницу, на вкладке Speculative loads (Упреждающие загрузки) появится статус, указывающий, была ли предварительная отрисовка успешной. Если предварительная отрисовка невозможна, то указывается причина:
Кроме того, как и в случае с предзагрузкой, при переходе со страницы с правилами прогнозирования, которые не соответствуют текущей странице, на вкладке Упреждающие загрузки будет показано, почему URL не соответствуют тем, которые указаны в правилах прогнозирования предыдущей страницы.
Заключение
В этой статье мы рассказали о различных способах отладки правил упреждающей загрузки для предзагрузки и предварительной отрисовки. Команда продолжает работать над инструментами для правил спекуляции, и мы будем рады услышать предложения разработчиков о том, какие ещё способы могут быть полезны для отладки этого нового API. Мы рекомендуем разработчикам сообщать о любых запросах на добавление функций или обнаруженных ошибках в системе отслеживания ошибок Chrome.
Благодарности
Значок: Nubelson Fernandes, Unsplash.