Навыки web-performance-optimization
⚡

web-performance-optimization

Безопасно

Оптимизация производительности веб-приложений с помощью Claude

Медленные сайты ухудшают пользовательский опыт и позиции в SEO. Этот навык помогает систематически измерять, анализировать и оптимизировать производительность веб-приложений, используя проверенные методы, такие как разделение кода, оптимизация изображений и улучшение Core Web Vitals.

Поддерживает: Claude Codex Code(CC)
📊 70 Адекватно
1

Скачать ZIP навыка

2

Загрузить в Claude

Перейдите в Settings → Capabilities → Skills → Upload skill

3

Включите и начните использовать

Протестировать

Использование «web-performance-optimization». Мой LCP составляет 4,2с, а нужно менее 2,5с. Главное изображение героя весит 2,5МБ.

Ожидаемый результат:

Конвертируйте изображение героя в формат AVIF (экономия ~80%), сожмите до 200КБ, добавьте preload link, используйте fetchpriority='high' и реализуйте адаптивные изображения с srcset для разных размеров экрана.

Использование «web-performance-optimization». Мой JavaScript-бандл имеет размер 850КБ в сжатом виде и вызывает медленный TTI.

Ожидаемый результат:

Замените moment.js (67КБ) на date-fns (12КБ), импортируйте только нужные функции lodash вместо всей библиотеки, реализуйте разделение кода на основе маршрутов для тяжёлых компонентов и отложите некритичные скрипты вроде аналитики.

Использование «web-performance-optimization». У меня CLS score 0,25 с контентом, который прыгает.

Ожидаемый результат:

Добавьте атрибуты width и height ко всем изображениям, используйте CSS свойство aspect-ratio, реализуйте скелетон-загрузчики для динамического контента и зарезервируйте место для рекламы/виджетов до их загрузки.

Аудит безопасности

Безопасно
v1 • 2/25/2026

All 94 static analysis findings are false positives. The skill file is pure documentation (SKILL.md) containing markdown code examples and best practices for web performance optimization. Detected patterns such as dynamic import(), shell commands, and URLs are within markdown code blocks as educational examples, not executable code. No security risks identified.

1
Просканировано файлов
649
Проанализировано строк
1
находки
1
Всего аудитов
Проблемы низкого риска (1)
SKILL.md:77-644
Documentation Contains Command Examples
File contains bash commands and code examples within markdown code blocks for educational purposes only. These are not executable code and pose no security risk.
Проверено: claude

Оценка качества

38
Архитектура
100
Сопровождаемость
87
Контент
24
Сообщество
100
Безопасность
87
Соответствие спецификации

Что вы можете построить

Оптимизация интернет-магазина

Оптимизация страниц товаров для улучшения коэффициента конверсии за счёт сокращения времени загрузки и улучшения показателей Core Web Vitals

Улучшение производительности дашборда

Уменьшение размера JavaScript-бандла и оптимизация загрузки данных для более быстрого взаимодействия с дашбордом

Оптимизация скорости контент-сайта

Внедрение оптимизации изображений, ленивой загрузки и стратегий кэширования для ускорения доставки контента

Попробуйте эти промпты

Анализ проблем производительности 
Я запустил аудит Lighthouse и получил такие результаты: [вставить оценки]. Помогите понять, что вызывает низкую производительность, и определить приоритетность исправлений.
Оптимизация Core Web Vitals 
Мои Core Web Vitals: LCP [значение], FID [значение], CLS [значение]. Покажите конкретные изменения кода для улучшения этих метрик в моём [фреймворк] приложении.
Уменьшение размера бандла 
Мой JavaScript-бандл имеет размер [размер] и загружается за [время] в сети 3G. Проанализируйте мои зависимости и предложите стратегии разделения кода или более лёгкие альтернативы.
Внедрение оптимизации изображений 
Помогите внедрить стратегию оптимизации изображений для моего сайта. У меня есть [количество] изображений общим размером [размер]. Покажите, как конвертировать в современные форматы и реализовать ленивую загрузку в [фреймворк].

Лучшие практики

  • Всегда фиксируйте базовые метрики с помощью Lighthouse перед оптимизацией для точного измерения улучшений
  • Сначала сосредоточьтесь на Core Web Vitals (LCP, FID, CLS), так как они напрямую влияют на пользовательский опыт и позиции в SEO
  • Тестируйте производительность на реальных мобильных устройствах и медленных 3G-сетях, а не только на десктопе с быстрым интернетом

Избегать

  • Оптимизация без предварительного измерения — всегда запускайте аудиты для выявления реальных узких мест перед внесением изменений
  • Чрезмерная оптимизация для десктопа при игнорировании мобильной производительности — большинство пользователей заходят с мобильных устройств через медленные сети
  • Преждевременная оптимизация — сосредоточьтесь на изменениях с высоким эффектом, влияющих на пользовательские метрики, а не на микрооптимизациях

Часто задаваемые вопросы

Что такое Core Web Vitals и почему они важны?
Core Web Vitals — это метрики производительности Google: LCP (скорость загрузки), FID (интерактивность) и CLS (визуальная стабильность). Они напрямую влияют на SEO-позиции и пользовательский опыт. Хорошие показатели: LCP менее 2,5с, FID менее 100мс и CLS менее 0,1.
Что оптимизировать сначала: изображения или JavaScript?
Начните с той проблемы, которую аудит Lighthouse определяет как наиболее серьёзную. Обычно сначала оптимизируйте изображения, если каждое весит более 1МБ — это часто самый быстрый результат. Затем займитесь размером JavaScript-бандла, если он превышает 200КБ в сжатом виде.
В чём разница между ленивой загрузкой и разделением кода?
Ленивая загрузка откладывает загрузку ресурсов (например, изображений) до момента, когда они понадобятся. Разделение кода разбивает ваш JavaScript на меньшие части, которые загружаются по требованию. Используйте оба метода вместе: лениво загружайте изображения и компоненты ниже линии сгиба, разделяйте код по маршрутам или функциям.
Как узнать, работают ли мои оптимизации?
Запускайте аудиты Lighthouse до и после изменений, документируя каждую метрику. Тестируйте на нескольких устройствах и скоростях сети. Используйте инструменты реального мониторинга пользователей (RUM) для отслеживания фактического пользовательского опыта со временем, а не только лабораторных показателей.
Может ли этот навык автоматически внедрять оптимизации?
Нет, этот навык предоставляет экспертные рекомендации, примеры кода и стратегии оптимизации. Вы или ваша команда разработчиков будете внедрять предложенные изменения. Навык помогает понять, что оптимизировать и как к этому подойти.
Какие инструменты следует использовать вместе с этим навыком?
Lighthouse (встроен в Chrome DevTools) для аудитов, webpack-bundle-analyzer для анализа бандла, WebPageTest для подробных waterfall-диаграмм и вкладка Performance в Chrome DevTools для профилирования времени выполнения. Этот навык помогает интерпретировать результаты всех этих инструментов.

Сведения для разработчиков

Автор

sickn33

Лицензия

MIT

Репозиторий

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/web-performance-optimization

Ссылка

main

Структура файлов

📄 SKILL.md