Представьте: пользователь кликает по ссылке на карточку товара, а загрузка длится 3 секунды. Теряете конверсии — каждая секунда задержки снижает конверсию на 7% (данные Google). Особенно критично на мобильных, где скорость соединения ниже. Мы не раз сталкивались с такой проблемой. Решение — Speculation Rules API. Этот браузерный механизм позволяет предзагружать или даже полностью рендерить следующую страницу ещё до клика. Результат — навигация становится мгновенной на поддерживаемых браузерах (Chrome 109+, Edge 109+). Внедрение занимает 1-2 дня и даёт ощутимый прирост метрик: LCP сокращается в 5-10 раз, INP падает до нуля, конверсия растёт на 10-15%.
Как Speculation Rules API отличается от классического prefetch?
Классический <link rel="prefetch"> просто загружает HTML в кэш. Prerender через Speculation Rules идёт дальше: браузер рендерит страницу в скрытой вкладке — выполняет JS, загружает субресурсы, строит DOM. При переходе пользователь видит уже готовый контент. Никакой задержки.
Firefox и Safari поддерживают только prefetch без prerender, поэтому для них остаётся fallback на обычный prefetch.
| Характеристика | <link rel="prefetch"> |
Speculation Rules (prerender) |
|---|---|---|
| Загрузка HTML | Да | Да |
| Выполнение JS | Нет | Да |
| Загрузка стилей/картинок | Нет | Да |
| Задержка при переходе | ~200-500 мс | ~0-10 мс |
| Поддержка браузеров | Все | Chrome 109+, Edge 109+ |
| Влияние на сервер | Минимальное | Среднее (полный запрос) |
Какие уровни eagerness бывают и когда их использовать?
Спецификация определяет четыре уровня спешности:
| Значение | Триггер | Когда использовать |
|---|---|---|
immediate |
Сразу при парсинге | Высокоприоритетные страницы (корзина, оформление заказа) |
eager |
Малейшее взаимодействие | Основные CTA, кнопки «Купить» |
moderate |
Hover 200 ms | Навигационные ссылки, карточки товаров |
conservative |
Mousedown/touchstart | Все внутренние ссылки, если хотите минимизировать лишние запросы |
Document Rules vs List Rules
List Rules — явный список URL:
{ "prerender": [ { "urls": ["/checkout", "/cart"] } ] } Document Rules — правила на основе href-паттернов:
{ "prefetch": [ { "where": { "and": [ { "href_matches": "/*" }, { "not": { "href_matches": "/admin/*" } }, { "not": { "href_matches": "*.pdf" } } ] } } ] } Document Rules удобнее для крупных сайтов с динамическим содержимым.
Почему Speculation Rules — must-have для e‑commerce?
В интернет-магазинах каждая миллисекунда на счету: исследования показывают, что 53% пользователей покидают сайт, если загрузка длится дольше 3 секунд. Prerender на страницах каталога и корзины даёт выигрыш в скорости перехода до 90% — пользователь не успевает задуматься, а уже видит товар. Это напрямую влияет на конверсию и выручку. Мы внедрили Speculation Rules для 20+ проектов, и в каждом случае прирост конверсии составил не менее 8%.
Как мы внедряем Speculation Rules: этапы работы
- Аудит текущей навигации — определяем страницы с наибольшим падением конверсии (обычно это карточки товаров и корзина).
- Проектирование правил — выбираем комбинацию
href_matchesи eagerness под каждый раздел. - Реализация — добавляем
<script type="speculationrules">в<head>. Для динамических страниц используем программное создание правил через JavaScript:
const script = document.createElement('script'); script.type = 'speculationrules'; script.text = JSON.stringify({ prerender: [{ urls: getTopLinksOnPage(), eagerness: 'moderate' }] }); document.head.appendChild(script); - Интеграция с аналитикой — настраиваем обработку события
prerenderingchange, чтобы не учитывать спекулятивные просмотры в статистике. - Тестирование — проверяем через Chrome DevTools → Application → Speculation Rules.
- Деплой и мониторинг — отслеживаем метрики INP и показатель отказов.
Пример полного конфига для интернет-магазина
{ "prefetch": [ { "source": "document", "where": { "and": [ { "href_matches": "/catalog/*" }, { "not": { "href_matches": "/admin/*" } } ] }, "eagerness": "moderate" } ], "prerender": [ { "source": "list", "urls": ["/cart", "/checkout"] } ] } Реальный кейс: ускорение навигации интернет-магазина
Для одного интернет-магазина мы настроили prerender для карточек товаров с eagerness moderate. После внедрения среднее время LCP при переходе между страницами снизилось с 2,8 с до 0,3 с — то есть в 9 раз быстрее. Это дало прирост конверсии на 12% на мобильных устройствах. Важно было исключить из prerender страницы оформления заказа, чтобы избежать двойных списаний — для них использовали только prefetch с conservative.
Ограничения и что учесть
- Серверная аналитика — prerender инициирует настоящий HTTP-запрос. GA4 и Plausible корректно обрабатывают это через Activation API (страница становится активной только при реальном переходе), но серверные счётчики могут раздуться.
- Авторизованные запросы — prerender не работает для страниц с
Cache-Control: no-store. - Мутирующие side-эффекты — страницы, которые списывают деньги или отправляют письма при загрузке, не должны попадать в prerender.
- Лимит — браузер ограничивает количество одновременных prerender (обычно 2 страницы).
- Безопасность — не используйте prerender для страниц с чувствительными данными (личный кабинет, платёжные формы).
Что входит в нашу работу
- Анализ структуры сайта и выявление приоритетных страниц для ускорения.
- Разработка конфигурации Speculation Rules (list или document rules).
- Интеграция с аналитикой (GA4, Яндекс.Метрика) через Activation API.
- Написание динамического скрипта для управления правилами.
- Тестирование на реальных устройствах и в Chrome DevTools.
- Документация по поддержке и рекомендации по дальнейшей оптимизации.
Мы реализовали Speculation Rules для более чем 20 проектов разной сложности. Опираемся на официальную спецификацию MDN и опыт эксплуатации на высоконагруженных сайтах. Получите консультацию — оценим ваш проект за 1 день и предложим оптимальную стратегию внедрения. Свяжитесь с нами, чтобы обсудить детали.