35 lines
1.5 KiB
Markdown
35 lines
1.5 KiB
Markdown
---
|
||
title: Web Performance (Core Web Vitals)
|
||
created: 2026-06-02
|
||
updated: 2026-06-02
|
||
type: concept
|
||
tags: [web-design, performance]
|
||
sources:
|
||
- raw/articles/web-design-research.md
|
||
- raw/articles/crawford-15-tips.md
|
||
confidence: high
|
||
---
|
||
|
||
# Web Performance and Core Web Vitals
|
||
|
||
## Метрики (2026)
|
||
- **LCP** (Largest Contentful Paint) — < 2.5s — скорость загрузки основного контента
|
||
- **INP** (Interaction to Next Paint) — < 200ms — отклик на взаимодействие (заменил FID)
|
||
- **CLS** (Cumulative Layout Shift) — < 0.1 — визуальная стабильность
|
||
|
||
## Инструменты
|
||
- **Google PageSpeed Insights** — LCP, INP, CLS + рекомендации
|
||
- **WebPageTest** — детальные waterfall-диаграммы
|
||
- **GTmetrix** — LCP, INP, CLS + оптимизация
|
||
- **Chrome Web Vitals extension** — реальный мониторинг
|
||
|
||
## Влияние на конверсию (Crawford)
|
||
> Каждая секунда загрузки снижает конверсии. >3s = потеря ~50% посетителей.
|
||
|
||
## Типовые проблемы
|
||
1. **Несжатые изображения** — WebP/AVIF с lazy loading
|
||
2. **Тяжёлые скрипты** — дефер, асинхронная загрузка
|
||
3. **JavaScript блокирует рендер** — code splitting, tree shaking
|
||
4. **Много шрифтов** — не более 3 семейств
|
||
5. **Нет кэширования** — CDN, service workers, cache headers
|