Уявіть: ви натискаєте на посилання, і наступна сторінка відкривається миттєво — без затримок, білого екрана чи індикаторів завантаження. Це не магія, а технологія Speculative Loading (спекулятивне завантаження), яка починаючи з релізу WordPress 6.8 працює за замовчуванням на мільйонах сайтів.
Спекулятивне завантаження дозволяє веб-браузеру заздалегідь підвантажувати або навіть повністю рендерити (відмальовувати) сторінку, яку відвідувач з високою ймовірністю відкриє наступною. Якщо користувач переходить за посиланням — сторінка вже готова.
У цій статті розберемо, як працює Speculation Rules API, що додано в ядро WordPress, як використовувати офіційний плагін для тонкого налаштування та які нюанси (зокрема в аналітиці) варто врахувати.
Що таке Speculative Loading і як це працює?
Speculative Loading — це техніка оптимізації продуктивності, за якої браузер завантажує вміст сторінки ще до того, як користувач явно натисне на посилання. Технологія базується на Speculation Rules API — сучасному стандарту браузерів, який передає інструкції в форматі JSON.
API пропонує два режими роботи:
- Prefetch (Попереднє завантаження): Браузер завантажує лише HTML-код наступної сторінки у фоновому режимі. Під час кліку час на мережевий запит економиться.
- Prerender (Попередній рендеринг): Браузер повністю завантажує та рендерить сторінку в прихованій фоновій вкладці — зі стилями, зображеннями та JavaScript. Під час переходу сторінка просто «проявляється» миттєво.
На відміну від застарілих тегів <link rel="prefetch"> на Javascript, новий підхід виконується на рівні самого браузера, який самостійно регулює навантаження.
Вплив на Core Web Vitals і швидкість
Попередній рендеринг напряму покращує метрику LCP (Largest Contentful Paint), оскільки найважчий контент відмальовується ще до моменту переходу. Зсуви макета (CLS) та виконання скриптів також відбуваються завчасно.
Важливо: Спекулятивне завантаження не робить ваш сервер швидшим або кодову базу легшою. Воно лише переносить виконання запиту на той час, коли браузер простоює. Якщо відвідувач так і не натисне на посилання, використані ресурси сервера та трафік будуть витрачені даремно. Але в будь-якому випадку, ця технологія найкраще працюватиме з спеціалізованим хостингом для WordPress
За даними команди розробників WordPress, впровадження цієї технології в середньому покращило показники LCP на 1.9% серед понад 50 000 сайтів, а понад 8% переходів між сторінками у Chrome вже використовують правила спекуляції.
Підтримка браузерами
Speculation Rules API є розробкою Chromium, тому технологія працює у:
- Google Chrome (v121+)
- Microsoft Edge
- Opera
Браузери Safari та Firefox поки що не підтримують цей стандарт, тому їхні користувачі отримують звичайний режим завантаження сторінок.
Браузер автоматично вимикає спекулятивне завантаження, якщо у користувача:
- Увімкнено режим економії трафіку (Save-Data) або економії заряду акумулятора.
- Вимкнено налаштування «Preload pages» у браузері або розширеннях (наприклад, uBlock Origin).
- Сторінка відкрита у фоновій вкладці.
Що змінює WordPress 6.8 за замовчуванням?
У WordPress 6.8 функціонал включено до ядра. Основні параметри за замовчуванням:
- Режим:
prefetch(завантажується тільки HTML, без повного рендерингу). - Інтенсивність (Eagerness):
conservative(запит відправляється в момент, коли користувач затискає клавішу миші або торкається екрана). - Аудиторія: Тільки авторизовані відвідувачі (для залогінених користувачів та адмін-панелі вимкнено).
- Вимоги: Обов’язкове використання «красивих» постійних посилань (Pretty Permalinks).
Також ядро автоматично виключає з правил посилання /wp-admin/, сторінки авторизації, URL із захисними токенами _wpnonce та посилання з атрибутом rel="nofollow".
Як налаштувати Speculative Loading у WordPress
Крок 1. Перевірка роботи
Відкрийте сайт у режимі інкогніто (Chrome), перегляньте початковий код сторінки та знайдіть блок speculationrules. Якщо там присутній JSON із параметрами prefetch та conservative, функція вже працює.
Також стан запитів можна відстежувати у DevTools: Application → Speculative loads.
Крок 2. Встановлення офіційного плагіна
Для активації повного рендерингу (prerender) та гнучкого налаштування встановіть плагін Speculative Loading від WordPress Performance Team.
Крок 3. Вибір режиму та інтенсивності
Перейдіть у Налаштування → Читання (Settings → Reading) та знайдіть блок Speculative Loading:
| Інтенсивність (Eagerness) | Коли спрацьовує | Для яких сайтів підходить |
| Conservative | При затисканні кнопки миші чи дотику | Навантажені сервери, важкі сторінки |
| Moderate (За замовчуванням у плагіні) | При наведенні курсора на посилання (~200 мс) | Більшість сайтів (оптимальний баланс) |
| Eager | Майже миттєво при наведенні (~10 мс) | Легкі сайти, статичні сторінки |
Крок 4. Виключення важливих URL
Щоб уникнути помилкових запитів, ви можете виключати окремі сторінки:
- Додайте CSS-клас
no-prerenderабоno-prefetchдо блоків чи посилань у редакторі Gutenberg. - Використовуйте PHP-фільтр
wp_speculation_rules_href_exclude_pathsдля блокування шляхів на кшталт/cart/*або/checkout/*.
Що може зламатися і на що звернути увагу?
- Веб-аналітика: При використанні
prerenderсторінка виконує JavaScript до того, як користувач реально перейшов на неї. Сучасний Google Analytics (GA4) автоматично обробляє такі події та чекає реальної активації сторінки. Проте кастомні скрипти аналітики можуть зараховувати помилкові перегляди. - Персоналізований контент: Якщо сторінка залежить від динамічного стану (наприклад, кошика покупок), заздалегідь згенерований прев’ю-кадр може застаріти до моменту кліку.
- Навантаження на сервер: Режим
prerenderзбільшує кількість запитів до PHP та бази даних. Слідкуйте за ресурсами хостингу при високому трафіку.
Підсумок
Спекулятивне завантаження — це безкоштовний та ефективний спосіб зробити ваш сайт на WordPress візуально миттєвим. За замовчуванням ядро WordPress надає безпечний режим prefetch, а додатковий плагін від Performance Team дозволяє витиснути максимум завдяки повноцінному prerender.
