Від швидкості завантаження сайту прямо залежить поведінка користувачів і їх лояльність по відношенню до компанії, показники конверсії, позиції веб-ресурсу в пошуковій видачі. Залишати без уваги цей параметр неприпустимо. Насамперед потрібно виміряти швидкодію, а потім відповісти на питання, як збільшити швидкість завантаження сайту.
Популярним онлайн-інструментом, який вимірює і оцінює показник часу відкриття сторінок, є Google PageSpeed Insights. У цьому сервісі представлені і прямі підказки, як прискорити завантаження сайту. На прикладі веб-ресурсу на WordPress, давайте розберемося, як отримати найвищі оцінки в PageSpeed , а значить істотно підвищити шанси на більш високі місця в пошуку, збільшення трафіку і продажів.
Приклад аналізу нашого сайту
ОСНОВНІ СПОСОБИ ОПТИМІЗАЦІЇ ШВИДКОСТІ ЗАВАНТАЖЕННЯ САЙТУ:
- Включення кеша на стороні браузера.
- Оптимізація HTML-коду.
- Скорочення розмірів і оптимізація файлів JavaScript і CSS.
- Видалення коду CSS і JS, блокуючого відображення сторінки.
- Налаштування завантаження шрифтів.
- Оптимізація теми і картинок, завантажених в WP.
- Активізація стиснення на стороні сервера.
- Інші роботи на сайті з підвищення швидкості.
Розберемо перераховані методи прискорення веб-ресурсів детальніше.
ВКЛЮЧЕННЯ КЕШУ БРАУЗЕРА
Щоб сторінки сайту не завантажувалися кожен раз і не уповільнювали відкриття веб-ресурсу на пристрої користувача, потрібно налаштувати кешування. У цьому випадку вони одноразово зберігаються і потім протягом певного періоду часу «підтягуються» при завантаженні.
Включити кеш браузера в WordPress можна декількома способами:
- За допомогою налаштування файлу .htaccess. У модулі expires задаються значення для кешування різних типів файлів – картинок, тексту, 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 Insights рекомендує включити кеш для сервісів статистики пошукових систем (Я.Маркет) або Google Analytics. Ці дані кешуються спочатку, але з невеликим інтервалом часу, так особливо не уповільнюють завантаження веб-ресурсу. Прямого доступу до цих зовнішніх скриптів сайту немає, хіба що можна встановити плагін Complete Analytics Optimization Suite і тоді бібліотека сервісу веб-аналітики Google стане локальною.
ОПТИМІЗАЦІЯ 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: змінюється код
а також підключається файл extsrc.js.
Також можливо налаштувати підгруження вторинних css файлів після завантаження сторінки, але при цьому необхідно винести css, який відповідає за завантаження верхній частині екрану і помістити його в код html.
Ще простіше позбутися від блокування або уповільнення відображення сторінки за допомогою згадуваного раніше плагіна Autoptimize. У розділі опцій Javascript необхідно зняти галочку для пункту «Force JavaScript in?». А в опціях CSS потрібно зробити активним пункт «Inline all CSS?».
НАСТРОЙКА ЗАВАНТАЖЕННЯ ШРИФТІВ
На відображення сторінок негативно впливають не тільки «важкі» файли JavaScript і CSS, але і шрифти Google і Font Awesome. Вони сповільнюють сайт, а також можуть блокувати відображення вмісту.
Основний спосіб настройки шрифтів – використання асинхронної завантаження за допомогою Google Font Loader і вставки в footer додаткового коду.
<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
Сповільнювати роботу сайту може і велика кількість завантажених графічних файлів. Ось основні рекомендації з приводу оптимізації зображень на WP:
- Видаляйте з сервера всі непотрібні графічні файли. Якщо графіка багато важить, але не дуже інформативна, то її варто замінити текстом.
- По можливості використовуйте зображення формату JPEG. Їх стиск не передбачає погіршення якості картинки. Приємний зовнішній вигляд буде мати навіть файл, який зменшений на 25-40% на тлі вихідного.
- Не застосовуйте занадто часто PNG з метою отримання прозорого ефекту. Стискати ці файли доведеться практично вручну, використовуючи такі графічні редактори, як Photoshop, Compresspng або PNGout. Також ви можете використовувати онлайн-сервіси для стиснення, наприклад TinyPNG / TinyJPG
- Також ви можете використовувати плагіни для стиснення графічних файлів в самому WordPress, наприклад WP Smush.
- Позбавляйтеся від різного «сміття» в графічному матеріалі – коментарів від дизайнерів, надлишкових палітр і т.д. Допомогти в цьому здатний сервіс Smush.it.
- Не масштабуйте розміри картинок, застосовуючи 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, щоб дізнатися нову оцінку швидкодії і виключити інші помилки або проблеми.