Web Performance taste — промпт для ChatGPT: установка и возможности
Промпт задаёт фронтенд-разработчику ориентиры по скорости сайта: от Core Web Vitals на реальных пользователях до размера JavaScript и загрузки изображений.
Открыть на GitHubЧто делает Web Performance taste
Промпт помогает оценивать решения через метрики LCP, INP и CLS, бюджет производительности и поведение страницы при загрузке. Он предлагает отдавать первый экран с сервера или из статической сборки, делить код по маршрутам и откладывать тяжёлые виджеты. Это список рекомендаций, а не автоматический замер или настройка проекта.
В рекомендациях также есть форматы изображений AVIF и WebP, приоритет загрузки LCP-изображения, кеширование статических файлов и проверка на Android с медленной сетью. Для CI предлагается проверять бюджет JavaScript и LCP. Сам промпт не настраивает CI: соответствующие проверки придётся добавить в проект отдельно.
Какие задачи решает
- оценить влияние изменений на LCP, INP и CLS
- сократить JavaScript, загружаемый для первого экрана
- выбрать изображения и виджеты для отложенной загрузки
- составить бюджет производительности для CI
- найти причины сдвигов макета и долгих задач
Примеры запросов агенту
- Проверь этот интерфейс по рекомендациям по веб-производительности и укажи проблемы с LCP, INP и CLS.
- Предложи, как уменьшить JavaScript для первого экрана и разделить код по маршрутам.
- Составь бюджет производительности для JavaScript и LCP, который можно проверять в CI.
Как установить Web Performance taste
Как использовать
Вставьте текст в начало диалога или в инструкции проекта
Вручную: положить файлы
.claude/commands/prompts.csv.mdВопросы о Web Performance taste
Как установить Web Performance taste в ChatGPT?
Для этого промпта в ChatGPT нет команды установки. Передайте ChatGPT текст промпта как инструкции для задачи.
Что делает Web Performance taste?
Он задаёт рекомендации по Core Web Vitals, загрузке ресурсов и отзывчивости интерфейса. В частности, предлагает измерять реальные пользовательские показатели и проверять производительность на Android с ограниченной сетью.
Нужно ли настраивать CI отдельно?
Да. Промпт советует задавать бюджет для JavaScript и LCP и завершать CI с ошибкой при его нарушении, но сам проверки в проект не добавляет.
Исходный текст
prompts.csv · CC0-1.0
# Web performance taste of a frontend engineer - Measure Core Web Vitals (LCP, INP, CLS) from real users, not only from lab Lighthouse runs. Confidence: 0.90 - Set a performance budget for JavaScript size and LCP, and fail CI when a change breaks it. Confidence: 0.80 - Render the first view on the server or statically; do not ship a blank page that waits for JavaScript. Confidence: 0.90 - Ship less JavaScript before optimizing the JavaScript you ship. Confidence: 0.90 - Split code by route and lazy-load heavy widgets such as editors, charts, and maps. Confidence: 0.85 - Check the bundle analyzer before adding a dependency, and prefer small, tree-shakable libraries. Confidence: 0.80 - Serve images in AVIF or WebP with responsive srcset and explicit width and height. Confidence: 0.90 - Mark the LCP image with fetchpriority="high" and never lazy-load it. Confidence: 0.85 - Lazy-load below-the-fold images and iframes with loading="lazy". Confidence: 0.85 - Self-host fonts, subset them, preload the main one, and use font-display: swap. Confidence: 0.80 - Reserve space for ads, embeds, and late content so the layout does not shift. Confidence: 0.85 - Break up long tasks over 50 ms and yield to the main thread to keep INP low. Confidence: 0.80 - Load third-party scripts with defer or after interaction, and audit each one for real value. Confidence: 0.85 - Cache hashed static assets with Cache-Control: immutable for a year. Confidence: 0.90 - Serve everything over HTTP/2 or HTTP/3 from a CDN with Brotli compression. Confidence: 0.85 - Preconnect only to the one or two origins needed for the first render. Confidence: 0.70 - Inline critical CSS for the first view and load the rest without blocking render. Confidence: 0.65 - Virtualize long lists instead of rendering thousands of DOM nodes. Confidence: 0.80 - Animate only transform and opacity, and respect prefers-reduced-motion. Confidence: 0.85 - Avoid layout thrashing: batch DOM reads before DOM writes. Confidence: 0.75 - Test on a mid-range Android phone with a throttled network, not only on a developer laptop. Confidence: 0.90 - Treat a performance regression like a bug, with an owner and a fix date. Confidence: 0.80
© f · CC0-1.0 · f/prompts.chat
