Як збільшити швидкість завантаження сторінок сайту на WordPress за допомогою Google PageSpeed Insights

Швидкість завантаження сайту – сірий кардинал, який впливає на конверсії, динаміку індексації сторінок, приплив користувачів з пошуку та їх лояльність. Але як визначити цю саму швидкість? Найбільш популярний інструмент перевірки, який використовують веб-майстри – Google PageSpeed ​​Insights. 

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

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

Компанія HostPro надає для української аудиторії сервери в Україні, європейської – в Європі, американської – в США. Накопичений нами досвід у прискоренні сайтів дозволяє забезпечувати їх стабільну роботу. А регулярна оптимізація та інтеграція нових функцій в хостинг покращує послуги, що надаються, розвиває їх відповідно до інновацій ринку і потреб користувачів. 

Але, повернімося до прискорення роботи сайту, а саме до сервісу PageSpeed ​​Insights. Компанія Google розробила цей інструмент для аналізу продуктивності сторінок за:

– конфігураціями сервера;

– HTML-структурою сторінки;

– використанням зовнішніх ресурсів (таких як зображення, Javascript і CSS).

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

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

Сайти оцінюються за шкалою від 0 до 100 балів. Кожна оцінка відзначена окремим кольором, залежно від рівня важливості: червоний, жовтий і зелений. 

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

Ось, що вам потрібно зробити в першу чергу:

Час відповіді сервера

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

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

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

Зменшіть кількість плагінів

Серед усього іншого, наявність занадто великої кількості погано закодованих плагінів може негативно впливати на час відгуку сервера. Щоб перевірити, які плагіни уповільнюють ваш сайт, використовуйте плагін P3 (Plugin Performance Profiler). Це дасть вам список всіх тих, хто створює проблеми. На жаль, цей плагін несумісний з PHP7. 

Кеш браузера 

Деякі елементи веб-сайту, щоб спростити завантаження, можуть бути тимчасово збережені (кешовані). Завантаження некешованого контенту (HTML, CSS, логотип, зображення) значно уповільнює роботу. Не дивно, що це виправлення номер один, якщо ви хочете поліпшити показник PageSpeed ​​Insights.

Кешування для сайтів WordPress налаштовується як безкоштовними плагінами, так і плагінами преміум-класу. Пропонуємо спробувати або W3 Total Cache (безкоштовне рішення), або скористатися WP Rocket (платне рішення).

Стиснення зображень

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

Перший метод – стиснення ресурсів за допомогою deflate.

Він не вплине на продуктивність движка, але прискорить час відгуку.

Apache

Додайте наступний код в ваш файл .htaccess:

# compress text, html, javascript, css, xml:

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:

<files *.html>

SetOutputFilter DEFLATE

</files>

або

<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

 # Remove browser bugs (only needed for really old browsers)
 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>

Другий метод включення gzip-стиснення в WordPress. Необхідно додати php-код першим рядком в файл header.php вашої теми оформлення:

<?php if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) ob_start(“ob_gzhandler”); else ob_start(); ?>

Nginx

Включити стиснення можна, додавши в файл nginx.conf наступного коду:

gzip on;

gzip_comp_level 2;

gzip_http_version 1.0;

gzip_proxied any;

gzip_min_length 1100;

gzip_buffers 16 8k;

gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

gzip_disable “MSIE [1-6].(?!.*SV1)”;

gzip_vary on;

Видаліть код JavaScript і CSS, блокуючий відображення верхньої частини сторінки
В даному випадку Google PageSpeed ​​Insights повідомляє нам про те, що зміст у верхній частині сторінки відображається тільки після завантаження JavaScript або CSS.

Існує три сценарії проблем доступу, з якими зіштовхується більшість: файли JavaScript/CSS, шрифт Font Awesome і шрифти Google.

Файли

Перша проблема, з якою доводиться мати справу – це те, що всі наші Javascript і CSS-файли знаходяться вище фолда і створюють блокуючий рендерінг. Щоб виправити це, потрібен плагін Autoptimize.

Збережіть наведені нижче налаштування:

У розділі «Параметри JavaScript» зніміть прапорець «Використовувати JavaScript в <head>?»

У розділі параметри “CSS” установіть прапорець “Вставити все CSS?”.

Font Awesome

Font Awesome завантажуються супер швидко, якщо хостити їх на власному CDN.

Посилання на ваш файл Font Awesome, яке використовує CDN URL, повинне мати такий вигляд:

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

Google-шрифти

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

Потім потрібно включити шрифт Google з наступним кодом в нижньому колонтитулі, прямо перед тегом </ body>.

<link href=’https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700,700italic’ rel=’stylesheet’ type=’text/css’>

Ви також можете асинхронно завантажувати шрифти Google за допомогою веб-завантажувача Google. Просто розмістіть наступний код в нижньому колонтитулі.
<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>

Скоротіть CSS

Більшість CSS вимагає додаткового часу для завантаження, тому зменшення ваги CSS-коду також допоможе поліпшити показник PageSpeed ​​Insights.

Безкоштовні легковагові рішення, які дійсно ефективні для мінімізації JavaScript, CSS і HTML – Autoptimize, Better WordPress Minify. Просто встановіть одне із них і налаштуйте потрібні параметри.

В налаштуваннях плагіна вам потрібно буде перевірити наступне:

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

– Оптимізація коду JavaScript

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

Примітка:

– У WordPress код CSS найкраще розміщувати вгорі, а Javascript внизу.

Після закінчення робіт проведіть фінальне тестування сайту на наявність помилок і можливих проблем. 

Висновок

Рекомендації Google PageSpeed ​​Insights досить цінні. Але пам’ятайте, не потрібно зациклюватися на досягненні показника 100 зі 100. Досягти очікуваних результатів іноді буває неможливо в силу індивідуальних налаштувань середовища. І повірте – це не кінець світу. Краще просто зробити якомога більше заходів оптимізації вашого індивідуального середовища. Сподіваємося, що дотримуючись рекомендацій PageSpeed ​​Insights, ви досягнете хороших результатів, які перетворяться на конверсії та цільові дії на сайті.

Ми розглянули тільки один інструмент, який показує, як прискорити сайт на WordPress. Коли потрібно оцінити зміни і отримати повне уявлення про те, що впливає на швидкість завантаження сайту, користуються також сервісами Pingdom і GTmetrix. Але про них та інші інструменти ми поговоримо в окремій статті.

Розкажіть нам в коментарях, яку оцінку отримав ваш сайт в Google PageSpeed ​​Insights? Які заходи ви ввели і яких результатів досягнули?