Google PageSpeed: 5 способів прискорення роботи WordPress

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

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

ОСНОВНІ СПОСОБИ ОПТИМІЗАЦІЇ ШВИДКОСТІ ЗАВАНТАЖЕННЯ САЙТУ:

• Включення кешу в браузері.
• Оптимізація HTML‑коду.
• Зменшення та оптимізація файлів JavaScript і CSS.
• Видалення CSS і JS, що блокують відображення сторінки.
• Налаштування завантаження шрифтів. Оптимізація теми та картинок у WP.
• Увімкнення стиснення на сервері.
• Інші роботи для підвищення швидкості сайту.

Усі ці методи допомагають отримати високі оцінки в Google PageSpeed, тож розглянемо їх докладніше.

Включення кешу браузерів

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

У WordPress включити кеш браузера можна кількома способами:

• Через файл .htaccess. У модулі expires <IfModule mod_expires.c> задаються правила кешування для різних типів файлів — картинок, тексту, HTML, скриптів. Для кожного контенту можна вказати термін зберігання, наприклад для зображень: ExpiresByType image/gif access plus 1 month.
  <IfModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault “access plus 10 days”
  ExpiresByType text/css “access plus 1 week”
  ExpiresByType text/plain “access plus 1 month”
  ExpiresByType image/gif “access plus 1 month”
  ExpiresByType image/png “access plus 1 month”
  ExpiresByType image/jpeg “access plus 1 month”
  ExpiresByType application/x-javascript “access plus 1 month”
  ExpiresByType application/javascript “access plus 1 week”
  ExpiresByType application/x-icon “access plus 1 year”
  </IfModule>
• Використання плагінів. Є безкоштовні рішення, як W3 Total Cache чи WP Super Cache, а також платні модулі на кшталт WP Rocket.

Усі ці методи допомагають отримати кращі результати в Google PageSpeed та підвищити швидкість сайту.

Оптимізація HTML-коду

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

Напівавтоматичний спосіб передбачає використання Google PageSpeed Insights: після аналізу швидкодії достатньо натиснути «Скоротити HTML» і «Переглянути вміст», замінивши старий код на оптимізований. Але цей метод підходить лише для невеликих ресурсів із простим функціоналом.

Для WordPress існують простіші автоматизовані рішення. Безкоштовні плагіни, як Better WordPress Minify чи Autoptimize, дозволяють мінімізувати HTML і прискорити сторінки, виконуючи лише базові налаштування.

Скорочення розмірів та оптимізація файлів JavaScript і CSS

CSS і JavaScript часто стають причиною повільного відкриття сторінок. Зменшення їхнього розміру шляхом видалення переносів, пробілів і коментарів є важливим етапом оптимізації під Google PageSpeed. Оптимізація CSS та JS‑файлів виконується аналогічно до HTML. Для цього зручно використовувати популярні безкоштовні плагіни, такі як Autoptimize та WP Minify Fix.

Робота з Autoptimize зводиться до простого вибору двох пунктів — «Оптимізувати CSS» та «Оптимізувати JavaScript».

Якщо сайт оновлюється рідко, основні css і js файли краще мінімізувати вручну через онлайн‑сервіси, наприклад cssminifier.com для css та jscompress.com для js. Таких рішень багато, і всі вони легко справляються із завданням.

Також важливо правильно розташувати CSS і JavaScript відносно іншого контенту: стилі варто ставити на початку, а скрипти — в кінці сторінки. Це підвищує швидкодію та допомагає отримати кращі результати в Google PageSpeed, забезпечуючи позитивний досвід для користувачів.

Видалення коду CSS та JS, який блокує відображення сторінки

Часто швидкодія сайту падає через те, що CSS чи JS‑файли блокують завантаження верхньої частини контенту.

Вирішенням є асинхронне завантаження, коли «важкі» JavaScript запускаються останніми. Для цього застосовують скрипт Google ExtSrcJs, змінюючи <script src="..."> на <script extsrc="..."> та додаючи файл extsrc.js.

Можна також налаштувати підвантаження другорядних css після відкриття сторінки, винісши ключові стилі для верхньої частини екрану в html.

Ще простіше уникнути блокування допоможе плагін Autoptimize. У налаштуваннях Javascript слід зняти галочку з «Force JavaScript in?», а в опціях CSS активувати «Inline all CSS?». Це дозволяє отримати кращі результати в Google PageSpeed і прискорити відображення сайту.

Налаштування завантаження шрифтів

На швидкість відображення сторінок впливають не лише «важкі» JavaScript і CSS, а й шрифти Google та Font Awesome. Вони можуть уповільнювати ресурс і блокувати контент.

Основний спосіб оптимізації — асинхронне завантаження через Google Font Loader із додатковим кодом у футері.

<script type=”text/javascript”>
WebFontConfig = {
google: { families: [ ‘Noto+Serif:400,400italic,700,700italic’ ] }
};
(function() {
var wf = document.createElement(‘script’);
wf.src = ‘https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js’;
wf.type = ‘text/javascript’;
wf.async = ‘true’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(wf, s);
})(); </script>

Альтернативою є плагін Disable Google Fonts, що прискорює завантаження. Також можна застосувати «класичний» метод — завантажити веб‑версію шрифту на сервер і підключити його в css. Це допоможе отримати кращі результати в Google PageSpeed та зменшити затримки.

Оптимізація теми і картинок, завантажених в WP

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

На продуктивність також впливає велика кількість графічних файлів. Основні поради щодо оптимізації зображень у WP:

• Видаляйте непотрібні картинки з сервера. Якщо графіка важка й малоінформативна, краще замінити її текстом.
• Використовуйте JPEG, адже стискання не погіршує якість і дозволяє зменшити вагу на 25–40%.
• PNG застосовуйте лише за потреби прозорості, стискаючи їх у Photoshop, Compresspng чи TinyPNG.
• Для автоматичного стиснення зображень у WordPress використовуйте плагіни, наприклад WP Smush.
• Позбавляйтеся від «сміття» у графіці — коментарів, зайвих палітр. Допоможе сервіс Smush.it.
• Не масштабуйте картинки через CSS чи атрибути width/height. Краще підготувати кілька адаптованих версій для різних пристроїв, використовуючи плагін Imager.

Такі дії підвищують швидкодію та допомагають отримати кращі результати в Google PageSpeed.