Чому сайт гальмує: сім причин і що з ними робити

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

Спершу — як зрозуміти, що саме гальмує

Перед тим як щось виправляти, потрібен замір. Безкоштовних інструментів достатньо:

• PageSpeed Insights — оцінка від Google із порадами. Дивіться мобільну вкладку: саме вона впливає на позиції.
• Search Console, розділ Core Web Vitals — дані реальних відвідувачів вашого сайту за останні 28 днів. Найважливіше джерело, бо це не лабораторний тест.
• Вкладка Network у браузері — видно кожен файл, його вагу й час завантаження. Сортуйте за розміром: винуватець зазвичай угорі.

Одна важлива деталь: оцінка PageSpeed — не самоціль. Сайт із оцінкою 70 і швидким першим екраном краще за сайт із оцінкою 95, де людина три секунди дивиться на порожнечу.

1. Важкі зображення

Найчастіша причина, з великим відривом. Типова ситуація: фотографію завантажили просто з телефона, вона важить 4 МБ і має розмір 4000 пікселів завширшки, а показується в блоці шириною 400.

Що робити: зменшити до потрібного розміру, зберегти у WebP або AVIF, увімкнути відкладене завантаження для всього, що нижче першого екрана. Одне це часто прибирає половину часу завантаження.

Чи можна самому: так. Для WordPress є плагіни, які конвертують і стискають автоматично. Головне не забути про вже завантажені зображення.

2. Забагато плагінів

Кожен плагін додає свої стилі та скрипти — і найчастіше на всі сторінки, а не тільки туди, де потрібен. Слайдер, який використовується на головній, вантажиться і в блозі, і на сторінці контактів.

Що робити: перевірити список і чесно відповісти, що з цього справді потрібне. Далі — обмежити завантаження плагінів тими сторінками, де вони працюють.

Чи можна самому: вимкнути зайве — так. Обмежити завантаження решти — потрібен розробник.

3. Шрифти з чужого домену

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

Що робити: перенести шрифти на свій сервер, лишити тільки потрібні накреслення й підмножини символів, додати font-display: swap, щоб текст показувався одразу.

Для прикладу: на цьому сайті повний набір шрифтів займає 116 КБ замість майже мегабайта, який віддавав би Google Fonts, — за рахунок того, що ми вирізали з них усе, крім потрібних символів.

4. Сторонні скрипти

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

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

5. Немає кешування

Без кешу сервер збирає сторінку заново для кожного відвідувача: запити до бази, обробка шаблонів, збирання HTML. З кешем готова сторінка віддається одразу.

Що робити: увімкнути кешування сторінок, стиснення gzip або brotli й заголовки кешування для статики. На типовому сайті це скорочує час відповіді сервера в рази.

6. Слабкий або перевантажений хостинг

Ознака проста: час відповіді сервера більший за 600 мілісекунд навіть на простій сторінці. Ніяка оптимізація коду це не компенсує — сайт просто чекає, поки сервер відповість.

Що робити: перевірити час відповіді в PageSpeed або в Network. Якщо він великий стабільно — питання до хостингу, а не до сайту.

7. Важкий візуальний білдер

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

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

Чого не варто робити

Три поширені помилки при самостійному прискоренні:

• Ставити кілька плагінів оптимізації одночасно. Вони конфліктують між собою, і сайт часто стає повільнішим, а іноді просто ламається.
• Вмикати всі галочки поспіль. Агресивна мініфікація й об'єднання файлів регулярно ламають верстку та скрипти. Вмикайте по одній і перевіряйте.
• Ганятися за 100 балами. Останні десять балів зазвичай коштують більше, ніж усі попередні разом, і майже не впливають на реальний досвід користувача.

Коротко

Почніть із заміру, а не з виправлень. У більшості випадків 80% приросту дають дві-три речі: зображення, плагіни й кешування. Решта — тонке налаштування, яке має сенс, коли основне вже зроблено.

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