Скористайтеся перевагами сучасних функцій браузера, таких як попереднє завантаження, попередня вибірка, попереднє підключення, щоб зробити веб-сайт WordPress швидшим.
Як власник сайту, хто не любить робити все можливе, щоб швидше завантажувати веб-сторінку?
Забезпечити швидше завантаження сайту в усьому світі є складною справою. Ви можете зробити кілька речей, щоб швидко завантажити ресурси сайту, зокрема ввімкнути наступні підказки браузера. Вони також відомі як методи попереднього перегляду.
Примітка: методи підказок браузера не дуже допомагають, коли ви відкриваєте веб-сайт вперше, але наступні запити виконуються швидше.
Попереднє навантаження
Ви можете використовувати тег попереднього завантаження, щоб наказати браузеру отримати деякі статичні ресурси раніше. Це можуть бути зображення, шрифт, JavaScript, CSS, скрипти, відео тощо. Це допомагає визначити пріоритети завантаження ресурсу; отже, продуктивність покращується.
Попереднє завантаження було б гарною ідеєю застосувати, якщо ви очікуєте, що ваші користувачі відвідуватимуть кілька сторінок згодом. Як магазин електронної комерції, де користувач відвідує сторінку продукту, а потім перевіряє інформацію, порівнює з іншим продуктом, додає в кошик, оплачує тощо.
Ви можете використовувати такі плагіни, щоб налаштувати функцію попереднього завантаження.
Кращі підказки ресурсів – безкоштовний плагін для налаштування файлів 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 тощо. Ідея полягає в тому, щоб зменшити затримку, щоб забезпечити швидке завантаження ресурсів з іншого домену.
Знову ж таки, ви можете використовувати згаданий вище плагін кращих підказок щодо ресурсів або преміум-плагін лайк perfmatters.
Після налаштування необхідних ресурсів ви повинні побачити їх у джерелі сторінки, як показано нижче.
<link rel="preconnect" href="https://ANOTHERSITE.com">
Примітка: якщо ви завантажуєте ресурси з домену, для якого потрібен CORS, вам потрібно вказати, що перехресне походження та вихід мають виглядати так.
<link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>
Preconnect сумісний з останньою версією Chrome, Edge, Firefox, Safari.
Попередня вибірка
Дозвольте браузеру вибрати наступну сторінку, яка, на вашу думку, знадобиться користувачеві під час навігації. Prefetch завантажить необхідні ресурси та збереже їх у локальному кеші та швидко обслуговуватиме їх у разі потреби. Існує два типи попередньої вибірки.
Попередня вибірка DNS – пояснюється нижче
Попередня вибірка посилання – налаштовується за допомогою . Використовується для попередньої вибірки HTML або статичних ресурсів. Ви можете попередньо отримати ресурси, використовуючи як атрибут.
як атрибут підтримує різні ресурси, такі як аудіо, відео, сценарій, доріжка, стиль, шрифт, об’єкт, документ тощо. Попередню вибірку посилань можна налаштувати за допомогою Плагін Pre Party Resource Hints.
DNS Prefetch
Завантажуєте ресурси з багатьох доменів і хочете вирішити їх у фоновому режимі?
Це швидке налаштування може допомогти розпізнати всі потенційні домени раніше, тому, коли запитуються ресурси, він завантажується швидше. Це допомагає зменшити загальну затримку.
Припустімо, ви завантажуєте ресурси з 3 доменів, і кожному домену потрібно приблизно 100 мс для пошуку DNS, тоді ви заощадите 300 мс затримки.
Хіба не круто?
Ви можете реалізувати за допомогою плагіна perfmatters або додати наступне у файл functions.php вашої теми, якщо вам зручно редагувати файли теми.
//* DNS Prefetching
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, попередню вибірку посилань, попередню візуалізацію, попереднє підключення та попереднє завантаження.
Кращі підказки ресурсів – альтернатива вищезазначеному.
Безкоштовний плагін хороший, якщо він обслуговується та підтримується. На жаль, це трапляється не з багатьма плагінами, тому іноді краще вибрати платну версію. Комерційні версії плагінів підтримуються професійно й оновлено завдяки стандартам WordPress і виправленням безпеки. Якщо ви готові витратити кілька доларів на оптимізацію продуктивності свого сайту, ви можете ознайомитися з наведеними нижче.
WP Rocket – добре репутований, якому довіряють понад 800 000 сайтів. Це коштувало 49 доларів за один сайт.
Perfmatters – легкий і легкий для стеження коштує $24,95 за один сайт. Поки я пишу, він пропонує такі функції.
Це велика оптимізація.
Висновок
Ядро WordPress є легким, але воно стає громіздким залежно від теми та плагінів, які ви використовуєте. Крім того, дуже важливо оптимізувати продуктивність вашого сайту для кращого рейтингу в пошуку та конверсії. Наведені вище прийоми легко виконувати, але не варто зупинятися на досягнутому.
Ви також повинні розглянути можливість використання CDN для кешування та швидшої доставки вмісту користувачам у всьому світі. Їх багато, але я б рекомендував спробувати SUCURI, який пропонує CDN і безпеку.