Створення сайтів Львів067 607 57 84
МЕНЮ

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

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

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

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

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

Розберемо перераховані методи прискорення веб-ресурсів докладніше.

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

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

Включити кеш браузера в 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 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:

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

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

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

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