# web-performance-optimization

Скилл для оптимизации загрузки веб-приложений: разбивка бандла, ленивая загрузка, кэширование и мониторинг Core Web Vitals.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 557 установок · ★ 236
- Автор: secondsky
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/secondsky/claude-skills/tree/HEAD/plugins/web-performance-optimization/skills/web-performance-optimization/SKILL.md
- Обновлён: 2026-10-20
- HTML: https://affpapa.org/nevibecode/skills/secondsky-web-performance-optimization

## Что делает

Скилл подсказывает агенту, как разложить тяжёлый фронтенд на части и ускорить первую отрисовку. Внутри — готовые приёмы: `React.lazy` и `Suspense` для маршрутов, `splitChunks` в конфиге webpack, адаптивные картинки через `<picture>` и `srcset`, service worker с кэшем статики.

Отдельный блок — замер Core Web Vitals. Агент добавляет `PerformanceObserver` для LCP, CLS и INP, а метрики уходят в вашу аналитику через функцию-заглушку `sendToAnalytics`, которую придётся дописать под свой эндпоинт. В таблице целей указаны пороги: LCP меньше 2.5s, INP меньше 200ms, CLS меньше 0.1. INP заменил FID как Core Web Vital в марте 2024 — если вы всё ещё следите за FID, это повод обновить дашборды.

Есть примеры сжатия для Nginx и чеклист из семи пунктов. Дополнительные материалы лежат в `references/compression-monitoring.md` и `references/typescript-advanced.md` — там конфиг Apache, TTFB и автоматизация замеров через Puppeteer. Скилл не запускает оптимизацию сам: он даёт агенту шаблоны, а решения по архитектуре остаются за вами.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add secondsky/claude-skills --skill web-performance-optimization -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/web-performance-optimization/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/web-performance-optimization/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add secondsky/claude-skills --skill web-performance-optimization -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/web-performance-optimization/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add secondsky/claude-skills --skill web-performance-optimization -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/web-performance-optimization/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install secondsky/claude-skills web-performance-optimization
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/web-performance-optimization/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add secondsky/claude-skills --skill web-performance-optimization -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/secondsky/claude-skills --path plugins/web-performance-optimization/skills/web-performance-optimization
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/web-performance-optimization/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add secondsky/claude-skills --skill web-performance-optimization -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/secondsky/claude-skills/tree/HEAD/plugins/web-performance-optimization/skills/web-performance-optimization/SKILL.md

## Когда брать
- разбить бандл по маршрутам и вынести вендоров в отдельный чанк
- настроить ленивую загрузку компонентов ниже первого экрана
- подключить service worker с кэшированием статики
- снять метрики LCP, CLS и INP и отправить их в аналитику
- включить gzip в Nginx и уменьшить размер ответа

## Примеры запросов агенту
- Разбей маршруты приложения на ленивые чанки через React.lazy и Suspense
- Настрой splitChunks в webpack, чтобы node_modules ушли в отдельный vendors-чанк
- Добавь замер LCP, CLS и INP через PerformanceObserver и отправь метрики в аналитику

## Похожие
- [react-performance-optimization](https://affpapa.org/nevibecode/skills/react-performance-optimization.md) — скилл · 1900 установок
- [web-performance-audit](https://affpapa.org/nevibecode/skills/web-performance-audit.md) — скилл · 543 установки
- [performance-optimization](https://affpapa.org/nevibecode/skills/performance-optimization.md) — скилл · 65200 установок
- [nextjs-performance](https://affpapa.org/nevibecode/skills/nextjs-performance.md) — скилл · 4900 установок
- [vite-bundle-optimization](https://affpapa.org/nevibecode/skills/vite-bundle-optimization.md) — скилл · 667 установок
- [pwa-development](https://affpapa.org/nevibecode/skills/pwa-development.md) — скилл · 4100 установок

## Другие версии с тем же именем
- [web-performance-optimization · aj-geddes](https://affpapa.org/nevibecode/skills/aj-geddes-web-performance-optimization.md) — 482 установки
- [web-performance-optimization · davila7](https://affpapa.org/nevibecode/skills/web-performance-optimization.md) — 3490 установок

Из того же набора: [secondsky/claude-skills](https://affpapa.org/nevibecode/by/secondsky/claude-skills.md) — 89 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md