WordPress – найпопулярніший двигун сайту в світі. На цій CMS працює більше 75-ти мільйонів сайтів: блоги, інформаційні ресурси, інтернет-магазини. Й усім потрібна швидкість. Щошвидше, то краще.
Наші клієнти часто звертаються до Promodo з проханням проконсультувати, на якому «двигуні» ліпше створювати сайт. Зібрали невелику базу знань з цього питання та розсортували найпопулярніші системи управління за потребами ритейлерів з різних вагових.
Чому швидкість завантаження сайту настільки важлива
У вас повільно завантажується сайт, але є відмінний блог та User Friendly Interface? Шкода, клієнт про це ніколи не дізнається. Він закриє його раніше, ніж побачить контент. А пошукові роботи після цього ще й занизять сторінку у видачі. За даними Akamai, низька швидкість завантаження сайту здатна зіпсувати думку про компанію у 35% користувачів, а 22% відвідувачів не повернуться до сторінки, що працює неналежним чином. Швидкість завантаження також впливає на індексацію нових сторінок. Повільний сайт довше віддає контент, отже пошукові роботи витрачають більше часу на обробку всіх сторінок. Як результат, нові сторінки будуть пізніше з'являтися у видачі Google.
Плюс, з травня 2021 Google під час ранжирування сайтів спиратиметься на Core Web Vitals. До цього набору факторів входить три параметри, які відображають швидкість появи найоб’ємнішого елемента сторінки, її інтерактивність та стабільність роботи. Тобто пошукова система буде відображати в числовому значенні, наскільки зручно користувачу працювати з сайтом.
Як виміряти швидкість завантаження сайту
Тут допоможуть спеціальні інструменти:
- Google PageSpeed Insights та пункт в консолі Chrome Lighthouse
- Pingdom
- GTmetrix
Розберемо на прикладі, як видає рекомендації щодо прискорення сайту Google PageSpeed, і які параметри входять до Core Web Vitals. Вводимо потрібний URL на сторінці PageSpeed, натискаємо «Аналізувати» та вибираємо результат для комп’ютерів. Найважливіші показники виводяться першими:
- First Contentful Paint
- Largest Contentful Paint
- First Input Delay
- Cumulative Layout Shift
First Contentful Paint – швидкість першого відгуку. FCP демонструє, через скільки секунд після кліка на посилання у користувача на екрані з’являються перші ознаки того, що сайт завантажується. Якщо «ознаки життя» з’явилися менш ніж через секунду – це відмінний показник. Якщо на сторінці нічого не відбувається через три секунди – це поганий знак. Швидше за все, користувач вже закрив вкладення.
Largest Contentful Paint – швидкість завантаження основного контенту. LCP показує, як швидко користувач побачить ключову інформацію на сторінці і зможе оцінити, чи відповідає контент його запиту. Ідеальний показник – завантаження менше ніж за 2,5 секунди. Якщо час завантаження сторінки перевищує чотири секунди, ви можете втратити потенційного покупця.
First Input Delay — час відгуку на дію клієнта. FID показує, з якою швидкістю елементи сторінки відповідають, коли по ним клікає відвідувач. Значення менше ста мілісекунд каже, що для користувача перехід на іншу сторінку або відкриття картинки виглядає моментальним. Коли елемент реагує на клік через триста і більше мілісекунд, виникає відчуття, що сайт підвисає.
Cumulative Layout Shift – показник стабільності сторінки. CLS вимірюється в балах і показує, як часто користувач може бачити зміщення контенту або окремих елементів на сторінці під час її завантаження.
Наприклад, ви почали читати статтю, але раптово над нею виникає банер або повідомлення, і рядки тексту зсуваються вниз. Або ви готові поставити курсор в поле для пошуку, а його зрушує меню навігації, і ви несподівано відкриваєте один з розділів. Щорідше таке відбувається, то більш стабільною вважається сторінка. При значенні 0,25 і вище – сторінка вважається нестабільною.
Останні три параметри – LCP, FID та CLS – це і є основа Core Web Vitals. Окрім них в звіті подано значення параметрів, які імітують завантаження сторінки:
- First Contentful Paint
- Speed Index
- Largest Contentful Paint
- Time to Interactive
- Total Blocking Time
- Cumulative Layout Shift.
Щоб вивчити значення цих параметрів, перейдіть в сервісі в розширений режим відображення. Для цього клікніть на значок зs смужками праворуч від напису «Імітація завантаження сторінки».
Google надасть рекомендації, як прискорити завантаження вашого сайту, грунтуючись на помилках, які він виявив. Поради для кожного ресурсу індивідуальні, але вони не є вичерпними, спиратися виключно на них не варто.
Стандартні способи прискорення сайту на WordPress
Окрім рекомендацій PageSpeed Insights і інших сервісів, існують універсальні способи прискорити сайт на WordPress. Якщо ви зіткнулися з низькою швидкістю завантаження сторінок, ці пункти варто перевірити передусім.
Серверне та браузерне кешування
Кешувати дані можна за допомогою браузера і на боці сервера. Під час браузерного кешування клієнт не стане кожного разу звертатися до сервера, щоб завантажити сторінку. Після першого відвідування сайту дані про нього будуть збережені в пам’яті комп’ютера, завдяки чому кожне наступне завантаження займатиме менше часу. Кешування в браузері вмикаємо за допомогою хедера Expires.
Під час серверного кешування плагіни створюють HTML-файли, які зберігаються в пам’яті. Коли до сервера звертаються вдруге, йому не потрібно знову довантажувати скрипти сайту – вони вже зібрані в HTML-файлі.
Популярні WordPress-плагіни для кешування:
Використання CDN
Content Delivery Network (CDN) – це кластер з серверів, які знаходяться в різних точках світу та передають інформацію про сайт з найближчої до користувача машини. За рахунок цього територіальна близькість між сервером і клієнтом допомагає прискорити завантаження сайту.
Це витратний спосіб прискорити швидкість сайту, якщо використовувати власне обладнання. Він виправданий для міжнародних компаній з клієнтами та дистрибуцією у віддалених один від одного країнах. Місцевим блогам та інтернет-магазинам краще розглянути інші способи оптимізації. Міжнародним компаніям, у яких ще немає великих бюджетів, можна безкоштовно налаштувати CDN для WP за допомогою плагіна W3 Total Cache та сервісу Cloudflare.
Оптимізація коду
Пробілами та коментарями в коді CSS і JavaScript можна пожертвувати, оскільки вони малокорисні, але збільшують вагу сайту. Відстежити появу нових рядків та зайвих пробілів складно. Автоматизувати процес допоможуть плагіни:
Також сайт буде завантажуватися швидше, якщо розміщувати CSS-файли на початку сторінки, а JS-файли – в кінці. Тоді браузер почне обробляти скрипти після того, як завантажить вміст сторінки.
Плагіни оптимізації
Оптимізувати можна не лише код і завантаження сторінок, але й контент. Для цього використовують сторонні сервіси або плагіни для зменшення зображення:
Щоб полегшити плагінам завдання та вплинути на фінальний результат, використовуйте для фотографій формат JPEG, для іконок – SVG, ілюстрацій – PNG. Також набуває популярності формат WebP, оскільки при аналогічній якості він «легший» за PNG і JPEG – на 26% і 34% відповідно. Про це говорять дослідження, проведені Google.
Інші плагіни, які оптимізують роботу сайту, – Clearfy, WP-Optimize, Easy&Fast Optimization. Вони діють за принципом CCleaner, видаляючи дублі сторінок та застарілу інформацію з баз даних.
Потужніше залізо
Низька продуктивність сайту не завжди пов’язана з його оптимізацією. Інтернет-магазин або блог можуть працювати повільніше, бо що хостинг не задовольняє їхні потреби у розрізі CPU або оперативної пам’яті. Якщо ви позбулися зайвих плагінів та непотрібних запитів в базі даних, але не отримали бажаного результату, є сенс перейти на більш високий тарифний план або на інший вид хостингу. Компанія HOSTiQ пропонує віртуальний, хмарний, VPS та shared хостинг під різні цілі.
Способи прискорення сайту, про які зазвичай забувають
Якщо хостинг найбільш прийнятний, ви випробували усі перераховані методи, а швидкість завантаження не зросла – спробуйте методи прискорення сайту, про які згадують не відразу.
Знизити кількість версій постів
WordPress зберігає всі версії постів та чернеток, які ви створюєте. Це корисна функція, але навряд вам знадобиться історія публікацій з початку часів.
Обмежте кількість версій 3-5-ми, в залежності від частоти оновлень та можливих потреб. Зробити це можна через файл wp-config.php. Пропишіть в ньому рядок: define( ‘WP_POST_REVISIONS’, 7 ). Де 7 – це кількість версій постів.
Якщо зберігати версії вам не потрібно, вимкніть цю функцію за допомогою параметра false: define( ‘WP_POST_REVISIONS’, false ).
Розбити коментарі на сторінки
Щобільше коментарів під постом, то цікавіша тема та більш популярний сам ресурс. Велика кількість коментарів підвищує імідж та зменшує швидкість роботи сайту. Щоб спілкування з користувачами і між користувачами не перевантажували сайт, розбийте коментарі на сторінки:
- зліва на панелі управління виберіть меню «Налаштування»;
- в налаштуваннях натисніть «Обговорення» – «Інші налаштування коментарів»;
- поставте пташечку біля «Розбивати коментарі верхнього рівня на сторінки» та впишіть, яку кількість коментарів бажаєте бачити на сторінці.
Цей прийом добре працює з відгуками: відвідувачі бачать найбільш свіжі з них і можуть перейти на іншу сторінку, щоб прочитати більш давні.
Налаштувати захист від хотлінкінгу
Хотлінк – це пряме посилання на файли з вашого сайту, розміщене на сторонньому ресурсі. Етичне питання хотлінкінга чіпати не станемо, оскільки нас цікавить інший побічний ефект цього явища – уповільнення швидкості вашого сайту. Коли завантажується сторонній сайт, що містить посилання на ваші зображення або відео, він звертається до вашого хостинг-сервера за цим контентом. Це створює навантаження, яка забирає ресурси і не приносить вигоди.
Один з методів захисту від хотлінкінгу – налаштувати правила в CDN. Інший спосіб – використовувати плагіни для WP:
- All in One WP Security and Firewall
- Secure Copy Content Protection
- WP Content Copy Protection & No Right Click
Заборонити індексацію для небажаних ботів
Потрапити до індексу пошукової системи – заповітна мета будь-якого сайту. Та щобільше сторінок потрібно обробити пошуковим роботам, то більше навантаження вони створюють на сервері. Щоб не випасти з видачі потрібної вам системи та не перевантажити сайт, забороніть індексацію непотрібним сайтам. Наприклад, ви хочете, щоб ваш сайт потрапив до видачі Google, але вам ні до чого запити від Yahoo. Тоді в файлі robots.txt або .htaccess треба заборонити індексацію для небажаних ботів.
Якщо сайт знаходиться в розробці або на редизайні, і вам зовсім не потрібно, щоб його індексували, зробіть його «невидимим». Виберіть в налаштуваннях пункт «Читання» – «Видимість для пошукових систем» і поставте пташку у полі «Попросити пошукові системи не індексувати сайт». Так ви закриєте сайт від всіх пошукових роботів.
Аналогічний ефект дають плагіни Wordfence та Password Protected Plugin. Переконайтеся, що такий крок виправданий та необхідний, адже відвідувач повинен якось дізнатися про сайт, щоб зайти на нього.
Використовувати свіжу версію РНР
На продуктивності сайту більш відчутно позначається сам код, ніж версія мови, на якій його написали. Проте, починаючи з сьомої версії PHP і вище, передбачена функція OPcache, яка дає приріст продуктивності сайту. Тому писати оптимізований і структурований код краще на свіжій версії PHP.
Перейти на HTTP/2
HTTP/2 протокол побудовано в бінарному, а не текстовому форматі, тож він створює менше навантаження на канал під час передачі файлів. Завдяки цьому сайт, що працює за протоколом HTTP/2, швидший за сайт на HTTP/1.
Варто зазначити, що HTTP/2 підходить для сайтів з SSL/TLS і не підійде для ресурсів, де йде робота з великими файлами, відео- та аудіопотоками. Крім того, використання HTTP/2 буде гальмувати завантаження сайту через мобільний інтернет.
на розсилку