Швидкість завантаження сайту – сірий кардинал, який впливає на конверсії, динаміку індексації сторінок, приплив користувачів з пошуку та їх лояльність. Але як визначити цю саму швидкість? Найбільш популярний інструмент перевірки, який використовують веб-майстри – 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? Які заходи ви ввели і яких результатів досягнули?