Чому сайт повільний і що виправити в першу чергу

Спочатку виміряйте, потім оптимізуйте

«На моєму ноутбуці швидко» залежить від кешу, пристрою та мережі. Перевіряйте в приватному вікні, на телефоні та інструментами браузера. З’ясуйте, де саме втрачається час: сервер, завантаження чи JavaScript.

1. Зображення — найчастіший швидкий виграш

• Не віддавайте 4000px-зображення для блоку шириною 600px.
• Використовуйте сучасні формати, де це доречно.
• Увімкніть lazy loading нижче першого екрана.
• Задавайте розміри, щоб layout не стрибав.

2. Не змушуйте браузер виконувати зайвий код

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

3. Шрифти теж завантажуються

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

4. Перевірте час відповіді сервера

Якщо HTML починає приходити через кілька секунд, оптимізація картинок не вирішить головну проблему. Шукайте «сплячий» інстанс, повільні запити до бази, синхронні API або відсутність кешу.

5. Сторонні віджети іноді дорожчі за ваш код

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

Порядок дій, який економить час

1. Зафіксуйте початковий стан.
2. Виправте великі зображення.
3. Приберіть невикористані скрипти й стилі.
4. Перевірте backend і базу.
5. Виміряйте ще раз.

Оптимізація без повторної перевірки швидко перетворюється на здогадки.

Кешування корисне, коли дані можна повторно використати

Логотип, CSS, JavaScript і незмінні зображення не потрібно завантажувати при кожному переході. Правильні cache headers дозволяють браузеру використовувати їх повторно. Але приватні дані не можна кешувати як публічні.

Навчіться читати Network waterfall хоча б базово

Сортуйте запити за розміром і часом. Один файл може важити половину сторінки, десятки запитів — чекати один зовнішній домен, а повільний перший документ — вказувати на backend.

Тестуйте на слабшому пристрої

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