Коротко о проблеме и почему это тормозит Time to Interactive (TTI)
- Внешние CSS в head блокируют рендер: браузер ждёт загрузки и парсинга всех CSS перед первой отрисовкой, потому что он должен знать стили, чтобы безопасно построить layout.
- Синхронные (без async/defer) скрипты блокируют парсинг HTML и отрисовку: при встрече такого парсер останавливается, скачивает и выполняет скрипт, затем продолжает. Это напрямую увеличивает время до интерактивности.
- Большое количество inline-style: увеличивает вес HTML, лишает возможности кэширования стилей, приводит к увеличению DOM- и style‑recalculation‑затрат (каждый inline атрибут — уникальная декларация), ухудшает повторное использование и увеличивает время парсинга HTML. Частые изменения inline-style вызывают forced reflow/repaint.
Что именно происходит (упрощённый поток):
1) загрузка HTML → парсинг до первого "render" (отложено CSS/скриптами)
2) загрузка/парсинг CSS → вычисление стилей, layout → первая отрисовка
3) синхронные скрипты между парсингом блокируют и увеличивают main-thread work → интерактивность откладывается
Конкретные последствия: увеличенный TTI, большие TTFB/FCP/LCP/CLS в реальных измерениях, плохой пользовательский опыт (мёртвые страницы долгое время).
Практическая стратегия рефакторинга для быстрого TTI
1. Аудит
- Запустите Lighthouse/DevTools: найдите большие синхронные скрипты, блокирующие CSS, тяжёлые inline‑блоки.
2. Критический CSS и внешний CSS
- Выделите критический CSS для above‑the‑fold и инлайньте только его. Ограничьте размер критического инлайна, например до ~$10\text{KB}$.
- Вынесите остальной CSS в внешний файл. Подгружайте его неблокирующе: + fallback. Альтернатива: media="print" with onload swap.
- Используйте сжатие (gzip/ Brotli) и long‑cache headers.
3. Скрипты — async/defer и code‑splitting
- Скрипты, не зависящие от DOM-структуры/не изменяющие head: ставьте атрибут defer (сохраняет порядок, выполняются после парсинга).
- Для независимых сторонних скриптов — async.
- Переместите тяжёлую логику в динамический импорт (code‑splitting): import() загружает код только при необходимости.
- Отложите (lazy) инициализацию виджетов до интерактивности (например, слушатель на первый ввод пользователя или использование requestIdleCallback).
4. Минимизируйте inline‑styles
- Замените повторяющиеся inline-атрибуты классами. Генерируйте утилитарные CSS‑классы или используйте CSS‑переменные.
- Оставляйте inline-style только для единичных, действительно критических стилей (цвета фон/важный размер), но не для каждой кнопки.
5. Сократить main‑thread work и длинные задачи
- Разбейте длинные синхронные задачи (>$50\text{ms}$) на мелкие чанки, используйте requestIdleCallback / setTimeout 0 / web workers для вычислений.
- Уберите блокирующие парсинг операции (например, synchronous XHR).
6. Современная доставка кода
- Используйте module/nomodule pattern для современных браузеров: и оптимизированный nomodule для старых. Это уменьшит полифиллы в современных браузерах.
- Tree‑shaking, minify, compress.
7. Шрифты и ресурсы
- Подгружайте шрифты асинхронно, используйте font-display: swap; preload для критических шрифтов.
- Preconnect/preload для критичных внешних доменов (API, CDN).
8. Кеширование и сеть
- Используйте HTTP/2 или HTTP/3 для уменьшения накладных расходов на множество запросов; объединяйте файлы, если HTTP/1.1.
Короткий чеклист для внедрения (порядок)
- [ ] Audit: Lighthouse → определить главные блокеры.
- [ ] Вынести общий CSS, инлайн критический (≤ $10\text{KB}$).
- [ ] Заменить sync на defer/async / динамические импорты.
- [ ] Убрать повторяющиеся inline-style — заменить на классы.
- [ ] Разбить тяжёлые JS‑задачи, использовать web workers.
- [ ] Оптимизировать шрифты и использовать preload/preconnect.
- [ ] Тестировать (Lighthouse, RUM) и повторять.
Примеры изменений (описательно)
- Вместо большого количества inline-style: → и собрать стиль в external CSS.
- Вместо в head: или динамически import() при первом взаимодействии.
Что дальше от вас
- Предложите, какие улучшения вам предпочтительны (минимизация HTML весa, вынос CSS, перевод скриптов в defer/async, code‑splitting и т.д.) или пришлите конкретный HTML/CSS/JS‑фрагмент — я покажу пошаговый рефакторинг и пример кода.