Правила спекуляции могут использоваться для предварительной выборки и предварительной визуализации навигации на следующей странице, как подробно описано в предыдущем посте . Это может обеспечить гораздо более быструю — или даже мгновенную — загрузку страниц, значительно улучшая Core Web Vitals для этих дополнительных навигаций по страницам.
Отладка правил спекуляции может быть сложной. Это особенно касается предварительно отрендеренных страниц, поскольку эти страницы отрисовываются в отдельном рендерере — своего рода скрытой фоновой вкладке, которая заменяет текущую вкладку при активации. Поэтому обычные параметры DevTools не всегда можно использовать для отладки проблем.
Команда Chrome усердно работала над улучшением поддержки DevTools для отладки правил спекуляции. В этой статье вы увидите все различные способы использования этих инструментов для понимания правил спекуляции страницы, почему они могут не работать и когда разработчики могут использовать более привычные опции DevTools, а когда нет.
Объяснение терминов «пре-»
Существует множество «пре-» терминов, которые сбивают с толку, поэтому начнем с их объяснения:
- Prefetch : заблаговременное извлечение ресурса или документа для улучшения будущей производительности. В этой статье рассматривается предварительная выборка документов с использованием API правил Speculation, а не аналогичная, но более старая опция
<link rel="prefetch">часто используемая для предварительной выборки подресурсов. - Prerender : это шаг за пределы предварительной выборки и фактически отображает всю страницу, как будто пользователь перешел на нее, но сохраняет ее в скрытом фоновом процессе рендеринга, готовом к использованию, если пользователь действительно перейдет туда. Опять же, этот документ касается более новой версии API Speculation Rules, а не старой опции
<link rel="prerender">(которая больше не выполняет полную предварительную визуализацию ). - Спекулятивные навигации : собирательный термин для новых опций предварительной выборки и предварительной визуализации, запускаемых правилами спекуляции.
- Preload : перегруженный термин, который может относиться к ряду технологий и процессов, включая
<link rel="preload">, сканер предварительной загрузки и предварительные загрузки навигации Service Worker . Эти элементы не будут здесь рассмотрены, но термин включен, чтобы четко отличать их от термина "спекулятивные навигации".
Правила спекуляции для 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 DevTools в разделе «Фоновые службы» добавлен новый раздел «Спекулятивные нагрузки» , который поможет в отладке правил спекуляции:
В этом разделе доступны три вкладки:
- Спекулятивные загрузки , в которых отображается предварительно отрисованный статус текущей страницы.
- Правила , в которых перечислены все наборы правил, найденные на текущей странице, обозначенные как URL-адреса или теги правил , если таковые имеются.
- Speculations , в котором перечислены все предварительно загруженные и предварительно обработанные URL-адреса из наборов правил.
Вкладка Speculations показана на предыдущем снимке экрана, и мы видим, что эта страница-пример имеет один набор правил спекуляции для предварительной выборки 3 страниц. Две из этих предварительных выборок были успешными, а одна — неудачной. Можно щелкнуть значок рядом с набором правил , чтобы перейти к источнику набора правил на панели Elements . В качестве альтернативы можно щелкнуть ссылку Status , чтобы перейти на вкладку Speculations , отфильтрованную по этому набору правил.
На вкладке «Предположения» перечислены все целевые URL-адреса, а также действие (предварительная выборка или предварительная визуализация), набор правил, из которого они были получены (поскольку на странице их может быть несколько), и статус каждого предположения:
Выпадающий список над URL-адресами можно использовать для отображения URL-адресов из всех наборов правил или только URL-адресов из определенного набора правил. Ниже перечислены все URL-адреса. Нажатие на URL-адрес дает более подробную информацию.
На этом снимке экрана мы видим причину сбоя для страницы next3.html (которая не существует и поэтому возвращает 404, что является кодом статуса HTTP, отличным от 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-адресу на вкладке «Предположения» , нажав на ссылку «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 в качестве кандидатов на предварительную визуализацию.
Он также устанавливает умеренную eagerness к предварительной moderate , что означает, что навигационные элементы будут предварительно визуализироваться при наведении курсора или щелчке по ссылке.
Похожие правила есть на демонстрационном сайте спекулятивных правил , и использование нового раздела «Спекулятивные нагрузки» на этом сайте показывает полезность этой новой вкладки, поскольку в ней перечислены все подходящие URL-адреса, которые браузер нашел на странице:
Статус не запущен , так как процесс предварительной визуализации для них не начался. Однако, удерживая указатель над ссылками, мы видим изменение статуса, поскольку каждый URL-адрес предварительно визуализируется:
Chrome установил ограничения на предварительные рендеры , включая максимум 2 предварительных рендера для moderate рвения, поэтому после наведения курсора на третью ссылку мы видим причину сбоя для этого URL:
Отладка prerender с помощью других панелей DevTools
В отличие от предварительной выборки, страницы, которые были предварительно отрендерены, не будут отображаться в текущих процессах рендеринга на панелях DevTools, таких как панель «Сеть» , поскольку они отрисовываются в своем собственном внутреннем рендерере.
Однако теперь можно переключать рендерер, используемый панелями DevTools, с помощью раскрывающегося меню в правом верхнем углу или выбрав URL-адрес в верхней части панели и выбрав «Проверить» :
Этот раскрывающийся список (и выбранное значение) также является общим для всех других панелей, например, для панели «Сеть» , где вы можете видеть, что запрашиваемая страница является предварительно отрисованной:
Рассматривая заголовки HTTP для этих ресурсов, мы видим, что все они будут установлены с заголовком Sec-Purpose: prefetch;prerender :
Или панель «Элементы» , где вы можете увидеть содержимое страницы, как на следующем снимке экрана, где мы видим элемент <h1> для предварительно отрисованной страницы:
Или панель консоли , где вы можете увидеть журналы консоли, созданные предварительно отрисованной страницей:
Отладка правил спекуляции на предварительно отрендеренной странице
В предыдущих разделах обсуждалось, как отлаживать предварительно отрисованные страницы на странице, которая инициирует предварительную отрисовку. Однако также возможно, что сами предварительно отрисованные страницы предоставляют отладочную информацию, либо выполняя вызовы аналитики, либо регистрируясь в консоли (которая просматривается, как описано в предыдущем разделе).
Кроме того, как только предварительно отрендеренная страница активируется пользователем, переходящим на нее, вкладка Speculative loads покажет этот статус и то, была ли она успешно предварительно отрендерена или нет. Если ее не удалось предварительно отрендерить, то приводится объяснение, почему это произошло:
Кроме того, как и в случае с предварительной выборкой , при переходе со страницы с правилами предположения, которые не соответствуют текущей странице, будет предпринята попытка показать вам, почему URL-адреса не соответствуют тем, которые указаны в правилах предположения предыдущей страницы на вкладке « Спекулятивные загрузки »:
Заключение
В этой статье мы показали различные способы, которыми разработчики могут отлаживать правила предварительной выборки и предварительной визуализации спекуляций. Команда продолжает работать над инструментами для правил спекуляции, и мы хотели бы услышать предложения от разработчиков относительно того, какие еще способы были бы полезны для отладки этого захватывающего нового API. Мы призываем разработчиков поднимать вопрос в Chrome issue tracker для любых запросов функций или обнаруженных ошибок.
Благодарности
Миниатюрное изображение от Nubelson Fernandes на Unsplash .