Прискорення та оптимізація сайту на WordPress

Оновлено

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

Гарна новина? WordPress досить гнучкий, щоб його можна було оптимізувати різними способами, що дозволяє помітно скоротити час завантаження. Щоб відстежувати прогрес, ви можете запускати тести швидкості після кожної зміни за допомогою онлайн-інструментів, таких як:

  • Google PageSpeed Insights — Чудово підходить для початківців, пропонує прості для виконання поради з оптимізації.

  • GTmetrix — Пропонує як оцінки продуктивності, так і практичні поради.

  • Pingdom — Надає детальний розподіл часу завантаження, хоча може вимагати трохи більше технічних знань.

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

Далі ми розглянемо практичні кроки, які допоможуть зробити ваш сайт на WordPress швидшим — поради, які варто застосовувати з самого початку створення сайту. 

ПРИМІТКА: Обов’язково зробіть резервну копію сайту перед внесенням змін.

Поради для прискорення сайту

Вибір правильного шаблону 

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

Золоте правило при виборі теми — підбирати дизайн під ваш контент. Спочатку визначте, на чому буде зосереджений ваш сайт і який тип контенту ви будете публікувати. Лише після цього обирайте тему, яка підтримує ці цілі.

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

Ось кілька порад, які допоможуть вибрати тему, що буде і стильною, і швидкою:

  1. Дотримуйтеся простоти — Уникайте надто складних макетів і важких анімацій.

  2. Обирайте адаптивність — Вибирайте тему, яка бездоганно підлаштовується під мобільні, планшети та десктопи.

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

  4. Оцінюйте конструктори сторінок — Теми з вбудованими конструкторами сторінок можуть бути зручними, але часто додають зайве навантаження. Перевіряйте продуктивність перед вибором.

  5. Шукайте SEO-дружній код — Чиста, семантична структура коду допомагає пошуковим системам краще розуміти ваш сайт.

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

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

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

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

Примітка: Для роботи плагіну потрібна функція exec() .

Після встановлення та активації перейдіть у Медіафайли > Масова оптимізація і:

  1. Натисніть Сканувати на не оптимізовані зображення, щоб знайти всі зображення, які можна стиснути:

  2. Після сканування натисніть Почати оптимізацію, щоб зменшити їхній розмір масово:

Ви також можете налаштувати запуск планової оптимізації з меню "Розширені налаштування" плагіна.

Зверніть увагу:

  • Масова оптимізація тимчасово може використовувати багато ресурсів сервера і досягати лімітів CPU.

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

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

  • TinyPNG — Відмінно підходить для стиснення PNG і JPEG.

  • Compressor.io — Працює з багатьма форматами та забезпечує сильну оптимізацію.

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

Плагіни кешування

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

Деякі з найпопулярніших і найнадійніших варіантів:

Кешування у браузері

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

Ви можете налаштувати кешування у браузері кількома способами:


1. Використання W3 Total Cache

Якщо ви вже використовуєте W3 Total Cache, увімкнути кешування у браузері дуже просто:

  1. У панелі керування WordPress перейдіть у Performance > Browser Cache.

  2. Позначте опції, наприклад:

    • Встановити заголовок Last-Modified.

    • Встановити заголовок expires.

    • Увімкнути HTTP (gzip) стиснення.

  3. Збережіть налаштування:

W3TC автоматично додасть необхідні правила у ваш файл .htaccess.

2. Додавання правил вручну

Якщо ви не хочете використовувати плагін, можете увімкнути кешування у браузері, відредагувавши файл .htaccess напряму (для серверів Apache). Додавання такого коду встановлює "термін дії" для різних типів файлів:

ExpiresActive on

ExpiresByType image/jpg "access plus 60 days"

ExpiresByType image/png "access plus 60 days"

ExpiresByType image/gif "access plus 60 days"

ExpiresByType image/jpeg "access plus 60 days"

ExpiresByType text/css "access plus 2 weeks"

ExpiresByType image/x-icon "access plus 2 weeks"

ExpiresByType application/pdf "access plus 1 month"

ExpiresByType audio/x-wav "access plus 1 month"

ExpiresByType audio/mpeg "access plus 1 month"

ExpiresByType video/mpeg "access plus 1 month"

ExpiresByType video/mp4 "access plus 1 month"

ExpiresByType video/quicktime "access plus 1 month"

ExpiresByType video/x-ms-wmv "access plus 1 month"

ExpiresByType application/x-shockwave-flash "access 1 month"


ExpiresByType text/javascript "access plus 2 weeks"

ExpiresByType application/x-javascript "access plus 2 weeks"

ExpiresByType application/javascript "access plus 2 weeks"


Ви можете змінювати значення часу залежно від того, як часто оновлюєте файли.

Поради з оптимізації сайту

Оптимізація головної сторінки

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

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


Інструменти для зменшення кількості запитів і прискорення завантаження

  • WP Asset Clean Up
    Цей плагін сканує сторінки та визначає зайві скрипти й стилі, не дозволяючи їм завантажуватися там, де це не потрібно. Також може мінімізувати HTML-код для чистіших і легших сторінок.

  • JavaScript to Footer
    Переміщує JavaScript-файли з заголовка у підвал сторінки, щоб вони не затримували початкове відображення. Це дозволяє спочатку завантажити видиму частину сторінки, підвищуючи відчутну швидкість.


Найкращі практики для швидкої головної сторінки

  1. Уникайте надлишкових віджетів — Наприклад, кнопки соціальних мереж краще розміщувати у блозі, а не на головній.

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

  3. Обмежте кількість записів на сторінці — Залиште близько п’яти останніх записів для оптимальної швидкості та зручності.


Виправлення блокуючого рендеринг JavaScript і CSS

Під час тестування сайту у Google PageSpeed Insights ви можете побачити попередження на кшталт:

"Eliminate render-blocking JavaScript and CSS in above-the-fold content"

Це означає, що деякі JavaScript- або CSS-файли затримують відображення видимої (above-the-fold) частини сторінки. Простіше кажучи, браузери ваших відвідувачів повинні дочекатися завантаження цих файлів, перш ніж показати контент, що сповільнює роботу сайту.

Рішення з W3 Total Cache (W3TC)

Ви можете виправити це, налаштувавши параметри Minify у W3 Total Cache:

  1. Перейдіть у Performance > General Settings у панелі керування WordPress.

  2. У розділі Minify встановіть Minify mode на Manual і збережіть зміни:


  3. Далі відкрийте меню Performance > Minify і переконайтеся, що налаштування мінімізації JavaScript відповідають рекомендованій конфігурації:


  4. Додайте URL-адреси JavaScript-файлів, позначені Google PageSpeed, у розділ JS file management:


  5. Повторіть процес для CSS-файлів — додайте позначені URL-адреси CSS у розділ CSS file management:

Після цього протестуйте ваш сайт знову в PageSpeed Insights. Якщо все налаштовано правильно, попередження про блокування рендерингу має зникнути.

Альтернатива: плагін Autoptimize

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

  • Об'єднувати та мінімізувати JavaScript і CSS-файли

  • Переміщати CSS і JS для покращення порядку завантаження

  • Мінімізувати HTML для полегшення сторінок

  • Працювати разом із плагінами кешування, такими як WP Super Cache, для ще кращих результатів.

Ключові налаштування Autoptimize:

  • Опції JavaScript – об'єднувати кілька JS-файлів в один для зменшення кількості запитів

  • Опції CSS – вбудовувати критичний CSS, кодувати невеликі зображення безпосередньо в CSS та інше

  • Опції HTML – мінімізувати HTML із можливістю збереження коментарів

  • Опції CDN – встановити базову URL-адресу CDN для швидшого завантаження статичних файлів

  • Вкладка "Зображення" – автоматично стискати та оптимізувати зображення

  • Додатково / Оптимізувати більше – додаткові розширені налаштування для досвідчених користувачів.

Щоб розблокувати всі функції:

  1. Перейдіть у Налаштування > Autoptimize > натисніть Показати розширені налаштування:


  2. Відкоригуйте опції відповідно до потреб вашого сайту:


  3. Натисніть Зберегти зміни та очистити кеш, щоб застосувати оптимізації:

Увімкнення захисту від хотлінку

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

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

Найпростіший спосіб зупинити хотлінг — увімкнути захист від хотлінгу у вашому cPanel. Це можна зробити з меню Hotlink Protection:


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

Оптимізація бази даних

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

За замовчуванням WordPress використовує 11 основних таблиць, але більшість сайтів мають додаткові таблиці, створені плагінами та темами. Регулярна оптимізація бази даних допомагає підтримувати її чистоту, ефективність і швидкість.

Щоб оптимізувати базу даних WordPress:

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

  2. Використовуйте спеціалізований плагін для швидкої та безпечної оптимізації, наприклад:

    • WP-Optimize — Виконує прямі SQL-запити для очищення (швидко, але може залишати осиротілі дані).

    • Optimize Database after Deleting Revisions — Спрямований на очищення старих версій записів.

    • WP-Sweep — Використовує офіційні функції видалення WordPress, зменшуючи ризик залишення осиротілих даних.

    • WP-DB Manager — Пропонує функції оптимізації та резервного копіювання.


Оцінка продуктивності вашого сайту на WordPress

Плагіни розширюють можливості WordPress, додаючи додаткові функції та опції налаштування. Однак деякі плагіни можуть негативно впливати на продуктивність, споживаючи надмірно багато CPU та I/O ресурсів.

Щоб забезпечити ефективну роботу сайту, важливо вимірювати вплив плагінів і тем.

Крок 1 — Аналіз використання ресурсів

Використовуйте плагін Code Profiler для сканування сайту на рівні PHP. Він надає чіткі, детальні звіти з діаграмами та таблицями, які показують:

  • Які плагіни або теми сповільнюють ваш сайт;

  • Які саме PHP-скрипти, класи, методи та функції споживають найбільше ресурсів.

Крок 2 — Керування завантаженням плагінів

Встановіть плагін Plugin Organizer для:

  • Вимкнення окремих плагінів на вибраних сторінках або записах

  • Зміна порядку завантаження плагінів

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

Крок 3 — Перевірка загальної оптимізації сайту

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




Потрібна дійсна адреса електронної пошти