Критический путь рендеринга — это последовательность шагов, которые браузер выполняет, чтобы превратить HTML, CSS и JS в пиксели на экране. Всё, что должно завершиться до первой отрисовки, является блокирующим рендеринг (render-blocking).
Критический путь рендеринга — это последовательность шагов, которые браузер выполняет, чтобы превратить HTML, CSS и JS в пиксели на экране. Всё, что должно завершиться до первой отрисовки, является блокирующим рендеринг (render-blocking).
<script> останавливает парсинг HTML, пока скачивается и выполняется.<!-- Блокирует парсинг: браузер ждёт здесь перед продолжением -->
<script src="/app.js"></script>
<!-- defer: скачивание параллельно, выполнение после парсинга HTML, по порядку -->
<script src="/app.js" defer></script>
<!-- async: скачивание параллельно, выполнение сразу как готово (порядок не гарантирован) -->
<script src="/analytics.js" async></script>
Используйте defer для кода приложения, который трогает DOM, и async для независимых скриптов вроде аналитики. Встраивайте критический CSS и загружайте остальное без блокировки.
Это ментальная модель почти за каждым исправлением времени загрузки: блокирующие рендеринг CSS/JS — главная причина медленной первой отрисовки и плохого LCP. Знание, почему существуют defer/async, показывает, что вы понимаете браузер, а не только синтаксис.
Библиотека вопросов для IT-собеседований с подробными ответами — от Junior до Senior.
Поддержать