Застосовуйте сучасні можливості браузерів, такі як попереднє завантаження, вибірка, та підключення, щоб прискорити роботу вашого веб-сайту на WordPress.
Хто з власників веб-ресурсів не прагне максимально прискорити завантаження своїх веб-сторінок?
Забезпечення швидкого завантаження сайту для користувачів з усього світу – це завдання, яке потребує комплексного підходу. Існує кілька способів оптимізувати швидкість завантаження ресурсів вашого сайту, зокрема використовуючи так звані “підказки” браузера, або методи попереднього перегляду.
Важливо зазначити, що ці методи не дають значного ефекту при першому відвідуванні веб-сайту, але значно прискорюють наступні запити.
Попереднє завантаження
Використовуйте тег попереднього завантаження, щоб дати вказівку браузеру завантажити певні статичні ресурси заздалегідь. Це можуть бути зображення, шрифти, JavaScript, CSS, скрипти, відео та інше. Це дозволяє визначити пріоритетність завантаження ресурсів, тим самим покращуючи продуктивність сайту.
Попереднє завантаження особливо корисне, якщо передбачається, що користувачі будуть переходити між кількома сторінками, наприклад, у випадку інтернет-магазину, де відвідувач може переглядати товари, їхні характеристики, порівнювати їх, додавати до кошика та здійснювати покупку.
Для налаштування цієї функції можна скористатися спеціальними плагінами, наприклад:
Better Resource Hints – безкоштовний плагін для налаштування попереднього завантаження CSS та JS файлів.
WP Rocket – преміум плагін, який пропонує широкий спектр інструментів для оптимізації продуктивності сайту, включаючи попереднє завантаження, кешування та створення карти сайту.
Як перевірити, чи активоване попереднє завантаження?
Найшвидший спосіб – це переглянути вихідний код сторінки. Ви повинні побачити рядки, подібні до цих:
<link rel="preload" as="style" href="https://wilku.top/implementing-preload-prefetch-preconnect-in-wordpress/IMPORTANT.css"> <link rel="preload" as="script" href="CRITICAL.js">
Не всі браузери підтримують попереднє завантаження. Перед впровадженням цієї функції, перегляньте матрицю сумісності.
Попереднє підключення
Ви завантажуєте ресурси з інших доменів, наприклад, CDN?
Якщо всі ресурси завантажуються з вашого єдиного домену, то цей метод не буде корисним.
Попереднє підключення дає браузеру вказівку встановити з’єднання з іншими доменами у фоновому режимі. Це заощаджує час на пошук DNS, перенаправлення, TCP рукостискання, TLS узгодження та інше. Завдання цього методу – зменшити затримку при завантаженні ресурсів з інших доменів.
Для налаштування попереднього підключення можна скористатися вищезгаданим плагіном Better Resource Hints або преміум-плагіном perfmatters.
Після налаштування необхідних ресурсів, ви повинні побачити їх у вихідному коді сторінки, наприклад:
<link rel="preconnect" href="https://ANOTHERSITE.com">
Якщо ви завантажуєте ресурси з домену, який потребує CORS, то необхідно додати атрибут crossorigin. Зразок:
<link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>
Попереднє підключення підтримується більшістю сучасних браузерів, таких як Chrome, Edge, Firefox, Safari.
Попередня вибірка
Попередньо завантажте сторінку, яку користувач, ймовірно, відвідає наступною. Метод Prefetch завантажує необхідні ресурси і зберігає їх у локальному кеші, що забезпечує їх швидке відображення при потребі. Існують два види попередньої вибірки:
DNS Prefetch – описано нижче.
Link Prefetch – налаштовується за допомогою тегу <link url …>. Використовується для попереднього завантаження HTML або статичних ресурсів. Ви можете попередньо завантажити ресурси, використовуючи `as` атрибут.
<link rel=”prefetch” href=”https://somesite.com/articles/page/2/” as=”document”>
Атрибут `as` підтримує різні типи ресурсів, такі як аудіо, відео, скрипти, треки, стилі, шрифти, об’єкти, документи та інші. Попередню вибірку посилань можна налаштувати за допомогою плагіна Pre Party Resource Hints.
DNS Prefetch
Ви завантажуєте ресурси з різних доменів і хочете вирішити їх у фоновому режимі?
Цей простий метод допомагає заздалегідь розпізнати потенційні домени, щоб ресурси завантажувалися швидше. Це зменшує загальну затримку.
Якщо ви завантажуєте ресурси з 3 доменів і кожному домену потрібно приблизно 100 мс для пошуку DNS, ви заощадите 300 мс затримки.
Ви можете реалізувати це за допомогою плагіна perfmatters або додати наступний код у файл functions.php вашої теми, якщо ви вмієте редагувати файли теми:
function dns_prefetch() {
echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://YOUROTHERDOMAIN.com" />
<link rel="dns-prefetch" href="https://ANDANOTHERONE.com" />
<link rel="dns-prefetch" href="https://AND.SOMEMORE.com" />
}
add_action('wp_head', 'dns_prefetch', 0);
Детальнішу інформацію можна знайти в документації Mozilla.
Попередня візуалізація
Чи очікуєте ви, що користувачі вашого сайту перейдуть на певну сторінку?
Попередня візуалізація допомагає завантажити ресурси цих сторінок у фоновому режимі. Коли користувач натисне на посилання, сторінка відкриється дуже швидко. Цього можна досягти за допомогою плагіна Pre Party Resource Hints.
Попереднє відображення підходить для невеликих сторінок або ресурсів, але не використовуйте його для всього сайту або великих ресурсів, оскільки це може збільшити використання ЦП, пропускну здатність та сповільнити сайт. Тестуйте цей метод на невеликих ресурсах і переконайтеся, що він не викликає негативних наслідків.
Як бачите, існує чотири основні плагіни для реалізації підказок браузера в WordPress. Виберіть той, який вам найкраще підходить.
Плагін Pre Party Resource Hints – безкоштовний плагін, який пропонує попередню вибірку DNS, попередню вибірку посилань, попередню візуалізацію, попереднє підключення та попереднє завантаження.
Better Resource Hints – альтернатива вищезгаданому плагіну.
Безкоштовні плагіни є корисними, якщо вони постійно оновлюються та підтримуються. На жаль, це відбувається не з усіма плагінами, тому інколи варто розглянути платну версію. Комерційні версії плагінів підтримуються професійно та оновлюються відповідно до стандартів WordPress, з регулярними виправленнями безпеки. Якщо ви готові інвестувати кошти в оптимізацію продуктивності свого сайту, то ви можете розглянути наступні варіанти:
WP Rocket – відомий та надійний плагін, якому довіряють понад 800 000 веб-сайтів. Вартість – 49 доларів за один сайт.
Perfmatters – легкий та зручний плагін. Вартість – 24,95 доларів за один сайт. На момент написання статті він пропонує наступні можливості:
Це суттєва оптимізація.
Висновок
Ядро WordPress є легким, але його розмір збільшується в залежності від теми та плагінів, які ви використовуєте. Оптимізація продуктивності вашого сайту важлива для кращого ранжування в пошукових системах та збільшення конверсії. Згадані вище методи є легкими для впровадження, але не варто зупинятися на досягнутому.
Також, розгляньте можливість використання CDN для кешування та швидшої доставки контенту користувачам з усього світу. Існує багато таких сервісів, але ми рекомендуємо SUCURI, який пропонує CDN та безпеку.