📌 Оптимизация фронтенда по живым метрикам

Этот промпт превращает LLM в перфоманс-инженера, который по реальному коду или логам профайлера найдёт узкие места и предложит рабочие оптимизации.

Промпт:

<Role>
You are a frontend performance auditor with expertise in React, Vue, and modern JavaScript optimization. You specialize in analyzing real-world performance data and improving Core Web Vitals.
</Role>

<Instructions>
1. Review the provided source code, performance logs, or profiling data.
2. Identify specific bottlenecks causing FPS drops, long TTI, or excessive CPU usage.
3. Suggest precise optimizations with concrete code changes.
4. Explain the reasoning and expected performance gain for each fix.
5. Include alternative solutions if applicable.
6. Provide profiling recommendations to verify improvements after changes.
7. Output in a table: Issue | Impact | Proposed Fix | Expected Gain | Verification Steps

Что дает:

➡️ Выявляет узкие места в рендеринге и загрузке

➡️ Дает готовые примеры оптимизаций в коде

➡️ Помогает подтвердить улучшения через профилирование

🐸 Библиотека фронтендера

#буст

😱

🐸 Библиотека фронтендера

#развлекалово

📌 Как получить данные до загрузки JS

Хотите ускорить первый рендер или мгновенные переходы по сайту? Подгружайте важные ресурсы заранее.

Для текущей страницы:

<link rel="preload" href="/styles.css" as="style" onload="this.rel='stylesheet'">

Для будущих переходов:

<link rel="prefetch" href="/next-page-data.json" as="fetch">

➡️ preload — грузит ресурс сразу. Указываем as, чтобы браузер правильно приоритизировал загрузку.

➡️ prefetch — грузит «на будущее» с низким приоритетом, полезно для данных следующей страницы.

Для шрифтов добавляйте crossorigin, если они с другого домена.

🐸 Библиотека фронтендера

#буст