Щоб ваш веб-сайт з’являвся на першій сторінці результатів пошуку, вкрай важливо мати високоякісний контент і гарантувати, що сторінки вашого сайту завантажуються протягом 2 секунд або менше.
Для цього необхідно мати надійний хостинг, ефективне програмне забезпечення, правильну технічну організацію сайту та оптимізовані зображення. Про решту завдань подбає плагін кешування.
Виконавши зазначені умови і безкоштовно встановивши плагін кешування, ви зможете набрати 60-80 балів у тесті мобільної версії Google і 80-90 балів у тесті десктопної версії.
Одним із недоліків використання безкоштовних плагінів є відсутність можливості кешування мобільної версії та відсутність функції затримки завантаження скриптів.
Отже, вам знадобиться або платний плагін, або кілька безкоштовних плагінів, які потенційно можуть спричинити більше незручностей, ніж вони того варті.
WP Rocket — платний плагін, у якого є 3 великі плюси:
- Легке налаштування
- Кешування мобільної версії
- Завантаження JS скриптів після завантаження основного контенту
Якщо ви виконаєте ці кілька вимог і встановите плагін WP Rocket, ви легко доб’єтеся оцінки 98-100 балів за тестом Гугл для мобільної та десктопної версій сайту.
Перевірте швидкість сайту
Пошуковики вимагають, щоб сторінки відкривалися за 2 секунди і швидше, і отримували високі оцінки в тестах швидкості:
Google PageSpeed Insights — https://pagespeed.web.dev/
Pingdom Website Speed Test — https://tools.pingdom.com/
GTmetrix — https://gtmetrix.com/
WebPageTest — https://www.webpagetest.org/
IsItWP — https://www.isitwp.com/free-website-speed-test-tool-for-wordpress/
Протестуйте ваш сайт, щоб порівняти зміни до і після використання WP Rocket.
Швидкий старт
Будь-який плагін кешування не є вирішенням усіх проблем.
До встановлення плагіна кешування ваш сайт має отримувати близько 60 балів для мобільної версії, і близько 80 балів для десктопної версії.
Щоб отримати 60-80 балів без плагіну кешування, у вас має бути:
- Хороший хостинг з хорошим обладнанням та швидким інтернетом
- Хороша тема та плагіни
- Оптимізовані зображення
Рекомендації для покращення повинні бути про файли CSS, стилі, що не використовуються, гальмують завантаження скриптах (render-blocking resources), шрифти і картинки.
Після встановлення WP Rocket автоматично застосує декілька безпечних налаштувань, які мають працювати на більшості сайтів.
До них можна додати ще декілька, щоб сайт завантажувався швидше.
Пройдіть за цими швидкими налаштуваннями, у вас має вийти 90-100 балів за тестом Google.
Швидке налаштування кешу
Оптимізація файлів css, js
Робота з медіа
Попереднє завантаження
Розширені налаштування
База даних
CDN сервіс
Пульсація
З хорошим хостингом, гарною темою, оптимізованими зображеннями та цими налаштуваннями ви легко отримаєте 98-100 балів:
Налаштування WP Rocket за цим чек-листом займає 10 хвилин. Розставте галочки, натисніть Зберегти і ви отримаєте високу оцінку в будь-якому тесті швидкості.
Це найпростіший та найефективніший плагін кешування.
Настройка WP Rocket (Детальне налаштування плагіну)
У цьому розділі докладний опис всіх налаштувань WP Rocket:
Панель управління плагіном
Панель керування WP Rocket містить інформацію про тип ліцензії та термін її дії.
Я пробував кілька плагінів кешування , жоден з них не давав такого гарного результату з такою мінімальною кількістю зусиль, як WP Rocket.
Плагін WP Rocket став обов’язковим плагіном при створенні кожного сайту, як, наприклад, плагіни для SEO , безпеки та оптимізації .
Тут можна підключити RocketCDN — власний CDN-сервіс WP Rocket за окрему плату.
Крім RocketCDN, ви можете підключити інші сервіси CDN, у тому числі платний або безкоштовний CloudFlare.
Вкладка Кеш
Всі обов’язкові типи кешування, такі як кешування в браузері, GZIP, бази даних і так далі, включені та налаштовані.
Вам залишається зробити 4 налаштування:
кешування для мобільних пристроїв Увімкнути Увімкнути. Ця установка включає кешування для відвідувачів з мобільних пристроїв. «Мобільними пристроями» WP Rocket вважає лише телефони/смартфони.
Розділяти файли для мобільних пристроїв . Увімкнути або Вимкнути залежно від вашої теми. У документації плагіна сказано, що це налаштування потрібно включати тільки якщо у вас спеціальна тема або плагін для мобільної версії (швидше за все, у вас немає такої теми або плагіна).
Якщо у вас активована така тема або плагін, WP Rocket автоматично включить цю функцію і зробить її сірою, тобто недоступною для зміни.
Коли ця настройка увімкнена, WP Rocket обслуговує відвідувачів на мобільних пристроях окремим кешем, не тим, яким обслуговує відвідувачів з планшетів та комп’ютерів.
Хоча в документації сказано, що для звичайних тем Вордпрес цю настройку потрібно тримати вимкненою, у мене на темах Blocksy і Kadence з цим налаштуванням мобільні сторінки отримують на 10-15 балів більше, ніж без неї.
Спробуйте протестувати сторінки з увімкненою та вимкненою опцією, залиште найкращий варіант.
авторизованих відвідувачів Кешувати Вимкнути. Ця установка створює окремий кеш для авторизованих відвідувачів. Хоча це налаштування потрібне для того, щоб створювати окремий кеш для авторизованих відвідувачів, з нею можуть бути проблеми.
Якщо у вас є мембершип , інтернет-магазин або інший тип сайту з Особистим Кабінетом, то відвідувачі можуть бачити кешований контент один одного при авторизації на сайті, в закритих частинах сайту, в Кошику, на сторінці Оформлення замовлення або в адмінці.
Якщо ваші відвідувачі скаржаться на ці сторінки, вимкніть кешування авторизованих користувачів.
Час життя кешу – 10 годин. Тут вказується час життя кешу, через який він стає застарілим та скидається. Якщо у вас включено « Предзавантаження » (ввімкнено за замовчуванням), то після очищення застарілого кешу створюватиметься новий, нічого робити не треба.
Файли (параметри оптимізації CSS та JS)
У цьому розділі є параметри для файлів CSS та JS. Якщо після застосування налаштувань ви бачите проблеми на сайті, відключайте налаштування по одній, щоб знайти причину.
Стискати стилі CSS та стиснення JavaScript файлів.
Увімкнути. Ці налаштування видаляють коментарі, пробіли, порожні рядки та іншу непотрібну інформацію з коду CSS та JS файлів.
Це безпечне налаштування і не має зламати сайт.
Перед включенням цієї опції ви побачите таке попередження:
Натисніть Увімкнути стиснення CSS . Збережіть зміни та перевірте, чи сайт виглядає без помилок.
Після того, як ви увімкнете мініфікацію CSS та JS, з’являться такі налаштування:
Об’єднувати CSS файли та JavaScript файли
Об’єднувати: Вимкнути. Сенс цих налаштувань у тому, щоб об’єднати кілька CSS та кілька JS файлів в один CSS файл та один JS файл, які завантажуються двома запитами замість 20-ти. Це заощадить час на створення великої кількості запитів і прискорить завантаження сторінки.
Це хороша ідея, але на практиці об’єднання файлів частіше ламає сайт, ніж працює як слід, тому що скрипти не завжди завантажуються у правильному порядку.
Крім цього, з появою HTTP/2 цей підхід втратив сенс, тому що в цій версії протоколу всі запити та завантаження відбуваються паралельно, на відміну від версії 1.1, де запити відбувалися послідовно.
Перевірте, що ваш хостинг підтримує HTTP/2 (скоріше за все, підтримує), і залиште ці налаштування вимкненими.
Це найпроблемніша настройка, до того ж вона не має сенсу з HTTP/2.
Виключити файли CSS і файли, що виключаються JavaScript
Якщо мініфікація або об’єднання файлів викликає проблеми, в цих полях ви можете вказати, які файли потрібно виключити з мініфікації або об’єднання.
Оптимізація доставки CSS
Увімкнути. Ця настройка знаходить мінімально необхідні стилі CSS для відображення сторінок сайту, і допомагає вирішити попередження Google PageSpeed “ Eliminate render-blocking resources ”.
Після того, як ви увімкнете цю настройку, вам потрібно вибрати одну з двох опцій: ” Прибрати невикористовувані CSS ” або ” Завантажувати CSS асинхронно “.
Рекомендується увімкнути ” Прибрати невикористовувані CSS “, це вирішить попередження Google PageSpeed “ Remove unused CSS ”.
Ця опція прибере CSS зі сторінок сайту, що не використовується, тому пройдіть по сторінках, перевірте, що все відображається правильно.
Якщо ви побачили, що якісь елементи на сторінках відображаються неправильно, додайте ці правила у виключення в полі ” Безпечний список CSS “.
Якщо додавання стилів до списку винятків не допомагає, використовуйте варіант ” Завантажувати CSS асинхронно “. Це безпечніший варіант.
Ця установка визначить мінімально необхідні стилі для коректного відображення сторінок, а решта стилів відкладе на момент після завантаження основного контенту.
Асинхронная загрузка JavaScript
Увімкнути. Це налаштування аналогічне попередньому, але з JS. Вона переносить завантаження скриптів у футер, і допомагає вирішити рекомендацію Google PageSpeed “ Eliminate render-blocking resources ”.
Зазвичай *.js – важкі файли, що вимагають ресурсів сервера на свою обробку, тому їхнє відкладання помітно зменшує параметри First Input Delay та Total Blocking Time у Core Web Vitals.
Приклади таких скриптів — Google та Яндекс аналітика, Google та Яндекс реклама, онлайн чат , Facebook та VK Pixel, Граватар, YouTube та VK відео, кнопки соцмереж, тощо.
Якщо після перенесення у футер якийсь скрипт викликає проблеми, його можна додати у виключення у полі Виключні JavaScript файли .
Відкласти завантаження JavaScript
Увімкнути. Ця настройка відкладає завантаження JS файлів і скриптів на сторінці до тих пір, поки користувач не зробить одну з цих дій: рух мишкою, торкання пальцем екрана, скролл, прокручування коліщатком або натискання кнопки.
За допомогою цього налаштування ви покращите параметри First Input Delay та Largest Contentful Paint у тесті Core Web Vitals. Крім них ви вирішите ці рекомендації Google:
- Видаліть невикористаний JavaScript
- Мінімізуйте роботу основного потоку
- Скоротіть час виконання JavaScript
- Загальний час блокування
- Час інтерактиву
- Перша змістовна фарба
Якщо ви увімкнете це налаштування разом з Об’єднувати JavaScript файли , то об’єднання js файлів автоматично відключиться, щоб скрипти завантажувалися в правильному порядку і не зламали сайт.
Налаштування і оптимізація Медіа файлів
Позначте всі 3 чекбокси:
- Увімкнути для зображень
- Увімкнути для кадрів та відео
- Замінювати відео YouTube попереднім зображенням
У Вордпрес версії 5.5 з’явилася підтримка LazyLoad. Ця підтримка в Вордпрес буде автоматично вимкнена, коли активний LazyLoad у цих налаштуваннях WP Rocket, тому нічого робити не потрібно.
Використання LazyLoad скорочує час завантаження сторінок, зменшує кількість запитів при початковому завантаженні сторінки та заощаджує ресурси сервера, тому що зображення запитуються та завантажуються лише коли користувач прокручує до них.
У тесті швидкості Google ці налаштування знімають зауваження Відкладіть завантаження прихованих зображень .
Налаштування Замінювати відео YouTube попереднім зображенням значно зменшує час завантаження сторінки, якщо ви вставляєте відео з YouTube на сайт.
Налаштування Додати відсутні параметри додає відсутні параметри ширини та висоти зображень (якщо їх немає), і вирішує зауваження . widthі height в тесте скорости Google.
У свою чергу це зменшує параметр Cumulative Layout Shift (CLS) , тобто Загальний зсув розмітки.
Коли сторінка завантажується, якщо для зображення явно не вказані ширина і висота, для цього зображення не буде зарезервовано місця, через що решта контент під зображенням зміститься. Коли зображення завантажиться, контент на сторінці перебудується і стане на місце.
Такі стрибки не подобаються відвідувачам і збільшують оцінку Cumulative Layout Shift (CLS) .
Коли ви вмикаєте налаштування Додати відсутні параметри , WP Rocket проходить по сторінці і залишає потрібне місце для подальшого завантаження картинок.
Попереднє завантаження (Preload)
Передзавантаження – це технологія, яка повідомляє браузеру відвідувача, що якийсь контент ще знадобиться під час завантаження наступних сторінок.
Цей контент буде зберігатися в браузері користувача і буде використаний локально разом з тим, щоб завантажувати його ще раз.
Це зменшить час завантаження сторінок і вирішить деякі пропозиції Google PageSpeed Insights щодо передзавантаження.
Це може бути favicon, логотип, шапка сайту, деякі шрифти, і таке інше.
Позначте всі чекбокси в розділі Завантаження кешу:
- Активувати попереднє завантаження
- Активувати попереднє завантаження на основі картки сайту
- Карта сайту [Назва SEO плагіна] (якщо ви використовуєте SEO плагін)
Додайте адресу карти сайту в розділі Карта сайту для завантаження .
Увімкнути передзавантаження посилань починає завантажувати сторінку, коли відвідувач наводить мишку (або натискає пальцем) на посилання більш ніж на 100 мс.
Це збільшить уявну швидкість сайту для відвідувача, але ніяк не позначиться на показниках Google PageSpeed Insights.
Оптимізація DNS запитів . Якщо ви використовуєте сторонній контент, який завантажується з інших сайтів (наприклад, Google Fonts, Google Analytics, Яндекс.Метрика, AdSense, Google Tag Manager, YouTube, Граватари тощо), ви можете додати їх адреси в поле URL для кешування .
Це налаштування говорить браузеру відвідувача створити DNS підключення до потрібних файлів, перш ніж ці файли знадобляться. Це збільшує швидкість завантаження сторінки.
Щоб додати потрібний ресурс у поле URL для кешування, залиште тільки домен верхнього рівня після двох слішів. Тобто, якщо ви хочете додати такий запит до шрифтів Google:
https://fonts.googleapis.com/css?family=Roboto:900%2C400%2C500%2C300%7CRaleway:700%2C300%7COpen+Sans:300%2C800То залиште лише це:
//fonts.googleapis.comПередзавантаження шрифтів . Зазвичай шрифти вказуються у файлах CSS, тому завантажуються пізніше при завантаженні сторінок.
Ця функція говорить браузеру відвідувача починати завантажувати шрифти, не чекаючи завантаження css.
Щоб покращити показник Largest Contentful Paint у Core Web Vitals, функціонал передзавантаження шрифтів автоматично вимикається на тих сторінках, де включено оптимізацію доставки CSS .
Які завантажувати шрифти?
У тесті швидкості Google PageSpeed Insights ви можете побачити зауваження Налаштуйте попереднє завантаження ключових запитів .
Якщо ви відкриєте це зауваження, ви повинні побачити якийсь шрифт, який потрібно завантажувати відразу при завантаженні сторінки. Це виглядає приблизно так: ” …fonts/custom-font.woff2 “.
- Клацніть правою кнопкою миші по цьому шрифту та скопіюйте його URL
- Вставте цей URL у поле Шрифти для завантаження
Додайте сюди шрифти лише якщо вони зберігаються на вашому сервері або на вашому CDN.
Не додавайте шрифти, які завантажуються із зовнішніх джерел, наприклад, Google Fonts. Починаючи з WP Rocket 3.7 шрифти Google оптимізуються автоматично, нічого не потрібно робити.
Тобто, якщо ви користуєтеся лише шрифтами Google (які не зберігаються локально) або системними шрифтами, то в цьому розділі нічого не потрібно робити.
Також не додавайте всі шрифти до цього поля. Додайте лише ті, які уповільнюють завантаження сторінок.
Якщо ви будете завантажувати всі шрифти, це може почати уповільнювати сайт.
Розширені налаштування WP Rocket
Якщо ви використовуєте плагін інтернет-магазину, який не підтримується WP Rocket, використовуйте цей розділ, щоб додати потрібні сторінки сайту у винятки, які не потрібно кешувати.
Якщо ви використовуєте популярні плагіни інтернет-магазину, WP Rocket вже сумісний з ними.
WP Rocket автоматично виключає сторінки Кошик, Оформлення замовлення та Мій Акаунт з кешування для цих плагінів:
- WooCommerce
- BigCommerce
- Легке цифрове завантаження
- Обмін iThemes
- Jigoshop
- WP-магазин
Якщо ви використовуєте один із цих плагінів, то в цих налаштуваннях вам нічого не потрібно робити, все вже налаштовано за умовчанням.
Некешовані URL — Тут можна вказати URL сторінок, які ніколи не повинні кешуватися (по одному URL у рядок). Деякі сторінки, як-от кастомні сторінки авторизації або виходу з сайту, не повинні кешуватися. Якщо ви використовуєте якийсь плагін інтернет-магазину, який не підтримується WP Rocket, додайте URL-адресу потрібних сторінок у це поле.
Некешовані Cookies — це налаштування не буде кешувати сторінки залежно від наявності певних кукіс. Це налаштування схоже на попереднє, тільки використовує кукіс замість URL. Ви можете вказати весь або частину ID кукіс у цьому полі (по одному ID у рядку).
Некешовані User-Agents — Ця установка використовується для того, щоб обслуговувати відвідувачів некешованим контентом, коли вони заходять з певних пристроїв або з певних браузерів. Додати користувач-агенти по одному в рядку.
Завжди сторінки, що очищаються — коли ви оновлюєте сторінку на сайті, WP Rocket очищає кеш цієї сторінки, кеш головної сторінки та кеш пов’язаного з цією сторінкою контенту. Якщо ви хочете, щоб кеш певної сторінки завжди скидався, додайте URL-адреси цих сторінок по одній у рядку.
Запрошення, що кешируються — Кешування запитів прискорює роботу GET параметрів. Використовується в окремих випадках.
База даних
У цьому розділі можна настроїти автоматичне очищення бази даних за розкладом.
Це оптимізує роботу сайту та зменшує обсяг бази даних.
- Ревізії – Вимкнути (На ваш погляд)
- Авто-черновики — Увімкнути (На ваш погляд)
- Записи Віддалені Увімкнути
- Спам — Увімкнути
- Віддалені коментарі Увімкнути
- Усі транзакції Увімкнути
- Таблиць Оптимізація Увімкнути
- Очищення за розкладом – Щотижня (На ваш розсуд)
Увімкніть усі параметри, крім Ревізії та Авто-чернетки . Ці налаштування увімкніть або вимкніть залежно від вашого сайту.
- Очищення записів
- Ревізії — Після того, як ви публікуєте або оновлюєте контент на сторінці, ревізії — попередні версії контенту, які збережені в базі даних. Ви можете увімкнути або вимкнути їх видалення, або обмежити кількість ревізій .
- Авто-чернетки — Доки ви не опублікували контент на сторінці, він зберігається у вигляді Чернетки. Якщо ви увімкнете цю опцію, то неопублікований контент у вигляді Чернівців видалятиметься.
- Віддалені записи — Віддалені записи, які знаходяться у кошику.
- Очищення коментарів
- Спам – Коментарі, які ви або якісь плагіни позначили як Спам.
- Віддалені коментарі — Видалені коментарі, які знаходяться у Кошику.
- Очищення транзакцій
- Усі транзакції — Транзакції — це тимчасові дані, які створюються плагінами, які можна безпечно видалити. Вони створюються постійно, тому ви можете не побачити цифру 0, навіть після їх видалення.
- Очищення бази даних
- Оптимізація таблиць — Ця установка використовує вбудований інструмент софту бази даних, щоб БД працювала максимально ефективно.
- Автоматичне очищення
- Очищення за розкладом — Тут ви можете вибрати, як часто очищати та оптимізувати базу даних. Залежно від того, як часто ви публікуєте контент на сайті, ви можете вибрати Щоденно , Щотижня або Щомісячно .
Після запуску очищення бази даних віддалені дані неможливо відновити . Тому перед очищенням бази даних, особливо якщо ви видаляєте Ревізії, переконайтеся, що у вас є бекап .
CDN
- Увімкнути мережі доставки контенту (CDN ) Увімкнути , якщо ви використовуєте CDN.
- CDN CNAME — Вкажіть імена CNAME, які будуть використовуватись для доставки статичних файлів.
- Використовувати для — Усі файли.
- Виключити файли з CDN — Тут ви можете вказати URL-адреси файлів, які не повинні копіюватися на CDN по одному в рядку.
CDN – це мережа доставки контенту, яка складається із серверів у різних місцях світу. На цих серверах зберігаються копії файлів, які використовуються для створення сторінок сайту.
Коли відвідувачі сайту завантажують сторінки, вони отримують контент із найближчого сервера.
Якщо більшість відвідувачів вашого сайту знаходяться на тому ж континенті, що і ваш сервер, то вам може бути не потрібний CDN, тому що це може уповільнювати завантаження сторінок через додавання ще одного вузла, через який проходить трафік.
Якщо ваші відвідувачі приходять з різних континентів, то CDN може бути корисним.
На цій сторінці параметрів можна підключити мережу CDN.
Пульсація
Пульсація Вордпрес – це технологія, яка забезпечує з’єднання для передачі даних у режимі реального часу та синхронізації між сервером та браузером.
Приклади використання Пульсації:
- Автозбереження та ревізії в редакторі сторінок
- Повідомлення в адмінці Вордпрес
- Повідомлення про те, що сторінку заблоковано, якщо інший користувач її редагує
- Дані реального часу, що відображаються на панелі плагінів інтернет-магазину
Пульсація запускає певний список завдань кожні 15-60 секунд, що споживає ресурси сервера і може спричинити високе завантаження процесора.
Цей функціонал дозволяє зменшити частоту або вимкнути виконання цих завдань, щоб заощадити ресурси сервера.
Найкраще налаштування — Зменшити активність , — тому що деякі плагіни та теми використовують Пульсацію. Якщо її вимкнути, то ці плагіни чи теми можуть працювати неправильно.
Якщо ви точно знаєте, що вам не потрібне використання Пульсації, то можете її вимкнути повністю, але в більшості випадків досить просто зменшити активність.
Висновок
Якщо ви шукаєте вражаючий і зручний плагін, WP Rocket стане ідеальним вибором. Цей плагін усуває необхідність у складних конфігураціях кешування, забезпечуючи виняткову продуктивність.
Через постійний розвиток інфраструктури кешування WordPress WP Rocket не пропонує безкоштовну версію. Динамічні зміни у вимогах, встановлених Google, і безперервна інтеграція підтримки формату WebP у WordPress – усе це сприяє постійним коригуванням конфігурацій WP Rocket.
Всього за 59 доларів WP Rocket пропонує ліцензію на один сайт, яка включає найновіші параметри кешування, забезпечуючи плавний і безпроблемний процес подання заявки.
Плагін кешування, про який йдеться, не тільки найефективніший, але й найпростіший у використанні.