Правила спекуляции можно использовать для предварительной выборки и предварительной обработки навигации по следующей странице, как подробно описано в предыдущем посте . Это может обеспечить гораздо более быструю или даже мгновенную загрузку страниц, значительно улучшая основные веб-показатели для этих дополнительных навигации по страницам.
Отладка правил спекуляций может оказаться сложной задачей. Это особенно актуально для предварительно обработанных страниц, поскольку эти страницы обрабатываются в отдельном средстве визуализации — что-то вроде скрытой фоновой вкладки, которая заменяет текущую вкладку при активации. Поэтому обычные параметры DevTools не всегда можно использовать для устранения проблем.
Команда Chrome усердно работала над улучшением поддержки DevTools для отладки правил спекуляций. В этом посте вы увидите все различные способы использования этих инструментов, чтобы понять правила спекуляции на странице, почему они могут не работать и когда разработчики могут использовать более знакомые параметры DevTools, а когда нет.
Объяснение «предварительных» терминов
Существует множество «предварительных» терминов, которые легко спутать, поэтому давайте начнем с их объяснения:
- Предварительная выборка : предварительная выборка ресурса или документа для повышения производительности в будущем. В этом посте рассматривается предварительная выборка документов с использованием API Speculation Rules, а не аналогичной, но более старой опции
<link rel="prefetch">часто используемой для предварительной выборки подресурсов. - Предварительный рендеринг : это выходит за рамки предварительной выборки и фактически отображает всю страницу так, как если бы пользователь перешел на нее, но сохраняет ее в скрытом фоновом процессе рендеринга, готовом к использованию, если пользователь действительно перейдет туда. Опять же, этот документ посвящен более новой версии API Speculation Rules, а не более старой опции
<link rel="prerender">(которая больше не выполняет полную предварительную отрисовку ). - Навигационные спекуляции : собирательный термин для новых опций предварительной выборки и предварительной отрисовки, запускаемых правилами спекуляций.
- Предварительная загрузка : перегруженный термин, который может относиться к ряду технологий и процессов, включая
<link rel="preload">, сканер предварительной загрузки и предварительные загрузки навигации сервис-воркера . Эти вопросы здесь не рассматриваются, но этот термин включен, чтобы четко отличать их от термина «навигационные спекуляции».
Правила спекуляции для prefetch
Правила спекуляции можно использовать для предварительной выборки следующего навигационного документа. Например, при вставке следующего JSON на страницу next.html и next2.html будут предварительно загружены:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Использование правил спекуляции для предварительной выборки навигации имеет некоторые преимущества по сравнению со старым синтаксисом <link rel="prefetch"> , например более выразительный API и сохранение результатов в кеше памяти, а не в дисковом кеше HTTP.
Отладка правил спекуляции prefetch
Предварительные выборки, вызванные правилами спекуляции, можно увидеть на панели «Сеть» так же, как и другие выборки:
Два запроса, выделенные красным, представляют собой предварительно загруженные ресурсы, как видно из столбца «Тип» . Они извлекаются с Lowest приоритетом, поскольку они предназначены для будущих навигаций, а Chrome отдает приоритет ресурсам текущей страницы.
При нажатии на одну из строк также отображается HTTP-заголовок Sec-Purpose: prefetch , который позволяет идентифицировать эти запросы на стороне сервера:
Отладка prefetch с помощью вкладок «Спекулятивная загрузка»
На панель приложений Chrome DevTools в разделе « Фоновые службы» добавлен новый раздел «Спекулятивные загрузки» , который помогает отлаживать правила спекуляций:
В этом разделе доступны три вкладки:
- Спекулятивные загрузки , в которых указан предварительно обработанный статус текущей страницы.
- Правила , в которых перечислены все наборы правил, найденные на текущей странице.
- Спекуляции , в которых перечислены все предварительно выбранные и предварительно обработанные URL-адреса из наборов правил.
Вкладка «Спекуляции» показана на предыдущем снимке экрана, и мы видим, что на этой странице-примере есть один набор правил спекуляций для предварительной загрузки трех страниц. Две из этих предварительных выборок прошли успешно, а одна — неудачно. Можно щелкнуть значок рядом с набором правил , чтобы перейти к источнику набора правил на панели «Элементы» . Альтернативно можно щелкнуть ссылку «Статус» , чтобы перейти на вкладку «Предположения» , отфильтрованную по этому набору правил.
На вкладке «Спекуляции» перечислены все целевые 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"]
}
]
}
</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 .
Он также устанавливает moderate eagerness к предварительной визуализации, что означает, что навигация предварительно обрабатывается при наведении указателя мыши или нажатии ссылки.
Подобные правила существуют на этом демонстрационном сайте , и использование нового раздела «Спекулятивные нагрузки» на этом сайте показывает полезность этой новой вкладки, поскольку перечислены все подходящие URL-адреса, которые браузер нашел на странице:
Статус «Не активирован» , поскольку процесс предварительной визуализации для них не запущен. Однако, наводя курсор на ссылки, мы видим изменение статуса по мере предварительной обработки каждого URL-адреса:
В Chrome установлены ограничения на предварительные рендеры , включая максимум 2 пререндеринга для moderate рвения, поэтому после наведения курсора на третью ссылку мы видим причину сбоя для этого URL:
Отладка prerender с помощью других панелей DevTools
В отличие от предварительной выборки, страницы, прошедшие предварительную обработку, не будут отображаться в текущих процессах визуализации на панелях DevTools, таких как панель «Сеть» , поскольку они обрабатываются в собственном внутреннем модуле визуализации.
Однако теперь можно переключить средство рендеринга, используемое панелями DevTools, с помощью раскрывающегося меню в правом верхнем углу или выбрав URL-адрес в верхней части панели и выбрав Inspect :
Этот раскрывающийся список (и выбранное значение) также используется во всех других панелях, таких как панель «Сеть» , где вы можете видеть, что запрашиваемая страница является предварительно обработанной:
Глядя на HTTP-заголовки этих ресурсов, мы видим, что все они будут установлены с помощью заголовка Sec-Purpose: prefetch;prerender :
Или панель «Элементы» , где вы можете увидеть содержимое страницы, как на следующем снимке экрана, где мы видим, что элемент <h1> предназначен для предварительно обработанной страницы:
Или панель «Консоль» , где вы можете увидеть журналы консоли, созданные предварительно обработанной страницей:
Отладка правил спекуляций на предварительно обработанной странице
В предыдущих разделах обсуждается, как отлаживать предварительно обработанные страницы на странице, которая инициирует предварительную обработку. Однако сами предварительно обработанные страницы также могут предоставлять отладочную информацию либо путем выполнения аналитических вызовов, либо путем входа в консоль (которая доступна для просмотра, как описано в предыдущем разделе).
Кроме того, как только предварительно обработанная страница активирована пользователем, перешедшим на нее, на вкладке Спекулятивные загрузки будет показан этот статус и указано, была ли она успешно обработана или нет. Если это не удалось предоставить заранее, предоставляется объяснение, почему это произошло:
Кроме того , как и в случае с предварительной загрузкой , при переходе со страницы с правилами спекуляции, которые не соответствуют текущей странице, будет предпринята попытка показать вам, почему URL-адреса не соответствуют URL-адресам, описанным в правилах спекуляции предыдущей страницы на вкладке Спекулятивные загрузки :
Заключение
В этом посте мы показали различные способы, с помощью которых разработчики могут отлаживать правила предварительной выборки и спекуляции перед отрисовкой. Команда продолжает работать над инструментами для правил спекуляций, и мы хотели бы услышать предложения разработчиков о том, какие еще способы могут быть полезны для отладки этого замечательного нового API. Мы рекомендуем разработчикам сообщать о любых запросах функций или обнаруженных ошибках в системе отслеживания проблем Chrome .
Благодарности
Миниатюрное изображение, созданное Нубельсоном Фернандесом на Unsplash .