Прискорення сайту на WordPress

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

Ми прискорюємо сайти на WordPress і WooCommerce: вимірюємо, знаходимо причину гальм, виправляємо й показуємо цифри до і після. Працюємо і з сайтами, які зробили не ми — це наша звична практика.

Чому ми не обіцяємо «100 балів PageSpeed»

Таку обіцянку легко дати й неможливо чесно виконати. Пояснюємо, чому ми так не робимо.

Бал PageSpeed не впливає на позиції. У ранжуванні бере участь не він, а Core Web Vitals — дані про реальних відвідувачів вашого сайту за останні 28 днів. Бал у тесті рахується на синтетичному прогоні й до видачі стосунку не має. Буває, що в тесті 95, а в реальних користувачів червона зона — і навпаки.

Бал стрибає. Два прогони поспіль на тому самому сайті дають 92 і 78 — результат залежить від завантаженості тестового сервера Google. Обіцяти число, яке клієнт перевіряє кнопкою і щоразу бачить інше, — готовий конфлікт.

На живому сайті 100 недосяжно. Додайте аналітику, піксель реклами, онлайн-чат, карту проїзду й відео — і стеля буде близько 85–90. Щоб узяти 100, довелося б вимкнути те, заради чого сайт працює.

Тому ми обіцяємо інше — зелену зону за трьома показниками Google. Це вимірюється, це перевіряється і це те, що справді враховується у видачі.

Три показники, за якими Google оцінює сайт

• LCP — за скільки секунд з’являється головний блок екрана: заголовок, велике фото, перший екран. Зелена зона — до 2,5 секунди.
• INP — наскільки швидко сторінка відповідає на дію: натиснули кнопку, відкрили меню, поставили товар у кошик. Зелена зона — до 200 мілісекунд.
• CLS — чи стрибає верстка під час завантаження. Коли текст з’їжджає вниз і палець потрапляє не туди, куди цілився, — це воно. Зелена зона — up to 0.1.

Ці пороги встановив Google, вони однакові для всіх. Детальніше про те, як їх перевірити самостійно, ми писали в статті «Швидкість сайту: як перевірити й що виправляти першим».

What's Included in the Job

• Заміри до початку. Лабораторний прогін і польові дані з Chrome UX Report, якщо трафіку достатньо. Фіксуємо стан, щоб потім було з чим порівнювати.
• Сервер і хостинг. Версія PHP, час відповіді, стиснення, HTTP/2, кеш на рівні сервера. Часто найбільший виграш лежить саме тут і коштує найменше.
• Зображення. Переведення у WebP, правильні розміри під екран замість однієї величезної картинки на всі випадки, відкладене завантаження того, що нижче першого екрана.
• CSS і JavaScript. Об’єднання, мініфікація, критичний CSS у перший екран, відкладення решти. Прибирання файлів, які вантажаться на сторінках, де вони не потрібні.
• Плагіни. Ревізія: що реально працює, що дублює одне одного, що тягне половину мегабайта заради однієї кнопки. Найчастіша причина гальм на WordPress — саме тут.
• База даних. Чистка ревізій, прострочених транзієнтів і сміття від видалених плагінів, індекси під важкі запити.
• Кешування. Сторінковий кеш, кеш об’єктів, правила для кошика й кабінету — щоб покупець не побачив чужий кошик.
• Шрифти. Локальне розміщення замість запиту на чужий сервер, підвантаження заздалегідь, показ тексту до завантаження шрифту.
• Сторонні скрипти. Аналітика, пікселі, чати — відкладаємо так, щоб вони не блокували показ сторінки.
• Заміри після й звіт. Ті самі тести, що й на старті, плюс список зробленого зрозумілою мовою.

How the Work Is Done

• Діагностика. Дивимося сайт, робимо заміри, знаходимо причини. На виході — перелік проблем за вагою: що дає секунди, що десяті, а що взагалі не варте уваги.
• Погодження. Показуємо план і ціну до початку робіт. Якщо бачимо, що основна причина — хостинг, скажемо прямо: іноді переїзд дешевший за будь-яку оптимізацію коду.
• Копія сайту. Усі роботи робимо на окремій тестовій версії, бойовий сайт працює як працював.
• Перенесення. Після перевірки переносимо зміни на бойовий, з повним бекапом до початку.
• Контроль. Через 3–4 тижні дивимося польові дані: вони оновлюються з затримкою, і лише тоді видно справжній результат.

Гарантія: зелена зона або доопрацювання за наш рахунок

Якщо після робіт сайт не вийшов у зелену зону за Core Web Vitals — доопрацьовуємо безкоштовно. Якщо й це не дало результату, повертаємо оплату.

Чесно про умови, за яких гарантія діє:

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

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

How much does it cost?

Разова оптимізація — від 3 000 грн. Остаточна ціна залежить від стану сайту, кількості плагінів і того, чи потрібні правки в темі. Діагностика з переліком проблем і цінник — до початку робіт.

Окремо можна замовити лише діагностику: ви отримаєте розбір із замірами й списком робіт за пріоритетом і зможете виконати їх самі або з іншим підрядником.

Якщо потрібна не разова робота, а постійний нагляд за швидкістю разом з оновленнями й бекапами — це підтримка сайту з місячною оплатою.

How long does it take?

Діагностика — 1–2 робочі дні. Самі роботи — від 2 до 7 робочих днів залежно від обсягу. Польові дані Google оновлюються ще 3–4 тижні після змін: сайт стане швидким одразу, а показники у Search Console наздоженуть із затримкою. Це нормально, і про це варто знати заздалегідь.

What We Work With

WordPress і WooCommerce — основний профіль. Також беремося за сайти на інших системах і за статичні: принципи однакові, різниця в інструментах. Працюємо з сайтами будь-якого походження — своїми й чужими, зокрема тими, де початковий підрядник зник і доступів бракує: допоможемо їх відновити.

Наш власний сайт: цифри, які можна перевірити

Логічно запитати, як із швидкістю в того, хто її продає. Заміри головної сторінки aws.in.ua на момент написання:

• відповідь сервера — 0,43 секунди;
• повне завантаження — 1,4 секунди;
• CLS — 0, верстка не стрибає взагалі;
• вага сторінки — 606 КБ при 57 запитах, і це разом з анімацією та відео на першому екрані.

Перевірити може будь-хто — адреса відкрита. Нам теж є що покращувати: на головній поки більше файлів стилів і скриптів, ніж потрібно, і ми їх об’єднуємо. Коли хтось обіцяє вам ідеал, варто спитати, як справи на його власному сайті.

Типові причини гальм на WordPress

За роки роботи з чужими сайтами набір причин повторюється. Ось що ми бачимо найчастіше — за спаданням шкоди.

• Плагіни, які роблять одне й те саме. Два кеші, що конфліктують між собою, три форми зворотного зв’язку, чотири галереї. Кожен тягне свої стилі й скрипти на всі сторінки, навіть там, де не використовується. Рекорд, який ми зустрічали, — 48 активних плагінів на сайті-візитівці з п’яти сторінок.
• Величезні фотографії. Знімок із телефона на 4 мегабайти, завантажений як є, показується в блоці шириною 300 пікселів. Браузер усе одно викачує всі 4 мегабайти. Одна така картинка на першому екрані вбиває LCP повністю.
• Конструктор сторінок. Зручний для редагування, але генерує шари вкладених блоків і сотні кілобайтів стилів на кожну сторінку. Прибрати його зазвичай неможливо без переробки, тож працюємо з тим, що є, і оптимізуємо навколо.
• Шрифти з чужого сервера. Чотири накреслення Google Fonts — це чотири окремі запити до стороннього домену до того, як з’явиться текст. Переносимо до себе й підвантажуємо заздалегідь.
• Слайдер на першому екрані. Красиво, але це найважчий елемент сторінки, і він стоїть саме там, де вимірюється LCP. Часто достатньо замінити перший слайд статичним зображенням.
• Дешевий хостинг у години навантаження. Вранці сайт відповідає за 200 мілісекунд, у піку — за дві секунди. Код тут ні до чого, і жодна оптимізація це не виправить.
• Роками не чищена база. Тисячі ревізій сторінок, прострочені транзієнти, таблиці від давно видалених плагінів. На великих сайтах це десятки відсотків часу відповіді.

Прискорення інтернет-магазину

Магазин — окрема історія, і коштує він зазвичай дорожче за сайт-візитівку. Причина в тому, що половину сторінок не можна просто покласти в кеш.

Кошик, оформлення замовлення й особистий кабінет у кожного відвідувача свої. Якщо налаштувати кеш неакуратно, покупець побачить чужий кошик — помилка рідкісна, але дорога. Тому для магазинів ми розділяємо правила: каталог і картки товарів кешуються повністю, сторінки з особистими даними — ніколи.

Друга особливість — фільтри каталогу. На кількох тисячах товарів із десятком характеристик кожен запит фільтра перетворюється на важку вибірку з бази. Тут допомагають індекси й кеш результатів, а іноді — переписування самого запиту.

Третя — картинки. У магазині їх сотні, і кожна зайва сотня кілобайтів множиться на кількість товарів у сітці. Переведення каталогу у WebP зазвичай дає найбільший одномоментний виграш.

І останнє: у магазину швидкість прямо перетворюється на гроші. Відвідувач, який чекає на завантаження кошика, частіше просто закриває вкладку — і ви бачите це як покинутий кошик, не розуміючи причини.

Коли прискорення не допоможе

Буває, що сайт гальмує не через код, і чесніше сказати це одразу:

• Сайт давно застарів технічно. Якщо тема не оновлювалася роками й тримається на купі латок, дешевше зробити новий сайт, ніж лагодити старий.
• Справа в хостингу. Тоді першим кроком буде переїзд — про вибір ми писали в статті «Як вибрати хостинг для сайту».
• Проблема не у швидкості. Якщо на сайт не йде трафік, прискорення його не приведе. Тут потрібна робота з пошуком і вмістом — наприклад, локальне SEO для бізнесу з адресою.

What We Need From You

• адреса сайту — для першої оцінки цього достатньо;
• доступ до адмінки й хостингу, коли дійде до робіт;
• перелік того, що чіпати не можна: активні рекламні кампанії, інтеграції, сторонні сервіси;
• контакт людини, яка може швидко відповісти на питання по сайту.

Questions and Answers

Обговоримо ваш сайт

Надішліть адресу — зробимо попередню оцінку й скажемо, що саме гальмує і скільки коштуватиме це виправити. Якщо побачимо, що прискорення вам не потрібне, теж скажемо прямо.

Якщо ще не визначилися з обсягом робіт, спробуйте cost calculation — три кроки, без дзвінків.