neo
76c4c5b4fe
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
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
|