53% мобільних користувачів покидають сайт, якщо він завантажується довше 3 секунд. Google використовує швидкість як фактор ранжування з 2018 року. Кожна додаткова секунда завантаження знижує конверсію на 7%.
Як перевірити швидкість?
- Google PageSpeed Insights — безкоштовний, з рекомендаціями
- GTmetrix — детальний водоспад завантаження
- WebPageTest — тестування з різних локацій
- Lighthouse — вбудований у Chrome DevTools
Core Web Vitals — метрики Google
LCP (Largest Contentful Paint)
Час завантаження найбільшого елемента на екрані. Ціль: менше 2.5 секунд.
FID/INP (Interaction to Next Paint)
Час відгуку на першу дію користувача. Ціль: менше 200 мілісекунд.
CLS (Cumulative Layout Shift)
Зміщення елементів під час завантаження. Ціль: менше 0.1.
10 способів прискорити сайт
1. Оптимізуйте зображення
Використовуйте WebP формат, стисніть розміри, вкажіть width/height атрибути. Інструменти: TinyPNG, Squoosh, ImageOptim.
2. Lazy Loading
Завантажуйте зображення та відео лише коли вони з'являються у viewport. Атрибут loading="lazy" для зображень.
3. Мініфікація CSS/JS
Зменште розмір файлів, видаливши пробіли та коментарі. Інструменти: cssnano, terser, webpack.
4. Кешування браузера
Налаштуйте Cache-Control заголовки. Статичні ресурси (CSS, JS, шрифти) кешуйте на 1 рік.
5. CDN (Content Delivery Network)
Розподіліть контент по серверах ближче до користувачів. Cloudflare — безкоштовний варіант із вбудованою оптимізацією.
6. Критичний CSS
Вставте CSS для above-the-fold контенту inline у <head>, решту завантажуйте асинхронно.
7. Preload ключових ресурсів
Використовуйте <link rel="preload"> для шрифтів, критичних зображень та CSS.
8. Зменште кількість HTTP-запитів
Об'єднуйте CSS/JS файли, використовуйте SVG спрайти, інлайніть маленькі зображення.
9. GZIP/Brotli стиснення
Увімкніть серверне стиснення. Brotli стискає на 15-25% краще за GZIP.
10. Оптимізуйте шрифти
Використовуйте font-display: swap, завантажуйте лише потрібні набори символів, прелоадіть шрифти.
Висновок
Швидкість сайту — це не одноразова задача, а постійний процес. Регулярно перевіряйте метрики, оптимізуйте нові матеріали та слідкуйте за Core Web Vitals.
