Возможности

Оптимизировано для РФ

Поддержка российских браузеров, CMS и платформ из коробки

Speculation Rules API

Используем современный API для Chromium 109+. Prerender загружает страницу полностью в фоне — переход мгновенный.

Поддержка iOS

WebKit не поддерживает prefetch? Не проблема. Автоматический fallback на fetch с force-cache для всех браузеров iOS.

Совместимость с аналитикой

Не ломает Яндекс.Метрику, Google Analytics и Matomo. Prefetch — фоновая загрузка, не влияет на события кликов.

Умная экономия трафика

Автоматически отключается при медленном соединении (2G, 3G) и режиме экономии трафика. Лимиты для мобильных устройств.

Гибкая настройка

Data-атрибуты для конфигурации: задержка hover, режим viewport, белые списки, DOM observer для SPA.

Безопасность

Не загружает внешние ссылки по умолчанию. Исключает служебные URL, формы авторизации и файлы.

Метрики

Скорость и пользовательский опыт

Мгновенные переходы улучшают ключевые показатели качества сайта

СКОРОСТЬ

Время загрузки контента

Prerender загружает и рендерит страницу в фоне до клика. При переходе — контент отображается мгновенно, время загрузки стремится к нулю.

↓ до 90% быстрее

ОТКЛИК

Отзывчивость интерфейса

Предзагруженные страницы реагируют на взаимодействия без задержки — JavaScript уже выполнен, DOM готов к интерактивности.

↓ мгновенный отклик

СТАБИЛЬНОСТЬ

Визуальная стабильность

Полностью отрендеренная страница отображается стабильно — без прыжков контента при загрузке изображений и шрифтов.

↓ 0 сдвигов

Поведенческие факторы

Типичные результаты оптимизации скорости загрузки

−35% Показатель отказов

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

+40% Глубина просмотра

Мгновенные переходы снижают «трение» навигации — пользователи просматривают больше страниц за визит

+25% Время на сайте

Быстрый сайт воспринимается как качественный — посетители задерживаются дольше и возвращаются чаще

+15% Конверсия

Каждые 100мс задержки снижают конверсию. Мгновенная загрузка убирает этот барьер полностью

*Данные основаны на исследованиях Google, Amazon, Walmart по влиянию скорости загрузки на метрики сайтов

Пользователи не ждут

53% мобильных пользователей покидают сайт, если он загружается дольше 3 секунд. С предзагрузкой страницы открываются быстрее, чем пользователь успевает это заметить — создаётся ощущение нативного приложения.

Установка

Одна строка кода

Без сборщиков, без зависимостей, без настройки

CDN Yandex Cloud (для небольших проектов)

Россия

<!-- На body для максимальной скорости -->
<body data-prefetch-specrules
data-prefetch-specrules-fallback>
<!-- Перед </body> -->
<script src="//cdn.prefetch.ru/v1.1.2/prefetch.min.js"
integrity="sha384-BDLxwRTwyIWnAEmc+2Rkw41jVvctV3HxxTu1ryrmagtHh18GekSP+bfqy5/YswEW"
crossorigin="anonymous"
type="module"
defer></script>

CDN jsDelivr (глобальная CDN)

Мир

<!-- На body для максимальной скорости -->
<body data-prefetch-specrules
data-prefetch-specrules-fallback>
<!-- Перед </body> -->
<script src="//cdn.jsdelivr.net/npm/@prefetchru/prefetch@1.1.2/dist/prefetch.min.js"
integrity="sha384-BDLxwRTwyIWnAEmc+2Rkw41jVvctV3HxxTu1ryrmagtHh18GekSP+bfqy5/YswEW"
crossorigin="anonymous"
type="module"
defer></script>

npm (для проектов с большой посещаемостью)

package

npm install @prefetchru/prefetch

import '@prefetchru/prefetch'

В пакете доступна ESM версия для бандлеров (Vite, Webpack, Rollup) с поддержкой SSR

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

API

Настройка и управление

Data-атрибуты для конфигурации и JavaScript API для программного контроля

Глобальные атрибуты <body>

data-prefetch-intensity

Режим срабатывания предзагрузки

65задержка hover в мс (по умолчанию)

mousedownпо нажатию кнопки мыши

viewportпри появлении в видимой области (mobile)

viewport-allviewport для всех устройств

data-prefetch-specrules

Включить Speculation Rules API (Chromium 109+). Требует явного указания атрибута

(пусто)prefetch — предзагрузка HTML

prerenderполный рендер страницы в фоне

noявно отключить Speculation Rules

data-prefetch-specrules-fallback

Включить fallback при Speculation Rules. По умолчанию отключён для избежания двойного трафика

data-prefetch-whitelist

Режим белого списка — загружать только ссылки с атрибутом data-prefetch

data-prefetch-allow-query-string

Разрешить ссылки с параметрами (?id=1, ?page=2)

data-prefetch-allow-external-links

Разрешить внешние ссылки (другие домены)

data-prefetch-observe-dom

Отслеживать новые ссылки в DOM (для SPA)

data-prefetch-nonce

Nonce для CSP. Используется для вставки speculationrules на сайтах со строгим CSP

data-prefetch-prerender-all

Разрешить prerender для всех ссылок (не рекомендуется — может влиять на аналитику)

Атрибуты ссылок <a>

data-prefetch

Включить предзагрузку для ссылки. Используется в режиме whitelist или для включения внешних ссылок/query string.

data-no-prefetch

Исключить ссылку из предзагрузки. Полезно для ссылок корзины, авторизации и т.д.

data-prefetch-prerender

Точечный prerender для ссылки. Работает при data-prefetch-specrules="prerender" на body.

JavaScript API

script.js

// Объект window.PrefetchRu (или Prefetch) доступен после загрузки
// Версия библиотеки
console.log(PrefetchRu.version) // "1.1.2"
// Программная предзагрузка URL (проходит те же проверки)
PrefetchRu.preload('/catalog/product-123')
// Обновить состояние при навигации в SPA
PrefetchRu.refresh()
// Отключить библиотеку
PrefetchRu.destroy()

Примеры использования

Базовое использование

<!-- На body для максимальной скорости -->
<body data-prefetch-specrules
data-prefetch-specrules-fallback>
<!-- Перед </body> -->
<script src="//cdn.prefetch.ru/v1.1.2/prefetch.min.js"
integrity="sha384-BDLxwRTwyIWnAEmc+2Rkw41jVvctV3HxxTu1ryrmagtHh18GekSP+bfqy5/YswEW"
crossorigin="anonymous"
type="module"
defer></script>

Prerender для максимальной скорости

<body data-prefetch-specrules="prerender"
data-prefetch-specrules-fallback>
<!-- Страницы полностью отрисовываются в фоне -->
</body>

Только выбранные ссылки

<body data-prefetch-whitelist>
<a href="/catalog" data-prefetch>Каталог</a>
<a href="/cart">Корзина</a> <!-- не загружается -->
</body>

Исключение ссылок

<a href="/logout" data-no-prefetch>Выйти</a>
<a href="/order/delete/123" data-prefetch-no>Удалить заказ</a>
<!-- /cart, /add, /delete автоисключены -->

CSP с nonce

<body data-prefetch-specrules
data-prefetch-specrules-fallback
data-prefetch-nonce="abc123">
<!-- или nonce на скрипте -->
<script src="//cdn.prefetch.ru/v1.1.2/prefetch.min.js"
integrity="sha384-BDLxwRTwyIWnAEmc+2Rkw41jVvctV3HxxTu1ryrmagtHh18GekSP+bfqy5/YswEW"
crossorigin="anonymous"
nonce="abc123"
type="module"
defer></script>
</body>

Точечный prerender

<body data-prefetch-specrules="prerender"
data-prefetch-specrules-fallback>
<a href="/pricing" data-prefetch-prerender>Тарифы</a>
<a href="/blog">Блог</a> <!-- prefetch -->
</body>

Честный разговор

Почему браузеры так не делают?

Это не баг и не упущение — это сознательный выбор безопасности

GET ≠ безопасно

Многие сайты вешают на GET-ссылки действия: «Удалить», «Добавить в корзину», «Отправить». Браузер предзагрузит — и случайно выполнит действие до клика.

Наше решение: Автоисключение /cart, /basket, /add, /delete, /remove, /login, /logout, /auth. Плюс data-no-prefetch для точечного контроля

Лимиты памяти

Prerender держит в памяти целую страницу: 5-50 МБ каждая. Chrome ограничивает: 10 prerender на мобильных, 2 на десктопе. Иначе — тормоза и разряд батареи.

Наше решение: Prefetch по умолчанию — только HTML. Prerender через data-prefetch-specrules="prerender" opt-in

Конкуренция за канал

Prefetch помечен как «lowest priority», но на практике конкурирует с основным контентом. На медленных сетях это замедляет загрузку текущей страницы.

Наше решение: Автоотключение на 2G/3G и режиме экономии трафика. Лимиты для мобильных устройств

Побочные эффекты JS

Prerender выполняет весь JavaScript целевой страницы. Старая аналитика засчитает просмотр, API получит запрос, видео запустится — до реального перехода.

Наше решение: Prefetch по умолчанию — скрипты НЕ выполняются. Prerender только по opt-in

Firefox и Safari против

Speculation Rules — API только для Chromium. Firefox и Safari сознательно отклонили эту функцию как преждевременную. 30%+ трафика без поддержки.

Наше решение: Работаем везде: fallback на fetch с force-cache для Safari/iOS, rel=prefetch для Firefox

Состояние сессии

Между prefetch и переходом может измениться CSRF-токен, session-ID или cookies. Кэш станет неактуальным — странное поведение на сайте.

Наше решение: /login, /logout, /auth, /register, /cart исключены. Для остального — data-no-prefetch

Почему нам можно

Браузеры консервативны, потому что работают со всеми сайтами в интернете. Мы добавили умные исключения по умолчанию и дали вам data-атрибуты для точной настройки под ваш сайт.

Честные минусы

Цена мгновенности

Небольшой трафик «впустую» — это плата за мгновенную загрузку для тех, кто реально перешёл

+10-20% трафика

Часть prefetch-запросов не приведёт к переходу — пользователь передумал или навёл случайно. Это нормально.

+5-15% нагрузки на сервер

Дополнительные запросы к серверу. На большинстве сайтов незаметно, но на highload стоит мониторить.

Проверка ссылок

Основные исключения встроены. Проверьте свои GET-ссылки — если есть действия, добавьте data-no-prefetch

Медленные сети

На 2G/3G prefetch может конкурировать с основным контентом. Мы отключаемся автоматически, но edge-cases возможны.

ROI

Всегда в плюс

10-20% «лишнего» трафика против −35% отказов и +40% глубины просмотра. Мгновенная навигация конвертирует лучше, чем экономия на prefetch-запросах.

Приватность

Полная безопасность

Скрипт работает локально в браузере пользователя и не передаёт никакие данные

Без cookies

Скрипт не устанавливает и не читает cookies. Никаких баннеров о согласии не требуется.

Без аналитики

Не собираем статистику, не трекаем пользователей, не передаём данные третьим сторонам.

Серверы в России

CDN на базе Yandex Cloud. Все ресурсы размещены на территории Российской Федерации.

Открытый код

MIT лицензия. Весь исходный код доступен на GitHub — проверяйте, форкайте, улучшайте.

Локальная работа

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

Соответствие 152-ФЗ

Не обрабатывает персональные данные. Не требует согласия пользователей и политики конфиденциальности.

Мы загружаем только статический JavaScript-файл. Скрипт не делает никаких запросов к внешним серверам, не собирает fingerprints, не использует localStorage/sessionStorage для отслеживания. Ваши пользователи остаются анонимными.

Защита от подмены (SRI)

integrity SRI Hash

Браузер проверяет хэш-сумму файла. Если хостинг взломают и подменят код — скрипт просто не загрузится

crossorigin anonymous

Запрос без cookies и credentials. Наш сервер не получает никаких данных о пользователе — полная анонимность

type module

ES-модуль в строгом режиме. Изолированная область видимости, не загрязняет глобальный window

defer async load

Загрузка не блокирует рендер страницы. Скрипт выполнится после парсинга DOM

Максимальный уровень паранойи

Не доверяете внешним CDN? Это нормально. Клонируйте репозиторий, проверьте код, соберите локально командой npm run build и хостите на своём сервере. Полный контроль — это ваше право.

Мгновенная загрузка страниц