Предварительная обработка страниц в Chrome для мгновенной навигации по страницам

Barry Pollard

Опубликовано: 2 декабря 2022 г., Последнее обновление: 23 января 2026 г.

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

Краткая история предварительной отрисовки

Ранее Chrome поддерживал подсказку ресурса <link rel="prerender" href="/next-page"> , однако она не получила широкого распространения за пределами Chrome и не представляла собой очень выразительный API.

Устаревший способ предварительной отрисовки с использованием подсказки rel=prerender был заменен на `NoState Prefetch` , который вместо этого загружал ресурсы, необходимые для будущей страницы, но не выполнял полную предварительную отрисовку страницы и не запускал JavaScript. `NoState Prefetch` действительно помогает улучшить производительность страницы за счет ускорения загрузки ресурсов, но не обеспечивает мгновенную загрузку страницы, как это было бы при полной предварительной отрисовке.

Команда Chrome вновь внедрила полноценную предварительную отрисовку. Во избежание проблем с существующим использованием и для обеспечения возможности дальнейшего расширения предварительной отрисовки, новый механизм предварительной отрисовки не будет использовать синтаксис <link rel="prerender"...> , который остается в силе для NoState Prefetch, с целью его последующего отказа в будущем.

Как происходит предварительная отрисовка страницы?

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

1. Когда вы вводите URL-адрес в адресную строку Chrome (также известную как «омнибокс»), Chrome может автоматически предварительно отобразить страницу, если он уверен, что вы посетите именно эту страницу, основываясь на вашей предыдущей истории просмотров.
2. При использовании панели закладок Chrome может автоматически предварительно отобразить страницу, если навести указатель мыши на одну из кнопок закладок.
3. Когда вы вводите поисковый запрос в адресную строку Chrome, Chrome может автоматически предварительно отобразить страницу результатов поиска, если поисковая система даст на это соответствующее указание.
4. Сайты могут использовать API правил спекуляции , чтобы программно указывать Chrome, какие страницы следует предварительно отрисовывать. Это заменяет то, что раньше делал <link rel="prerender"...> , и позволяет сайтам заблаговременно предварительно отрисовывать страницу на основе правил спекуляции, установленных на странице. Эти правила могут существовать статически на страницах или динамически внедряться с помощью JavaScript по усмотрению владельца страницы.

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

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

Влияние предварительной отрисовки

Предварительная отрисовка позволяет загружать страницу практически мгновенно, как показано в следующем видео:

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

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

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

Дополнительную информацию о том, как измерить фактическое влияние на производительность в вашей аналитике, см. в разделе « Измерение производительности» .

Посмотреть прогнозы адресной строки Chrome

В первом случае вы можете просмотреть прогнозы Chrome для URL-адресов на странице chrome://predictors :

Зеленые линии указывают на достаточную степень уверенности для запуска предварительной отрисовки. В этом примере ввод "s" дает приемлемый уровень уверенности (янтарный), но как только вы введете "sh", Chrome будет иметь достаточную уверенность, чтобы вы почти всегда переходили по адресу https://sheets.google.com .

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

Эти факторы также влияют на предлагаемые варианты в адресной строке, которые вы, возможно, заметили:

Chrome будет постоянно обновлять свои алгоритмы подсказок на основе вашего ввода и выбора.

• При уровне достоверности более 30% (отображается желтым цветом) Chrome заблаговременно устанавливает предварительное соединение с доменом, но не выполняет предварительную отрисовку страницы.
• При уровне достоверности более 50% (отображается зеленым цветом) Chrome предварительно отобразит URL-адрес.

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

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

списки URL-адресов

Правила спекулятивного анализа могут основываться на списках URL-адресов:

<script type="speculationrules">
{
  "prerender": [{
    "urls": ["next.html", "next2.html"]
  }]
}
</script>

Правила документа

Правила спекуляции также могут быть «правилами документа» с использованием синтаксиса where . Это позволяет спекулировать на ссылках, найденных в документе, на основе селекторов href (на основе API шаблонов URL ) или селекторов CSS:

<script type="speculationrules">
{
  "prerender": [{
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": {"href_matches": "/wp-admin"}},
        { "not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
        { "not": {"selector_matches": ".do-not-prerender"}},
        { "not": {"selector_matches": "[rel~=nofollow]"}}
      ]
    }
  }]
}
</script>

Желание

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

• conservative : Это предположение на основе показаний указательного пальца или касания земли.
• moderate : На настольных компьютерах это выполняет предположения, если вы удерживаете указатель мыши над ссылкой в ​​течение 200 миллисекунд (или по событию pointerdown , если это происходит раньше, а на мобильных устройствах, где нет события hover ,). На мобильных устройствах мы перешли на использование сложных эвристических алгоритмов для области просмотра с августа 2025 года. Сложные эвристические алгоритмы для области просмотра срабатывают через 500 мс после того, как пользователь прекратил прокрутку, для якорей, находящихся в пределах 30% вертикального расстояния от предыдущего нажатия указателя мыши, где якоря как минимум в 0,5 раза больше самого большого якоря в области просмотра. Как описано в этом документе .
• eager : Раньше эта функция eager работала идентично immediate , но в Chrome 143 она изменилась. На настольных компьютерах она выполняет спекулятивные вычисления, если вы удерживаете указатель мыши над ссылкой в ​​течение 10 миллисекунд. На мобильных устройствах с января 2026 года мы перешли на использование простых эвристических алгоритмов для области просмотра. Простые эвристические алгоритмы для области просмотра срабатывают через 50 мс после того, как якорь попадает в область просмотра.
• immediate : Этот термин используется для обозначения возможности начать спекуляцию как можно скорее, то есть, как только будут соблюдены правила спекуляции.

По eagerness для правил list установлен параметр immediate . Параметры eager », moderate и conservative позволяют ограничить правила list URL-адресами, с которыми пользователь взаимодействует в рамках определенного списка. Хотя во многих случаях правила document с соответствующим условием where могут быть более подходящими.

По умолчанию для правил document используется conservative eagerness . Учитывая, что документ может состоять из множества URL-адресов, использование immediate для правил document следует применять с осторожностью (см. также раздел об ограничениях Chrome далее).

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

moderate вариант — это золотая середина, и многим сайтам могло бы пригодиться следующее правило спекуляции, которое предварительно отображало бы ссылку при удержании указателя над ссылкой в ​​течение 200 миллисекунд или при событии pointerdown в качестве базовой, но мощной реализации правил спекуляции:

<script type="speculationrules">
{
  "prerender": [{
    "where": {
      "href_matches": "/*"
    },
    "eagerness": "moderate"
  }]
}
</script>

Предварительная загрузка

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

<script type="speculationrules">
{
  "prefetch": [{
    "urls": ["next.html", "next2.html"]
  }]
}
</script>

Prerender until script

Команда Chrome также работает над добавлением prerender_until_script в API правил спекулятивного отображения (см.: ошибка реализации ). Это будет промежуточным этапом между prefetch и prerender и будет использоваться аналогичным образом:

<script type="speculationrules">
{
  "prerender_until_script": [{
    "urls": ["next.html", "next2.html"]
  }]
}
</script>

Подобно функции