Оптимизация производительности Lighthouse
Описание промпта
Промпт для глубокого анализа веб-сайта с фокусом на Core Web Vitals, оптимизацию изображений, шрифтов, JS/CSS и кэширования. Результат включает понятное резюме для заказчика и техническое дорожное карта для разработчика.
- Автоматизирует аудит производительности сайта, превращая технические данные Lighthouse в понятный план действий для разных ролей.
- Экономит время на анализе, обеспечивает структурированный подход к оптимизации и помогает обосновать технические изменения перед заказчиком.
- Веб-разработчики, фронтенд-инженеры, технические специалисты по производительности, владельцы сайтов.
Вставь URL сайта в поле {{URL}}. При необходимости добавь контекст в описание проблемы. Запроси анализ, чтобы получить детальный отчет и план исправлений.
Необходимо знать URL сайта и, желательно, текущие известные проблемы или целевые показатели производительности.
Детальный отчет с оценкой метрик, таблицей приоритетных задач и готовыми примерами кода для внедрения.
Для точности анализа рекомендуется предоставлять дополнительные данные о хостинге и известных проблемах.
Не может заменить реальный тестирование в браузере. Рекомендации носят общий характер и могут требовать адаптации под конкретную архитектуру.
URL
URL
Адрес анализируемого веб-сайта
Промпт открыт для всех. Зарегистрируйтесь, чтобы копировать одним кликом, сохранять промпты, оценивать их и подписываться на авторов.
Текст промпта
ChatGPT / Claude / Llama
Войти для копирования
Выступи в роли эксперта по веб-производительности. Проанализируй сайт по адресу {{URL}} и предоставь рекомендации, понятные дизайнеру и реализуемые разработчиком. Используй следующие входные данные: текущие известные проблемы (например, "медленно на мобильных", "огромные изображения"), целевые показатели (например, LCP < 2.5s, CLS < 0.1), тип хостинга (Vercel/Netlify/свой сервер).
Проведи анализ по следующим направлениям:
1. Core Web Vitals: Оцени LCP, INP и CLS. Для каждого метрики объясни, что она измеряет простым языком, текущий статус (хорошо/требует улучшения/плохо), причины отклонений и конкретные шаги по исправлению.
2. Оптимизация изображений: Выяви изображения, которые можно сжать или конвертировать в WebP. Укажи, какие изображения требуют lazy loading, а какие должны загружаться приоритетно. Проверь наличие адаптивных форматов.
3. Оптимизация шрифтов: Оцени размер файлов и стратегию загрузки. Предложи возможность субсеттинга (удаления неиспользуемых глифов) и стратегию отображения (swap/fallback). Дай рекомендацию по хостингу шрифтов.
4. JavaScript: Проанализируй размер бандла, процент неиспользуемого кода, скрипты, блокирующие рендеринг, и влияние сторонних библиотек.
5. CSS: Оцени процент неиспользуемого CSS, наличие блокирующих стилей и возможность извлечения критического CSS.
6. Кэширование и доставка: Проверь заголовки кэширования, использование CDN и сжатие (gzip/brotli).
Предоставь результат в следующем формате:
- Краткое резюме (3-4 предложения) для заказчика: текущее состояние, главные проблемы, ожидаемый эффект.
- Дорожная карта оптимизации в виде таблицы: Приоритет, Проблема, Влияние, Сложность, Как исправить.
- Ожидаемое улучшение показателей: Таблица с текущими и целевыми значениями Performance, LCP, CLS.
- Примеры кода: Предоставь готовые фрагменты кода или конфигурации для топ-5 исправлений.Поделитесь в социальных сетях
Комментарии
Войдите, чтобы комментировать.
Комментариев пока нет.