⚡ Performance оптимізація — швидкість сайту
📘 Чому Performance критична?
- 🎯 SEO: Google використовує швидкість як ranking factor
- 💰 Конверсії: +1s затримки = -7% конверсій
- 📉 Bounce rate: 3s+ завантаження = 53% users leave
- ⚡ UX: швидкі сайти = happy users
Частина 1: Core Web Vitals
| Метрика | Good | Needs Improvement | Poor | Що вимірює |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) |
≤2.5s | 2.5-4s | >4s | Час завантаження найбільшого елемента |
| FID (First Input Delay) |
≤100ms | 100-300ms | >300ms | Затримка першої інтеракції |
| CLS (Cumulative Layout Shift) |
≤0.1 | 0.1-0.25 | >0.25 | Візуальна стабільність (layout shifts) |
Частина 2: Image Optimization
Сучасні формати
| Формат | Compression | Browser Support | Use Case |
|---|---|---|---|
| JPEG | Lossy | 100% | Фотографії |
| PNG | Lossless | 100% | Логотипи, іконки |
| WebP | Lossy/Lossless | 96% | 30% менше JPEG/PNG |
| AVIF | Lossy/Lossless | 83% | 50% менше JPEG (найкращий) |
Responsive images з ``
Lazy Loading
Responsive з srcset
Частина 3: JavaScript оптимізація
Code Splitting
// Динамічний import — завантажити тільки коли потрібно
button.addEventListener('click', async () => {
const module = await import('./heavy-module.js');
module.doSomething();
});
// React lazy loading
const Calculator = React.lazy(() => import('./Calculator'));
function App() {
return (
Loading...
}>