Підручник з WP Rocket для оптимізації швидкості сайту

Що таке WP Rocket?

WP Rocket — це плагін, що народився як рішення для різних оптимізацій кешу в WordPress. Сьогодні це набагато більше, і ми можемо оптимізувати не лише кеш, а й практично все, пов'язане з оптимізацією продуктивності завантаження сайту.

Аби продемонструвати його вплив, погляньте на продуктивність нашого власного сайту З і БЕЗ WP Rocket:

Чому використовувати WP Rocket?

Хоч ми сказали, що існують інші альтернативи для оптимізації WPO, і кожен вільний використовувати ту, яку вважатиме доречною, у нашому випадку у нас особлива перевага до WP Rocket. Його інтуїтивний інтерфейс, що працює одним кліком галочки, численні опції, які він пропонує для налаштування кешу і завантаження ресурсів, роблять WP Rocket нашим улюбленцем серед усіх варіантів.

Головне меню WP Rocket

Припустимо, що у нас не виникло проблем зі встановленням WP Rocket, починаймо пояснювати його інтерфейс і різні доступні опції для оптимізації. Коли ви клацаєте на вкладку дашборда, з'являється такий екран:

Вітальне повідомлення і опції, які ми спочатку можемо залишити, але які ми тут пояснимо.

My Account

Якщо ви придбали WP Rocket, блок «View my account» переведе вас на сторінку користувачів WP Rocket, аби, опинившись там, ви могли заповнити і перевірити все, пов'язане з вашим профілем користувача: дані, рахунки тощо.

RocketCDN

RocketCDN — це CDN-сервіс, який WP Rocket пропонує відносно нещодавно. Мета — надати необхідні інструменти для досягнення найкращої продуктивності без потреби шукати рішення поза плагіном. Існують інші дуже популярні і так само ефективні CDN-сервіси, як-от Cloudflare чи Amazon CloudFront.

My Status

В межах цієї опції ми маємо два перемикачі для увімкнення:

• ›

  Rocket Tester: це програма покращень WP Rocket для тестування їхніх BETA-версій. Вам треба зв'язатися з ними через email.

• ›

  Rocket Analytics: Ви погоджуєтеся ділитися даними продуктивності WordPress анонімно з командою розробки, аби допомогти покращити WP Rocket.

Тут мало про що сказати, це особисте рішення, що не повинно вплинути на продуктивність.

Налаштування кешу в WP Rocket

Час перейти до опцій налаштування і ми почнемо з кешу:

На другій вкладці плагіна ми можемо побачити, які опції кешу він нам пропонує. Згадаймо, що в WP Rocket ми оптимізуємо кеш сторінки, і як ми побачимо зараз, у нас також є опція для увійшлих користувачів, але треба бути обережним з цією опцією.

Mobile Cache

Зазвичай, коли ми говоримо про мобільні, ми також включаємо планшети, але цього разу ми говоримо лише про мобільні пристрої. WP Rocket виявляє через user agent, що ми переглядаємо зі смартфонів.

Ми завжди увімкнемо цю опцію, оскільки загалом дизайни desktop і mobile різні, якщо тільки у нас немає адаптивної версії, ця опція завжди буде увімкнена. Аби було зрозуміло, чому ми хотіли б, аби нам надсилали 2 кешовані версії, якщо дизайн був би тим самим? Інакше кажучи, якби у нас не було мобільної версії, ми б не хотіли, аби цей кеш оброблявся по-різному, чи не так?

Тут додається виняток. Коли у нас є мобільна версія з ресурсами чи елементами, що завантажуються лише в цій версії, ми збережемо файли окремо.

Приклад:

• ›У нас є реклама, що на мобільному завантажує JS, якого немає в desktop-версії.

У цьому випадку ми б дійсно зберегли окремі файли для мобільного.

User Cache

User cache — це опція, яку WP Rocket надає для тих користувачів, що переглядають, увійшовши.

Активуючи цю опцію, ми можемо пропонувати індивідуалізовану версію кешу для кожного користувача. Найкраще — увімкнути її, якщо користувачі входять, але треба бути особливо обережним, які сторінки кешуються, а які ні, бо якщо користувач вводить особисті дані (наприклад, банківську інформацію), збереження її в кеші могло б спричинити нам юридичні проблеми.

Як виключити сторінку з кешування?

Якщо ви хочете уникнути проблем такого типу, найкраще — піти безпосередньо на сторінку, яку хочете виключити, і в опціях WP Rocket (sidebar чи внизу) обрати «never cache this page».

Cache Lifespan

У цьому розділі нам просто треба вказати тривалість, яку ми хочемо для файлів кешу, що генеруються. Тобто WP Rocket генерує файл, що зберігає версію вашої сторінки, і цей файл буде тим, що подається користувачу при доступі до сайту.

Через менеджер процесів (CRON) згенеровані файли, що перевищують вказану тривалість, видалятимуться, і створюватимуться нові.

Речі, про які варто пам'ятати

WP Rocket уже бере до уваги певні процеси для видалення і генерації нових файлів кешу, які такі:

• ›

  Генерація нових записів, сторінок, категорій, taxonomies чи редагувань

• ›

  Генерація і редагування нових модулів, віджетів чи будь-якого елемента сайту

• ›

  Коли змінюються налаштування WP Rocket, що впливають на frontend.

Інакше, ви маєте пам'ятати, що зберігання файлів кешу займає простір на вашому сервері, і цей простір обмежений. Також рекомендується очищати кеш з WP Rocket, аби він оновлювався і не залишалися файли, що більше не потрібні.

Що стосується часу, ви можете залишити значення за замовчуванням.

Оптимізація файлів у WP Rocket

Після короткого огляду налаштування кешу настав час попрацювати над оптимізацією файлів. Оптимізація файлів робиться, аби полегшити завантаження і рендеринг HTML. Як ми можемо працювати над цією оптимізацією?

Кількома способами:

• ›

  Зменшуючи вагу файлу

• ›

  Видаляючи непотрібні файли і

• ›

  Виконуючи файли поступово в міру їхньої потреби.

Файли CSS

Файли CSS відповідають за візуальну частину сайту. Стильові таблиці, що дають форму, колір і стиль нашому WordPress. У цьому аспекті привабливий дизайн може не бути оптимізованим дизайном, оскільки дизайнер при побудові CSS міг не дотримуватися ряду базових правил оптимізації.

Серед найпоширеніших проблем, з якими ми зазвичай стикаємось зі стильовими таблицями, такі:

• ›

  Важкі CSS-файли

• ›

  CSS-файли, що завантажуються на сторінках, які не використовують ці стилі

• ›

  Погано побудовані CSS-файли

• ›

  Завантаження занадто багатьох зовнішніх CSS

• ›

  Використання @import для імпорту зовнішніх стильових таблиць

Коротко кажучи, є цілий світ практик, що часто використовуються і не радяться для оптимізації хорошого дизайну, але повернімося до того, що нам пропонує WP Rocket.

Мініфікація CSS-файлів

Ця опція має на меті зменшити вагу CSS-файлів через видалення пробілів і переходів рядків. WP Rocket впроваджує це через активацію галочки.

Порада SEO Alive: Кожного разу, коли ми виконуємо дію, добре спробувати завантажити сайт, аби побачити, чи все правильно, робіть це в режимі інкогніто браузера.

Процес представлено на наступному зображенні, взятому з інструмента minifier.org.

Об'єднання CSS-файлів

Ця функція виконує свого роду «копіювання та вставку» коду з одного CSS в інший, аби уникнути завантаження кількох CSS-файлів і просто мати один.

Радимо продовжувати тестувати, бо це сильно залежить від того, як було розроблено тему, бо якщо у мене є CSS-файл, що завантажується лише на специфічному типі сторінки, що я не хочу — це щоб цей код завантажувався в єдиний файл на всіх сторінках.

Ідеально — завантажувати код, що використовується URL. Поставте галочку і протестуйте з якимось інструментом, як-от GTMETRIX, аби побачити, чи покращилася швидкість завантаження.

Користь об'єднання CSS-файлів — у зменшенні запитів до сервера.

Оптимізація завантаження CSS

WP Rocket було оновлено з врахуванням рекомендацій, наданих різними інструментами Google для оптимізації швидкості завантаження. Якщо у нас уже є досвід з цими інструментами, ми напевно стикалися з попередженням «Eliminate render-blocking resources». Активуючи цю галочку, ми запобігаємо блокуванню CSS завантаження, змушуючи його завантажуватися асинхронно.

Тобто рендеринг HTML не зупиняється, коли йому треба завантажити CSS-файл; цей файл завантажується у фоновому режимі, запобігаючи зупинці процесу завантаження. Тож варто увімкнути.

Файли JS (JavaScript)

JavaScript був однією з великих проблем, з якими стикався Google при обробці HTML. Не заглиблюючись надто в цей тип мови, WP Rocket розробив 5 базових дій для оптимізації цього типу файлів. Погляньмо!

Видалення jQuery Migrate

jQuery Migrate — це бібліотека JavaScript, що дозволяє сумісність з кодом jQuery, розробленим для версій jQuery, ранніх за 1.9. Ця бібліотека постачається нативно у WordPress, але практично не використовується (деяким плагінам вона може бути потрібна).

Цією дією ми хочемо уникнути непотрібного запиту і завантаження JS, що не використовуватиметься. Деактивуйте її і пройдіться сайтом, аби побачити, чи все правильно працює!

Мініфікація файлів JavaScript

Так само як пояснено з CSS-файлами, ця дія застосовуватиметься до JS-файлів, трохи зменшуючи розмір JS-файлів.

Об'єднання JavaScript-файлів

Ще одна дія, подібна до модуля оптимізації CSS. Пам'ятайте, що активуючи ці галочки, ми маємо верифікувати, чи все працює, як раніше.

Відкладене завантаження JavaScript-файлів

Галочка на цій дії робить два покращення в продуктивності:

• ›

  Додає атрибут «defer» до JS, аби запобігти зупинці рендерингу HTML через завантаження JS. З цією дією він завантажується паралельно і виконується в кінці обробки HTML.

• ›

  Переміщує JS, що блокує початковий рендеринг.

WP Rocket попереджає нас, що цей тип активації може спричинити проблеми, через що він вводить безпечний режим, аби уникнути проблем завантаження невід'ємних елементів для правильної візуалізації сторінки.

Затримка виконання JavaScript

Ще одна опція для затримки виконання JavaScript, що не є невід'ємним, поки користувач не взаємодіє зі сторінкою. Ця дія здається не дуже важливою, але вона дозволяє нам отримувати час для швидшого завантаження. Взаємодією може бути клік, прокручування, рух мишки...

Оптимізація медіа

На цій вкладці ми покриємо оптимізацію ключових елементів у перших кроках WPO-оптимізації. Ми говоримо про зображення, відео, iframes і елементи, вбудовані у WordPress, чия функціональність, щонайменше, сумнівна.

Lazyload

Невід'ємна дія в будь-якій оптимізації швидкості завантаження. Функція Lazyload змушує елементи, як-от зображення, відео та iframes, не завантажуватися, поки вони не невід'ємні для відображення.

Дозвольте навести приклад. Поки ми прокручуємо, зображення завантажуються. Уявіть, як виглядало б завантаження цієї сторінки, якби 30 зображень завантажилися всі одразу, особливо якщо користувач навіть не дивиться на них спочатку.

Emoji

Браузери вже включають власні емоджі, тож ми можемо економити цей запит, що робиться, якщо ми не активуємо цю галочку. Моя рекомендація — активувати її.

Embedded Content

Запобігає тому, аби інші люди вбудовували вміст з вашого сайту, і також запобігає тому, аби ви вбудовували вміст з інших несанкціонованих сайтів. Запити, виконувані з цим JS, зменшуються.

Сумісність WebP

WebP — відносно новий формат, який Google ввів близько 2010 року, для стиснення з втратами 24-бітної графіки в Інтернеті, покращуючи надання цих ресурсів для прискорення їхнього завантаження.

Зараз не всі браузери його підтримують, тож вам доведеться бути обережним і знати, який браузер використовують ваші користувачі при роботі з цим форматом. Увімкніть цю опцію, якщо працюєте з зображеннями WebP.

Налаштування Cache Preloading

Нам треба добре зрозуміти, як генеруються файли кешу WP Rocket, аби зрозуміти функцію Preload.

Коли користувач відвідує сторінку нашого сайту вперше, саме тоді сторінка кешується, і генерується кешований файл, що буде доставлений наступним користувачам. Те ж саме відбувається, коли кеш закінчується (час, який ми визначили), і кешовану версію усувають, або коли ми самі очищуємо кеш усіх наших URL.

Preload Cache

Активуючи опцію Preload, що ми зробимо — це завантажимо попередньо кешовану версію, аби навіть перший користувач мав швидшу версію нашого сайту. Ця дія виконується через посилання sitemap, тож нам знадобиться sitemap.

Sitemap — це згенерований файл, де показано URL нашого сайту. З плагінами, як-от «Rank Math» чи «Yoast», ми можемо легко його згенерувати. Якщо хочете побачити як створити sitemap з Rank Math, тут показуємо вам.

Preload Links

Це функція, яку WP Rocket впровадив у своїх останніх версіях. Мета — передбачити завантаження «наступних сторінок, які користувач збирається відвідати». При наведенні курсора попереднє завантаження сторінки відбувається на випадок, якщо користувач клацне на посилання.

WP Rocket прийняв цю функцію, яку специфічні плагіни, як-от «Flying Pages», уже впроваджували для покращення плавності навігації в межах сайту (досвід користувача). Сказавши це, це не фактор, що покращує час завантаження, і ви не побачите покращення в метриках інструмента аудиту WPO.

Попереднє завантаження DNS-запитів

Попереднє завантаження DNS-запитів стає в нагоді, коли ми використовуємо ресурси третіх сторін, як-от YouTube, Facebook, шрифти чи iframes, які ми часто запитуємо.

Коли ми робимо будь-яке з'єднання в Інтернеті, робиться DNS-запит, що має бути розв'язаний і надісланий серверу. Це має тривалість, яку ми можемо покращити, якщо додамо URL необхідних ресурсів у цей блок, який нам надає WP Rocket.

Як ми бачимо в прикладі, треба використовувати лише ім'я домену //youtube.com //facebook.com

Розв'язання DNS триває приблизно 20-120 мілісекунд, як вказує GTMETRIX, браузер не завантажуватиме нічого з хоста, поки цей процес не буде завершено.

Попереднє завантаження шрифтів

Попереднє завантаження шрифтів вимагає попереднього кроку — це завантаження шрифтів і їхня наявність на нашому сервері. Опинившись там, ми можемо зробити ту саму дію, яку зробили з cache preload, роблячи набагато швидшу версію файлу шрифтів і надаючи її користувачу, коли він з'єднується з нашою сторінкою.

Як тільки шрифти розміщено, ми вкажемо WP Rocket точний шлях використовуваних шрифтів. Рекомендується не зловживати різними шрифтами на наших сторінках, бо вони вимагають різних завантажень. Також зауважте, що запити до сервера робляться з різними варіаціями шрифту, дозвольте пояснити:

• ›

  Жирний шрифт --> 1 запит

• ›

  Підкреслений шрифт --> 1 запит

• ›

  Шрифт у верхньому регістрі --> 1 запит

Налаштування розширених правил WP Rocket

Ніколи не кешувати ці URL

Існують певні URL, через їхню унікальність, для яких ми не хочемо, аби зберігалася кешована версія. З цієї вкладки WP Rocket дозволяє нам ввести список URL, які ми ніколи не хочемо кешувати.

Ніколи не кешувати ці cookies

WP Rocket дає нам ще один інструмент контролю, поза робленням цього через URL. Багато плагінів працюють з власними cookies, чи ми навіть можемо встановлювати свої власні, аби ідентифікувати певних користувачів; існує чимало способів використовувати ці маленькі файли.

З WP Rocket ми можемо припиняти кешування URL, ідентифікованих ID cookie, як тільки завантажене у браузер користувача, далі кастомізуючи тип URL, які ми хочемо кешувати.

Ніколи не кешувати ці user agents

User agent — це описове поле в межах протоколу HTTP, що використовується для надання інформації про пристрій, що робить запит. Знаючи цю інформацію, ми можемо запобігти доставці кешованих сторінок цим user agents.

Наприклад, один з user agents Google — це Googlebot, тож вказавши його в цій частині сайту, кожного разу, коли він отримує доступ до нашого сайту, ми пропонуватимемо сторінки без кешування.

Завжди очищувати ці URL

Ця опція дуже цікава для типу URL, для якого, наприклад, ви зацікавлені у тому, щоб його файл кешу завжди видалявся при оновленні.

Наприклад, у мене є URL зі спортивними результатами, і що я не хочу — це доставляти кешовану версію користувачу, оскільки результати оновлюються дуже часто.

Кешувати ці query strings

Query strings — це дані, що надсилаються при виконанні запиту до вебсторінки через URL.

Зазвичай їх ідентифікують символом знака питання «?», і за загальним правилом WP Rocket не кешує цей тип URL. У цій опції ми можемо змусити його це робити.

Налаштування бази даних з WP Rocket

Як ми повторювали впродовж статті, WP Rocket перестав бути просто плагіном кешу, аби стати плагіном для оптимізації швидкості завантаження нашого сайту. У цьому розділі налаштування ми можемо глибше зануритися в оптимізацію бази даних.

Поки ми працюємо над нашим вмістом у WordPress, ми генеруємо інші типи інформації, що не корисні і шкодять продуктивності нашого сайту. Для цього WP Rocket надає нам цей інструмент, аби зробити більш-менш ретельне очищення.

Очищення постів

Як можемо побачити на зображенні, є 3 елементи, що можуть займати простір у базі даних, не цікавлячи нас. Коли ми оновлюємо вміст, попередня версія зберігається, також генерується автоматичний чернетка того, що ми редагуємо, і відкинуті записи.

Якщо ми приберемо ці елементи, ми звільнимо простір у нашій базі даних.

Очищення коментарів

Ця частина важлива, бо іноді наша база даних заповнюється «спам»-коментарями, через що WP Rocket ввів цю опцію, аби почистити цей тип елементів.

Очищення Transients

Коли ми працюємо у WordPress, генеруються певні тимчасові елементи, які ми можемо видалити без проблем, оскільки вони регенеруються.

Очищення бази даних

Як цей пункт, так і наступний — рекомендую робити резервну копію бази даних, бо хоч нічого не повинно статися, поглиблення у дії в межах бази даних завжди має свої ризики, тож не зайве зробити резервну копію.

Активація цієї галочки виконуватиме очищення таблиць бази даних. Цей процес можна автоматизувати.

Налаштування CDN з WP Rocket

Перш ніж копати глибше у те, як налаштувати CDN з WP Rocket, я хочу пояснити, що таке CDN і чому він використовується.

Що таке CDN?

CDN (Content Delivery Network) — це сервіс, чия мета — покращити швидкість передачі вмісту користувачу. Аби це зробити, він створює мережу розподілу вмісту в різних серверах по всьому світу, аби скоротити час у запиті ресурсу користувача. Тобто, якщо користувач у Бразилії, CDN пропонує вміст, розміщений на сервері, ближчому до нього, ніж справжній сервер вебхостингу.

Зображення взяті зі сторінки WP Rocket

Як працює CDN?

Він діє через ці інші сервери, що зберігають кешовану копію сайту, і коли користувач запитує цей вміст/ресурси, ближчий сервер виконує передачу.

Сервіси такого типу дуже корисні, коли у вас є важкий вміст, як-от зображення, аудіо, відео та/або багато відвідувань. Якщо у вас спочатку сайт з малою кількістю відвідувань, вам не варто хвилюватися про цей аспект.

RocketCDN

WP Rocket пропонує нам можливість найняти його CDN за ціною 7,99 доларів на місяць, менше за 7 євро.

CDN

Коли ми наймаємо CDN, нам надається інформація для його використання. Один з цих елементів, що надається, — це CNAME, хоч якщо його не надають, ми можемо його отримати.

CNAME — це тип DNS-запису, що відображає ім'я вихідного домену на ім'я цільового домену

Аби використовувати цю функцію, нам доведеться лише вказати цей CNAME і сказати йому, для яких файлів ми його хочемо.

Виключити файли з CDN

Наступна опція, як очікується, — виключити ті файли, які ми не хочемо, аби йшли через CDN.

Оптимізація функції WordPress Heartbeat

WordPress heartbeat — це передача даних контролю для встановлення комунікації між backend і frontend WordPress і сервером. Цей тип процесу може бути однією з причин, через які ви можете відчувати повільність у вашому WordPress.

Серед дій, які можна обмежити, такі:

• ›

  Автозбереження і ревізії в редакторі поста.

• ›

  Сповіщення в адмінпанелі WordPress.

• ›

  Інформація про того, хто редагує.

• ›

  Дані в реальному часі.

Якщо наш WordPress правильно працює, я не рекомендую робити нічого на цьому етапі, але якщо ми помічаємо повільність, ми можемо спробувати обмежити активність у різних опціях.

Налаштування доповнень WP Rocket

Існують певні елементи, як-от скрипти Google Analytics та Facebook, що просто активуючи їх у цій частині налаштування, ми можемо отримати кешовану версію і покращити продуктивність. Ця дія прямо відповідає одному з запитів, що зазвичай вказуються в аудитах швидкості завантаження, як Pagespeed «Leverage browser caching».

Оптимізація зображень

Оптимізація зображень — це процес, що через його складність міг би мати власний посібник. WP Rocket пропонує незалежний плагін для роботи з цими ресурсами. З WP Rocket ми можемо отримати доступ до завантаження його «Free» версії.

Інструменти WP Rocket

Налаштування WP Rocket можна зберігати та імпортувати, аби уникнути необхідності знову витрачати час на цей процес. Він також дає нам опцію виконувати «Rollback», тобто повертатися назад з огляду на встановлену версію.

Підручники WP Rocket

Аби закінчити цей посібник з WP Rocket, сам плагін надає серію відео, що дають інформацію про різні дії, які виконуються, і як їх виконувати.

Висновки

Як ви побачили, WP Rocket — це більше за плагін кешу; у нашому розпорядженні є повний набір для оптимізації швидкості і продуктивності нашого сайту, тож тепер нам залишається лише спробувати різні опції. Чого ви чекаєте, аби змусити ваш WordPress літати?

Чи знали ви WP Rocket? Чи вдалося вам покращити свою продуктивність з цим посібником? Маєте якісь питання? Чекаємо вас у коментарях!