Правила спекулятивного поиска можно использовать для предварительной загрузки и отрисовки навигации по следующей странице, как подробно описано в предыдущем посте . Это может обеспечить гораздо более быструю — или даже мгновенную — загрузку страниц, значительно улучшая показатели Core Web Vitals для этих дополнительных навигаций по страницам.
Отладка правил обработки спекулятивных запросов может быть сложной задачей. Это особенно актуально для предварительно отрисованных страниц, поскольку эти страницы отрисовываются в отдельном рендерере — своего рода скрытой фоновой вкладке, которая заменяет текущую вкладку при активации. Поэтому обычные параметры инструментов разработчика не всегда могут быть использованы для отладки проблем.
Команда Chrome усердно работала над улучшением поддержки отладки правил спекулятивного выполнения в инструментах разработчика. В этом посте вы узнаете о различных способах использования этих инструментов для понимания правил спекулятивного выполнения страницы, причин их неработоспособности, а также о том, когда разработчики могут использовать более привычные параметры инструментов разработчика, а когда нет.
Пояснение терминов "pre-"
Существует множество терминов, начинающихся с «pre-», которые могут вызывать путаницу, поэтому начнём с их объяснения:
- Предварительная загрузка : загрузка ресурса или документа заранее для повышения производительности в будущем. В этой статье рассматривается предварительная загрузка документов с использованием API правил спекуляции, а не аналогичного, но более старого варианта
<link rel="prefetch">часто используемого для предварительной загрузки подресурсов. - Предварительная отрисовка : это выходит за рамки предварительной загрузки и фактически отрисовывает всю страницу так, как если бы пользователь перешел на нее, но хранит ее в скрытом фоновом процессе отрисовки, готовом к использованию, если пользователь действительно перейдет на эту страницу. Опять же, этот документ посвящен более новой версии 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-адреса из наборов правил.
Вкладка «Предположения» показана на предыдущем скриншоте, и мы видим, что на этой странице-примере используется один набор правил для предварительной загрузки 3 страниц. Две из этих предварительных загрузок прошли успешно, а одна — нет. Щелкнув значок рядом с набором правил , вы перейдете к источнику набора правил на панели «Элементы» . Также можно щелкнуть ссылку «Статус» , чтобы перейти на вкладку «Предположения» , отфильтрованную по этому набору правил.
На вкладке «Предположения» отображаются все целевые URL-адреса, а также действие (предварительная загрузка или предварительная отрисовка), набор правил, из которого они были получены (поскольку на странице может быть несколько таких наборов), и статус каждого предположения:
Над URL-адресами находится выпадающее меню, позволяющее отображать URL-адреса из всех наборов правил или только из определенного набора правил. Ниже перечислены все URL-адреса. Щелчок по URL-адресу предоставляет более подробную информацию.
На этом скриншоте мы видим причину сбоя страницы next3.html (которая не существует и, следовательно, возвращает ошибку 404, что является кодом состояния HTTP, отличным от 2xx).
На вкладке «Сводка», «Спекулятивные загрузки» , отображается статус спекулятивной загрузки для этой страницы , показывающий, использовалась ли для этой страницы предварительная загрузка или предварительная отрисовка.
При переходе на предварительно загруженную страницу вы должны увидеть сообщение об успешном завершении:
Непревзойденные предположения
Если переход осуществляется со страницы, на которой действуют правила спекулятивного поиска, но не используется предварительная загрузка или предварительная отрисовка, в дополнительном разделе вкладки отобразится более подробная информация о том, почему URL-адрес не совпал ни с одним из URL-адресов, используемых в спекулятивном поиске. Это полезно для выявления опечаток в правилах спекулятивного поиска.
Например, здесь мы перешли на next4.html , но предварительно загружаются только next.html , next2.html или next3.html , поэтому мы видим, что это не совсем соответствует ни одному из этих трех правил.
Вкладки «Спекулятивная загрузка» очень полезны для отладки самих правил спекулятивной загрузки и поиска любых синтаксических ошибок в JSON.
Что касается самих предварительных загрузок, то панель «Сеть» , вероятно, является более привычным местом. Пример ошибки предварительной загрузки можно увидеть здесь:
Однако вкладки «Спекулятивные загрузки» становятся гораздо полезнее для предварительной отрисовки правил спекулятивного моделирования, которые будут рассмотрены далее.
Правила прогнозирования для prerender
Правила спекулятивной отрисовки (Prerender speculation rules) имеют тот же синтаксис, что и правила спекулятивной предварительной выборки (Prefetch speculation rules). Например:
<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 .
Также устанавливается moderate eagerness предварительной отрисовки, что означает, что навигация выполняется при наведении курсора на ссылку (на компьютере), в зависимости от размера области просмотра (на мобильном устройстве) или при щелчке по ней.
Подобные правила есть и на демонстрационном сайте спекулятивных правил , а использование нового раздела «Спекулятивные загрузки» на этом сайте демонстрирует полезность этой новой вкладки, поскольку в ней перечислены все подходящие URL-адреса, найденные браузером на странице:
Статус « Не активируется» , поскольку процесс предварительной отрисовки для этих ссылок еще не запущен. Однако, когда мы наводим указатель мыши на ссылки, мы видим, как статус меняется по мере предварительной отрисовки каждого URL-адреса:
В Chrome установлены ограничения на предварительную отрисовку , включая максимум 2 предварительные отрисовки для moderate активности, поэтому после наведения курсора на третью ссылку мы видим причину ошибки для этого URL:
Отладка prerender с использованием других панелей инструментов разработчика.
В отличие от предварительной загрузки, страницы, прошедшие предварительную отрисовку, не будут отображаться в текущих процессах отрисовки на панелях инструментов разработчика, таких как панель «Сеть» , поскольку они отрисовываются в собственном фоновом рендерере.
Однако теперь можно переключить средство отображения, используемое панелями инструментов разработчика, с помощью выпадающего меню в правом верхнем углу или выбрав URL-адрес в верхней части панели и выбрав «Проверить элемент» :
Этот выпадающий список (и выбранное значение) отображается и на всех остальных панелях, например, на панели «Сеть» , где видно, что запрашиваемая страница уже была отрисована:
Рассматривая HTTP-заголовки этих ресурсов, мы видим, что все они будут иметь заголовок Sec-Purpose: prefetch;prerender :
Или панель «Элементы» , где вы можете увидеть содержимое страницы, как на следующем скриншоте, где мы видим, что элемент <h1> предназначен для предварительно отрисованной страницы:
Или панель «Консоль» , где вы можете увидеть сообщения в консоли, выводимые предварительно отрисованной страницей:
Отладка правил спекулятивного отображения на предварительно отрисованной странице.
В предыдущих разделах обсуждалось, как отлаживать предварительно отрисованные страницы на той странице, которая инициирует предварительную отрисовку. Однако сами предварительно отрисованные страницы также могут предоставлять отладочную информацию, либо путем выполнения запросов к аналитике, либо путем вывода логов в консоль (которая доступна для просмотра, как описано в предыдущем разделе).
Кроме того, после активации предварительно отрисованной страницы пользователем при переходе на неё, на вкладке «Спекулятивные загрузки» будет отображаться этот статус, а также информация о том, была ли страница успешно предварительно отрисована или нет. Если предварительная отрисовка не удалась, будет предоставлено объяснение причин:
Кроме того, как и в случае с предварительной загрузкой , при переходе со страницы, правила спекулятивной загрузки которой не совпали с правилами текущей страницы, система попытается показать вам, почему URL-адреса не совпали с правилами спекулятивной загрузки предыдущей страницы на вкладке «Спекулятивные загрузки» :
Заключение
В этом посте мы показали различные способы отладки правил предварительной выборки и предварительной отрисовки. Команда продолжает работу над инструментами для отладки этих правил, и мы будем рады услышать предложения от разработчиков о том, какие еще способы были бы полезны для отладки этого нового API. Мы призываем разработчиков сообщать о любых запросах на добавление функций или обнаруженных ошибках в систему отслеживания ошибок Chrome .
Благодарности
Миниатюрное изображение предоставлено Nubelson Fernandes на Unsplash .