Оптимізація сайтів на WordPress є ключовим фактором як для зручності користувачів, так і для просування сайту в пошукових системах. Швидкість завантаження сторінок безпосередньо впливає на поведінку відвідувачів: повільні сайти частіше покидають, вони нижче ранжуються в пошукових системах. Важливу роль у роботі сайту відіграє і вибір хостингу, але купуючи швидкий хостинг на NVMe/SSD дисках, це не гарантує автоматично вискокої швидкості роботи вашого WordPress-сайту.
Оптимізацію роботи сайтів на WordPress ми вже розглядали у статті “Як прискорити сайт на WordPress“, де, зокрема, згадувалося кешування яке є однією з найефективніших технік оптимізації . Кешування дозволяє уникнути зайвих запитів до бази даних і значно скоротити час відповіді сервера. Для реалізації кешування можуть застосовуватись як внутрішні механізми, так і зовнішні рішення.
Не менш важливим є оптимізація фронтенду — зменшення розміру та кількості ресурсів, які завантажує браузер. Стиснення зображень, мінімізація CSS і JavaScript, а також використання сучасних форматів даних дозволяють зменшити загальний розмір сторінки і значно прискорити швидкість відображення сайту. Додатково застосовується CDN, наприклад Cloudflare, що допомагає доставляти контент користувачам із найближчих серверів.

 W3 Total Cache що це таке ?

W3 Total Cache – це один з найпопулірніших плагінів оптимізації роботи сайтів на WordPress. Він є одним із найпотужніших інструментів для оптимізації швидкості роботи сайтів на WordPress. У сучасних умовах, коли користувачі очікують миттєвого завантаження сторінок, а пошукові системи враховують швидкість як важливий фактор ранжування, ефективне кешування стає не просто опцією, а необхідністю. Саме тому W3 Total Cache широко використовується як власниками невеликих блогів, так і розробниками великих вебпроєктів.

Основна ідея плагіна полягає в тому, щоб зменшити навантаження на сервер і скоротити час обробки запитів. Це досягається за допомогою кешування сторінок, бази даних та об’єктів, а також оптимізації статичних ресурсів. Наприклад, плагін може зберігати готові HTML-версії сторінок і віддавати їх користувачам без повторної обробки PHP, що суттєво пришвидшує роботу сайту. Крім того, він дозволяє мінімізувати та об’єднувати CSS і JavaScript файли, що зменшує кількість запитів до сервера.

Ще однією важливою перевагою є підтримка CDN (Content Delivery Network), що дозволяє розподіляти контент через глобальну мережу серверів і забезпечувати швидке завантаження сайту незалежно від географічного розташування користувача. Водночас варто зазначити, що через велику кількість налаштувань плагін може здатися складним для новачків, і неправильна конфігурація іноді призводить до зворотного ефекту. Ознайомитись з повним набором можливостей які надає плагін ви можете на офіційній сторінці W3 Total Cache.

Тестування сайту

Перш ніж переходити до встановлення необхідних компонентів та оптимізації, проведемо тестування сайту, щоб оцінити швидкість роботи без будь-яких покращень. Після виконання базової оптимізації виконаємо повторний тест. Це дозволить наочно порівняти результати та визначити ефект змін. Зазначимо, що тестовий сайт розміщений на віртуальному хостингу з NVMe/SSD-накопичувачами.

Умови тестування:

Тестування виконуватиметься за допомогою утиліти Apache Benchmark, яка генеруватиме 10 одночасних запитів до сайту. Тест триватиме доти, доки загальна кількість оброблених запитів не досягне 1000.

Приклад команди: ab -c 10 -n 1000 https://domain.com.ua/wp/

Результати тесту:

Server Software:       Apache
Server Hostname:       domain.com.ua
Server Port:           443
SSL/TLS Protocol:      TLSv1.3,TLS_AES_256_GCM_SHA384,2048,256
Server Temp Key:       X25519 253 bits
TLS Server Name:       domain.com.ua

Document Path:         /wp/
Document Length:       84330 bytes

Concurrency Level:     10
Time taken for tests:  40.458 seconds
Complete requests:     1000
Failed requests:       0
Total transferred:     84906000 bytes
HTML transferred:      84330000 bytes
Requests per second:   24.72 [#/sec] (mean)
Time per request:      404.579 [ms] (mean)
Time per request:      40.458 [ms] (mean, across all concurrent requests)
Transfer rate:         2049.44 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:        2    5   6.9      3     101
Processing:   173  397  73.2    394     836
Waiting:      158  387  69.5    388     765
Total:        176  402  74.4    398     839

Тривалість тесту: 41 секунда.
Швидкіть обробки запитів: 24.72 запити/секунду
Середній час на запит: 404 мс

Попередня підготовка та тести

Активуємо PHP розширення

Фактично WordPress це набір PHP-скриптів кожен з яких виконує певну задачу. Щоб прискорити виконання цих скриптів і забезпечити швидшу обробку даних, з якими оперує  сайт, нам знадобляться деякі PHP-розширення. Такими розширеннями є APCu та OPCache. Додатково, нам знадобиться розширення brotli щоб зменшити розмір сторінок і прискорити їхнє завантаження.

Активуйте PHP розширення “apcu”, “opcache” та “brotli” для версії PHP яку використовує ваш сайт. На серверах з CloudLinux та панеллю керування cPanel це робиться через “Вибір версії PHP” / “Select PHP version” на сторінці “Розширення” / “Extensions”.

Встановлюємо плагін W3 Total Cache

1. В лівій бічній панелі WordPress натисніть на “Плагіни”, а потім на “Додати плагін”;
2. В центральній частині, поряд з “Шукати плагіни” введіть “w3 total cache” і зачекайте деякий час, поки WordPress шукає плагіни які відповідають вашому запиту;
3. Коли вікно оновиться, знайдіть плагін “W3 Total Cache” серед отриманих результатів та натисніть на “Встановити зараз” поряд з ним;
4. Зачекайте деякий час поки WordPress встановлює плагін.
5. Активуйте плагін натиснувши на кнопку “Активувати”

Налаштування плагіну W3 Total Cache

Після встановлення плагіну, в лівому вертикальнмоу меню з’явиться новий розділ з назвою “Performance”, це і є розділ в якому налаштовується плагін W3 Total cache.

Натисніть на “Performance” в лівому вертикальному меню, а потім перейдіть до “General Settings”, щоб відкрити вікно з базовими налаштуваннями плагіна.

Ви одразу побачите меню наведене на малюнку нижче.

Кожен пункт цього меню переносить до відповідного розділу налаштувань в “General Settings”. Також тут знаходяться дві кнопку “Empty All Caches” (“Очистити всі кеші”), якщо натиснути на стрілочку “вниз” цієї кнопки, з’явиться опція “Empty OpCode cache” (“Очиста OpCache”). Праворуч знаходиться кнопка “Save Settings” (“Зберегти налаштування”), а натиснувни стрілочку “вниз” поряд з кнопокаю, з’являється опція “Save Settings & Purge Caches” (“Зберегти налаштування та очистити кеші”).

Опція “Попереднього перегляду”

Preview mode  вмикає режим “попереднього перегляду” для тестування роботи сайту, що дозволяє змінювати налаштування плагіну і тестувати роботу сайту до фактичного розгортання налаштувань плагіну на сайті. Режим “попереднього перегляду” залишається активним навіть після розгортання налаштувань, доки ви не вимкните опцію. Цей режим стає у нагоді для тестування роботи сайту після зміни налаштувань плагіну.

Проскрольте екран вниз до “Page Cache”.

Активуємо кешування сторінок

Активуйте кешування, для цього:
Навпроти “Page Cache” встановіть галочку поряд з “Enable”;
Навпроти “Page Cache Method” з випадаючого меню оберіть “Disk: Enhanced”.
як продемонстровано на малюнку нижче:

Активуємо “мініфікацю”

“Minify” або “Мініфікація” дозволяє зменшити розмір HTML, CSS та JS файлів видаляючи з них пробіли, різні коментарі, але ця функція також може пошкодити ваш сайт. Налаштуйте цей розділ таким чином:
Minify: Поставте галочку поряд з “Enable”;
Minify Mode: Auto
Minify Cache Method: Disk – в документації плагіна вказано, що треба використовувати саме цей метод кешування
HTML Minifier: Minify (default)
JS Minifier: Jsmin (default)
CSS Minifier: Minify (default)

Активуємо кешування оперційного коду

Раніше ми активували PHP розширення “opcache”, тому цей тип кешу буде активовано автоматично (поряд з “Enable” стоїть галочка, але опцію неможливо деактивувати або активувати, якщо розширення opcache не додано до PHP).
Розділ має мати такий вигляд:

Переконайтесь, що в полі поряд з “Opcode cache” обрано “Opcode: Zend Opcache”.

Активуємо кешування бази даних

Встановіть галочку навпроти “Database Cache” поряд з “Enable”
В полі “Database Cache Method” оберіть “Opcode: Alternative PHP Cache (APC/APCu)”

Активуємо кешування об’єктів

Object Cache кешує часто використовувані запити до бази даних та складні структури даних, зменшуючи необхідність їх багаторазового отримання з бази даних.

Для активації Object Cache:
Навпроти “Object Cache” встановіть галочку поряд з “Enable”;
Навпроти “Object Cache Method” з випадаючого меню оберіть “Opcode: Alternative PHP Cache (APC/APCu)”.

Активуємо кешування браузером

Ця опція “інструктує” браузер користувача, який відвідує ваш сайт, зберігати статичні елементи сайту (картинки, css, js файли) на компьютері користувача, а коли користувач відвудує сайт повторно отримувати такі статичні елементи з кешу. Це значно зменшує кількіть запитів до сайту, об’єм даних які передаютсья від сайта до користувача і т.д. що значно зменшує час відображення сторінки.

Активуйте опцію встановвів

Розділи “Purge via WP Cron”, “CDN”, “Reverse Proxy”

Пропускаємо, ніяких змін не вносимо.

Розділ “User Experience”

Активуємо опцію “Lazy Load Images”
Активуємо опцію “Disable Emoji” якщо ви не використовуєте Emoji. Вона відключить відображення Emoji.

Розділ “Licensing”

В полі “License” вкажіть ваш номер ліцензії W3 Total Cache якщо ви придбали ліцензію, це розблокуэ “Преміум” опції.

Розділ “Miscellaneous”

“Verify rewrite rules” – увімкніть опцію.
“Enable File Locking” – залиште вимкненою.
“Optimize disk enhanced page and Minify disk caching for NFS” – залиште вимкненою.
“Fix document root path” – залиште вимкненою.
“Anonymously track usage to improve product quality” – залиште вимкненою т.я. ативація цієї опції трохи сповільнить ваш сайт.
“Debug mode” – має бути завжти вимкненою, окрім випадків, коли вам необхідно діагностувати проблеми в роботі сайту.

Базові налаштування W3 Total Cache завершено і необхідно зберегти налаштування натиснувши на кнопку “Save Settings”.

Повторне тестування.

На початку статті ми вже виконали тестування сайту до налаштування оптимізацій. Після внесення змін проведемо той самий тест. Це дозволить порівняти результати та оцінити ефективність виконаної оптимізації.

Результати тесту після оптимізації:

Server Software:        Apache
Server Hostname:        domain.com.ua
Server Port:            443
SSL/TLS Protocol:       TLSv1.3,TLS_AES_256_GCM_SHA384,2048,256
Server Temp Key:        X25519 253 bits
TLS Server Name:        domain.com.ua

Document Path:          /wp/
Document Length:        82208 bytes

Concurrency Level:      10
Time taken for tests:   0.969 seconds
Complete requests:      1000
Failed requests:        0
Total transferred:      82585000 bytes
HTML transferred:       82208000 bytes
Requests per second:    1031.79 [#/sec] (mean)
Time per request:       9.692 [ms] (mean)
Time per request:       0.969 [ms] (mean, across all concurrent requests)
Transfer rate:          83213.56 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:        2    4   2.2      3      25
Processing:     3    6   3.1      5      36
Waiting:        2    3   2.0      3      28
Total:          5   10   4.0      8      39

Як можна побачити порівнявши результатів тестів виконаних перед та після базової оптимізації, швидкість роботи сайту зросла приблизно в 40 разів.
Тривалість тесту була 41 секунда стала 1 секунда.
Швидкість обробки запитів була 24.72 запити/секунду, стала 1031.79 запити/секунду
Середній час на запит був 404 мс, став 9.7 мс.

Звичайно, результати оптимізації можуть суттєво відрізнятися для вашого сайту, оскільки на кінцевий результат впливає багато факторів. Наприклад, кількість і тип встановлених плагінів, складність та налаштування теми, а також обсяг і структура контенту на сторінках. Тому навіть застосувавши однакові методики оптимізації, ваш сайт може показувати інші показники порівняно з прикладами наведеними в статті, але варто знати, що подібні техніки оптимізації сайту необхідно використовувати не залежно від того чи розміщується ваш сайт на NVMe/SSD хостингу, VPS або на виділенному сервері.