Оптимізація сайту на WordPress для Google PageSpeed

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

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

Увімкнення кешу браузера

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

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

1. За допомогою налаштування файлу .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>
2. Використовуючи плагіни. Для увімкнення кешування є як безплатні рішення, на кшталт W3 Total Cache, WP Super Cache та ін., так і платні модулі (WP Rocket).

Іноді Google PageSpeed Insights рекомендує ввімкнути кеш для сервісів статистики пошукових систем або Google Analytics. Ці дані кешуються спочатку, але з невеликим інтервалом часу, тому особливо не уповільнюють завантаження веб-ресурсу. Прямого доступу до цих зовнішніх скриптів сайту немає, хіба що можна встановити плагін Complete Analytics Optimization Suite і тоді бібліотека сервісу веб-аналітики Гугл стане локальною.

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

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

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

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

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

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

Відповідна робота в Autoptimize зводиться до встановлення галочок навпроти двох пунктів – “Оптимізувати код CSS?” і “Оптимізувати код JavaScript?”.

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

Крім цього рекомендується подбати і про правильне розташування JavaScript і CSS щодо іншого вмісту. CSS краще розмістити на початку, а JS-файли – в кінці сторінки. У такому разі і зовнішній вигляд, і швидкодія веб-ресурсу викличе тільки позитивний відгук користувачів.

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

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

Рішенням може стати налаштування асинхронного завантаження, за якого замість послідовного відображення контенту сторінки, “найважчі” файли JavaScript запускаються останніми. Для прискорення використовується скрипт Google ExtSrcJs (змінюється код <script src=”…”> на <script extsrc=”…”>, а також підключається файл extsrc.js.

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

Ще простіше позбутися блокування або уповільнення відображення сторінки за допомогою згадуваного раніше плагіна Autoptimize. У розділі опцій Javascript необхідно зняти галочку для пункту “Force JavaScript in?”. А в опціях CSS потрібно зробити активним пункт “Inline all CSS?”.

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

На відображення сторінок негативно впливають не тільки “важкі” файли 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>

Альтернативний варіант прискорення завантаження шрифтів Google – встановлення спеціального плагіна Disable Google Fonts.

Але не варто забувати і про “дідівський” метод, підключення Google шрифтів безпосередньо, для цього слід завантажити веб-версію необхідного шрифту, додати його на сервер і підключити в css файлі.

Також прискорити завантаження Font Awesome і Google Fonts дає змогу їхнє переведення на Content Delivery Network (CDN). Це віддалені сервери, які сприяють блискавичній передачі даних.

На CDN нерідко переносять також JS-скрипти і важку графіку, залишаючи на основному хостингу веб-ресурсу тільки HTML-код. Приклад посилання на шрифти Font Awesome у Content Delivery Network:

<link href="https://cdn.simple.com/css/font-awesome-4.4.0.min.css" rel="stylesheet">.

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

Для движка WordPress “легкість” або “важкість” веб-ресурсу багато в чому визначає обрана тема оформлення. Якщо за відчуттями швидкість завантаження сторінок низька (як і оцінка в Google PageSpeed), то доцільно підібрати більш спритну альтернативу.

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

1. Видаляйте із сервера всі непотрібні графічні файли. Якщо графіка багато важить, але не надто інформативна, то її варто замінити текстом.
2. За можливості використовуйте зображення формату JPEG. Їхнє стиснення не передбачає погіршення якості картинки. Приємний зовнішній вигляд матиме навіть файл, який зменшений на 25-40% на тлі вихідного.
3. Не застосовуйте занадто часто PNG з метою отримання прозорого ефекту. Стискати ці файли доведеться практично вручну, використовуючи такі графічні редактори, як Photoshop, Compresspng або PNGout. Також ви можете використовувати онлайн-сервіси для стиснення, наприклад TinyPNG / TinyJPG.
4. Також ви можете використовувати плагіни для стиснення графічних файлів у самому WordPress, такий, наприклад, як WP Smush.
5. Позбавляйтеся від різного “сміття” в графічному матеріалі – коментарів від дизайнерів, надлишкових палітр тощо. Допомогти в цьому здатен сервіс Smush.it.
6. Не масштабуйте розміри картинок, застосовуючи width і height або CSS. Один графічний файл, що змінює розміри, важить досить багато і довго завантажується. Краще додати відразу кілька зображень, які адаптовані під різні девайси (стаціонарний комп’ютер, смартфон, планшет). Тим паче, що у функціоналі WordPress закладена можливість використання зображень із різною роздільною здатністю залежно від роздільної здатності екрана. Для автоматизації завантаження потрібної картинки, використовуйте плагін для WordPress – Imager.

Активізація стиснення на стороні сервера

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

Увімкнути Gzip можна, звернувшись до технічної підтримки хостинг-провайдера. Також є можливість виконати активацію своїми силами: у разі якщо ваш сервер працює на Apache, ви можете прописати у файлі .htaccess такі рядки:

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Видалити помилки браузера (потрібно тільки для дуже старих браузерів)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

Альтернативний спосіб усунення проблем на стороні сервера – перехід на сучасніший і швидший хостинг із розширеними можливостями налаштування.

Інші роботи на сайті з підвищення швидкості

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

• налаштування Nginx/Apache;
• активне використання CDN;
• оптимізація бази даних (видалення ревізій, зайвих таблиць, спаму тощо);
• налаштування протоколів передачі даних, зокрема HTTP/2 і TCP;
• скорочення кількості перенаправлень (301-го редиректу).

До інших налаштувань самої системи управління контентом належить таке:

• видалення невикористовуваних плагінів WordPress, здатних уповільнювати завантаження;
• позбавлення від рядків запитів;
• ручні налаштування виконання скриптів тощо.
• завантаження бібліотек css і js тільки на сторінках, де вони використовуються.

Після того, як оптимізацію виконано, слід повторити тестування в Google PageSpeed Insights, щоб дізнатися нову оцінку швидкодії та виключити інші помилки або проблеми.

Підбиваємо підсумки

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

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