Почему мгновенная навигация — это уже не роскошь, а стандарт
Вы оптимизировали изображения, настроили кеширование, подключили CDN, минифицировали бандлы — и сайт грузится за 1,5 секунды. Отличный результат, правда? Но вот пользователь кликает по ссылке — и снова ждёт. Каждый переход между страницами запускает всё по новой: DNS-запрос, TCP-соединение, получение HTML, парсинг, загрузка ресурсов, рендеринг. Даже на быстром сайте это 500–2000 мс.
А что, если браузер мог бы подготовить следующую страницу заранее — загрузить HTML, все ресурсы, выполнить JavaScript и полностью отрисовать в фоновой вкладке? Тогда при клике пользователь увидел бы готовую страницу мгновенно — с LCP, буквально равным нулю.
Именно это и делает Speculation Rules API. Это браузерный механизм спекулятивной загрузки и пререндеринга, который в 2026 году стал одним из самых эффективных инструментов для Core Web Vitals. Давайте разберём его от азов до продвинутых паттернов — с рабочим кодом и реальными цифрами.
Что такое Speculation Rules API
Speculation Rules API — браузерное API, которое позволяет описать правила спекулятивной предзагрузки (prefetch) и пререндеринга (prerender) страниц. Правила задаются в формате JSON внутри специального тега <script type="speculationrules"> или через HTTP-заголовок Speculation-Rules.
API пришёл на замену устаревшему <link rel="prerender">, который поддерживался только в Chrome и работал, честно говоря, ненадёжно. Новый подход принципиально другой — декларативный, гибкий синтаксис с поддержкой условий, уровней «жадности» загрузки и двух режимов работы.
Prefetch vs. Prerender: два режима спекулятивной загрузки
У API есть два основных режима, и разница между ними — критична:
- Prefetch — браузер загружает только HTML-документ целевой страницы. Подресурсы (CSS, JS, изображения) не скачиваются, JavaScript не выполняется. Лёгкая операция с минимальным потреблением ресурсов.
- Prerender — браузер загружает HTML, все подресурсы, выполняет JavaScript и полностью рендерит страницу в скрытой фоновой вкладке. При навигации скрытая вкладка просто становится активной — пользователь видит уже готовую страницу.
Prefetch экономит ресурсы и подходит для широкого покрытия. Prerender даёт максимальный эффект, но ест больше CPU, памяти и трафика. Лучшая стратегия — комбинировать оба режима (об этом ниже).
Базовый синтаксис и первая реализация
Простейший пример: предзагрузка конкретных URL
Самый простой способ начать — указать список URL для предзагрузки через list rules:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["/catalog", "/about", "/contact"]
}
]
}
</script>Браузер начнёт загрузку HTML этих страниц сразу после обнаружения правила. Подходит для случаев с предсказуемой навигацией — например, главная страница со ссылками на каталог.
Document rules: автоматический подбор ссылок
Более интересный подход — document rules. Вместо перечисления конкретных URL вы описываете условия, а браузер сам решает, какие ссылки на странице подходят для спекулятивной загрузки:
<script type="speculationrules">
{
"prerender": [
{
"where": {
"and": [
{ "href_matches": "/*" },
{ "not": { "href_matches": "/logout" } },
{ "not": { "href_matches": "/cart/*" } },
{ "not": { "selector_matches": ".no-prerender" } }
]
},
"eagerness": "moderate"
}
]
}
</script>Этот фрагмент говорит браузеру: «Пререндери все внутренние ссылки, кроме logout, корзины и элементов с классом .no-prerender, когда пользователь наводит курсор». Условие href_matches использует URL Pattern API и поддерживает wildcard-шаблоны.
Уровни eagerness: когда запускать спекуляцию
Параметр eagerness определяет, насколько агрессивно браузер выполняет спекуляцию. По сути, это главный инструмент балансировки между скоростью и расходом ресурсов:
| Значение | Когда срабатывает | Рекомендуемое применение |
|---|---|---|
immediate |
Сразу при обнаружении правила | List rules с 1–3 самыми вероятными URL |
eager |
Десктоп: 10 мс наведения курсора. Мобильные: ссылки в viewport после 100 мс паузы прокрутки | Document rules для ключевых страниц |
moderate |
200 мс наведения курсора или pointerdown. Мобильные: ссылки в зоне 30% от последнего касания | Баланс между охватом и расходом ресурсов |
conservative |
При pointerdown / touchstart (начало клика) | Максимально безопасный режим |
Обратите внимание: значение eager было обновлено в Chrome 143 в начале 2026 года. Раньше оно работало так же, как immediate, а теперь на десктопе спекуляция запускается через 10 мс наведения курсора, на мобильных — по viewport-эвристикам. Важное изменение, которое стоит учитывать при миграции старых конфигов.
По умолчанию для list rules используется immediate, а для document rules — conservative. Если вы используете document rules с href_matches: "/*", ставьте moderate или conservative — иначе рискуете перегрузить и браузер, и сервер.
Комбинированная стратегия: prefetch + prerender
Вот тут начинается самое интересное. Лучшая практика — двухуровневая стратегия: сначала дешёвый prefetch, затем полный prerender при более сильном сигнале намерения:
<script type="speculationrules">
{
"prefetch": [
{
"where": { "href_matches": "/*" },
"eagerness": "eager"
}
],
"prerender": [
{
"where": {
"and": [
{ "href_matches": "/*" },
{ "not": { "href_matches": "/checkout/*" } },
{ "not": { "href_matches": "/admin/*" } },
{ "not": { "selector_matches": "[rel~=nofollow]" } }
]
},
"eagerness": "moderate"
}
]
}
</script>Логика простая: все внутренние ссылки получают prefetch при быстром наведении курсора (дешёвая загрузка только HTML). Если пользователь задержит курсор на 200 мс — запустится полный пререндеринг. Максимальный охват при разумном расходе ресурсов.
На практике именно этот паттерн даёт наилучшие результаты для большинства сайтов.
Влияние на Core Web Vitals: реальные цифры
Speculation Rules API оказывает прямое и измеримое влияние на все три метрики Core Web Vitals. И это не теория — вот конкретные данные.
LCP: от секунд к миллисекундам
Пререндеренные страницы измеряются от момента активации (когда пользователь кликает и скрытая вкладка становится видимой), а не от начала загрузки. Поскольку к этому моменту страница уже полностью отрисована, LCP часто составляет 0 мс. Ноль. Буквально.
Данные из реальных проектов:
- Akamai (Scalemates): LCP на P75 для пререндеренных страниц — 537 мс против 714 мс для обычных (улучшение на 177 мс), при этом 59% навигаций задействовали пререндеринг
- NitroPack: 80% улучшение LCP на пререндеренных страницах
- Navigation AI: LCP снизился на 85% — с 3,1 с до 0,4 с
- Cloudflare Speed Brain: сокращение LCP до 45% на бесплатных тарифах и до 75% с ML-моделями предсказания
INP: отзывчивость с первого взаимодействия
Пререндеринг улучшает INP за счёт того, что к моменту первого взаимодействия JavaScript уже выполнен, DOM построен и основной поток свободен. NitroPack зафиксировал 55% улучшение INP на пререндеренных страницах. Это ощутимая разница, особенно на мобильных устройствах.
CLS: стабильность макета с первого кадра
Все сдвиги макета, которые обычно происходят при загрузке (подгрузка шрифтов, изображений, рекламных блоков), завершаются ещё до того, как пользователь увидит страницу. CLS измеряется от момента активации — а к этому моменту макет уже стабилен. Проблема решается, можно сказать, побочно.
Динамическая вставка правил через JavaScript
Для SPA-подобных сценариев или условного применения правил (например, на основе аналитики или A/B тестов) speculation rules можно вставлять программно:
if (HTMLScriptElement.supports &&
HTMLScriptElement.supports("speculationrules")) {
const rules = {
prerender: [{
source: "list",
urls: ["/popular-product", "/sale"],
eagerness: "immediate"
}]
};
const script = document.createElement("script");
script.type = "speculationrules";
script.textContent = JSON.stringify(rules);
document.body.append(script);
} else {
// Fallback для браузеров без поддержки
const link = document.createElement("link");
link.rel = "prefetch";
link.href = "/popular-product";
document.head.append(link);
}Проверка HTMLScriptElement.supports("speculationrules") — надёжный способ определить поддержку API. Если браузер не поддерживает — подставляем fallback на старый добрый <link rel="prefetch">.
HTTP-заголовок Speculation-Rules
Есть и альтернативный способ доставки правил — через HTTP-заголовок. Это позволяет добавить правила без изменения HTML, что особенно удобно для CDN и edge-воркеров:
Speculation-Rules: "/rules/speculation.json"Файл /rules/speculation.json содержит тот же JSON, что и встроенный <script>. Подход полезен для крупных проектов, где правила спекуляции управляются централизованно и обновляются без редеплоя.
Интеграция с WordPress 6.8+
Хорошая новость для пользователей WordPress: начиная с версии 6.8 в ядре есть нативная поддержка Speculation Rules API. По умолчанию активирован режим prefetch с conservative eagerness — браузер начинает предзагрузку при начале клика (pointerdown).
Хотите более агрессивный пререндеринг? Используйте фильтр:
add_filter('wp_speculation_rules_configuration', function ($config) {
if (is_array($config)) {
$config['mode'] = 'prerender';
$config['eagerness'] = 'moderate';
}
return $config;
});WordPress автоматически исключает из спекуляции: страницы для авторизованных пользователей, /wp-login.php, URL с nonce-токенами, ссылки с rel="nofollow". Для WooCommerce дополнительно исключены /checkout/, /cart/ и URL с параметрами add-to-cart и remove-item.
Если предпочитаете графический интерфейс — установите плагин Speculative Loading. Он даёт UI в разделе «Настройки → Чтение» и по умолчанию ставит prerender с moderate eagerness.
Лимиты Chrome и защитные механизмы
Chrome не даёт спекуляциям сойти с ума — есть разумные ограничения:
- Максимум 10 пререндеренных и 50 предзагруженных страниц одновременно
- Для
eager,moderateиconservativeработает механизм FIFO: при достижении лимита самая старая спекуляция отменяется и освобождает место - Chrome не выполняет спекуляцию при включённом режиме экономии энергии и низком заряде, при нехватке памяти, если отключена настройка «Предзагрузка страниц», и для фоновых вкладок
Нюанс: расширения вроде uBlock Origin могут отключать настройку предзагрузки в Chrome, что полностью блокирует Speculation Rules API. Учитывайте это при оценке реального охвата.
Отладка в Chrome DevTools
Chrome предоставляет полноценные инструменты для отладки спекулятивной загрузки — разбираться не придётся долго:
- Откройте DevTools → вкладка Application
- В разделе Background Services найдите Speculative loads
- Здесь видно активные правила, какие URL были предзагружены или пререндерены, и (что важно) причины, по которым спекуляция не сработала для конкретных ссылок
Также загляните на вкладку Network — предзагруженные ресурсы помечаются соответствующим типом запроса, что помогает быстро оценить картину.
Подводные камни и что стоит учесть
Аналитика и дублирование просмотров
Пререндеренная страница выполняет JavaScript, включая скрипты аналитики. Это может привести к дублированию просмотров — неприятный момент, с которым мы сталкивались на практике. Google Analytics 4 и Google Tag Manager уже умеют учитывать пререндеринг и откладывают отправку данных до активации. Но кастомные решения обязательно проверьте — используйте document.prerendering и событие prerenderingchange:
if (document.prerendering) {
document.addEventListener("prerenderingchange", () => {
// Страница активирована — теперь безопасно отправлять аналитику
sendPageView();
}, { once: true });
} else {
sendPageView();
}Авторизованный контент
Будьте осторожны с пререндерингом страниц, содержащих персонализированные данные. Если пользователь войдёт в аккаунт, а пререндеренная страница показывает состояние до авторизации — получится каша. Исключайте такие страницы через not в правилах или через CSS-класс .no-prerender.
Серверная нагрузка
Каждый пререндер — полноценный запрос к серверу. При immediate eagerness с document rules это может генерировать десятки дополнительных запросов на каждый просмотр страницы. Начинайте с conservative, мониторьте логи и постепенно повышайте агрессивность.
Расход трафика пользователя
Prerender загружает все ресурсы страницы — изображения, CSS, JS. На мобильных с лимитированным трафиком это может быть проблемой. Chrome учитывает ряд условий и может пропустить спекуляцию, но разумная настройка eagerness — в первую очередь ваша ответственность.
Поддержка браузерами в 2026 году
По состоянию на февраль 2026 года ситуация с поддержкой такая:
- Chrome 121+ — полная поддержка prefetch и prerender
- Edge 121+ — полная поддержка (Chromium)
- Opera — полная поддержка (Chromium)
- Firefox — «позитивная позиция» по prefetch, реализация в процессе
- Safari — пока нет поддержки, обсуждение ведётся
Chromium-браузеры охватывают около 70% мирового рынка, так что API уже вполне практичен. В браузерах без поддержки тег <script type="speculationrules"> просто игнорируется — никаких ошибок, никаких побочных эффектов. Классический пример прогрессивного улучшения.
Пошаговый чек-лист внедрения
- Определите ключевые маршруты навигации — используйте аналитику, чтобы найти самые популярные переходы
- Начните с prefetch + conservative — безопасный старт с минимальным расходом ресурсов
- Добавьте prerender + moderate для ТОП-5 страниц по трафику
- Исключите проблемные URL — logout, checkout, формы, авторизованный контент
- Проверьте аналитику — убедитесь, что пререндер не дублирует просмотры
- Мониторьте серверную нагрузку — особенно в первые дни
- Измерьте CWV до и после — CrUX, PageSpeed Insights или RUM
Часто задаваемые вопросы
Работает ли Speculation Rules API с SPA?
Speculation Rules API ориентирован на многостраничные приложения (MPA), где навигация идёт через полную загрузку нового документа. В SPA маршрутизация на клиенте без перезагрузки — API тут не поможет. Но если ваше SPA использует SSR с полными перезагрузками для части маршрутов, эти переходы вполне можно ускорить.
Не приведёт ли пререндеринг к огромному расходу трафика?
При правильной настройке — нет. Режим moderate запускает пререндеринг только при явном наведении курсора (200 мс), а conservative — только при начале клика. Chrome также ограничивает спекуляцию при нехватке памяти или низком заряде батареи. Для экономии используйте prefetch (только HTML) для всех ссылок, а prerender — только для самых вероятных целей.
Как API влияет на серверную нагрузку?
Каждый prefetch — один запрос за HTML. Каждый prerender — полная загрузка со всеми подресурсами. При immediate eagerness с document rules это может означать десятки дополнительных запросов на каждый просмотр. Начинайте с conservative, смотрите логи, постепенно повышайте агрессивность. CDN и кеширование существенно снижают нагрузку на origin.
Можно ли использовать на WordPress без программирования?
Да. WordPress 6.8+ включает нативную поддержку с prefetch и conservative eagerness из коробки. Для тонкой настройки установите плагин Speculative Loading — он даёт графический интерфейс в админке без единой строчки кода.
Как убедиться, что пререндеринг работает?
Откройте Chrome DevTools → Application → Background Services → Speculative loads. Там видны активные правила, список пререндеренных URL и причины отказа для каждой ссылки. В Network-панели предзагруженные ресурсы помечаются соответствующим типом. А библиотека web-vitals (версия 3.1.0+) помечает пререндеренные навигации в свойстве navigationType — удобно для мониторинга в RUM.