Уявіть: користувач клацає по посиланню на картку товару, а завантаження триває 3 секунди. Втрачаєте конверсії — кожна секунда затримки знижує конверсію на 7% (дані Google Google Research). Особливо критично на мобільних, де швидкість з'єднання нижча. Ми не раз стикалися з такою проблемою. Рішення — Speculation Rules API. Цей браузерний механізм дозволяє попередньо завантажувати або навіть повністю рендерити наступну сторінку ще до кліку. Результат — досягається миттєва навігація сайту на підтримуваних браузерах (Chrome 109+ реалізує prerender Chrome, Edge 109+). Впровадження займає 1-2 дні і дає відчутний приріст метрик: LCP скорочується в 5-10 разів (що в 5-10 разів краще ніж без оптимізації), INP падає до нуля, конверсія зростає на 10-15%. Вартість впровадження починається від 5000 грн, а економія може скласти до 100 000 грн на рік за рахунок приросту конверсії.
Як 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 мс | Навігаційні посилання, LCP оптимізація переходів |
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 секунд (Gomez, 2019). Prerender на сторінках каталогу та кошика дає виграш у швидкості переходу до 90% — користувач не встигає задуматися, а вже бачить товар. Це безпосередньо впливає на конверсію та виручку. Використання браузерних API продуктивності, таких як Speculation Rules, є must-have. Ми впровадили Speculation Rules для 20+ проектів, і в кожному випадку приріст конверсії склав не менше 8%. Наприклад, для одного клієнта середня економія склала близько 25 000 грн на місяць за рахунок зростання конверсії на 12%.
Як ми впроваджуємо Speculation Rules: етапи роботи
- Аудит поточної навігації — визначаємо сторінки з найбільшим падінням конверсії (зазвичай це картки товарів та кошик).
- Проектування правил — обираємо комбінацію
href_matchesта eagerness під кожен розділ. - Реалізація Speculation Rules — додаємо
<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 день і запропонуємо оптимальну стратегію впровадження. Зв'яжіться з нами, щоб обговорити деталі.
Чи знаєте ви?
Prerender через Speculation Rules краще за звичайний prefetch у 50 разів — затримка падає з 500 мс до 10 мс. Крім того, використання браузерних API продуктивності, таких як Speculation Rules, дозволяє досягти прискорення Core Web Vitals без значних витрат.