Какие ресурсы блокирующие, а какие не блокирующие при рендеринге страницы

Что проверяют

Знаете ли вы критический путь рендеринга: что мешает браузеру показать первый кадр и что грузится параллельно. Следом обычно спрашивают разницу между async и defer или как вы искали блокирующие ресурсы на реальной странице.

Как отвечать

Разделите блокировку на два вида: блокировку отрисовки и блокировку парсера.

• CSS: <link rel="stylesheet"> блокирует отрисовку, потому что без CSSOM браузер не построит дерево рендеринга. Парсинг HTML при этом идёт дальше, но синхронный скрипт после таблицы стилей ждёт её загрузки. Стиль с неподходящим media, например media="print", грузится с низким приоритетом и отрисовку не держит;
• синхронный скрипт: <script src> без атрибутов останавливает парсер до загрузки и выполнения, поэтому в <head> задерживает первый кадр;
• defer: скачивается параллельно, выполняется после разбора документа в порядке подключения, до DOMContentLoaded. Скрипты с type="module" ведут себя так же по умолчанию;
• async: скачивается параллельно, выполняется сразу по готовности и может прервать парсинг. Порядок не гарантирован, так что зависимые друг от друга скрипты сюда не подходят;
• шрифты: отрисовку не блокируют, но текст с веб-шрифтом может оставаться невидимым, пока шрифт грузится. font-display: swap сразу показывает запасной шрифт, а <link rel="preload"> нужен, потому что без него браузер находит шрифт поздно, после разбора CSS;
• картинки и iframe: не блокируют, но влияют на LCP. Для главной картинки fetchpriority="high", для остальных loading="lazy".

Затем покажите, что с этим делаете: критический CSS инлайном, остальное позже, скрипты с defer, без цепочек @import. Искать их удобно в Lighthouse и панели Performance.

Где спотыкаются

Говорят, что HTML должен загрузиться целиком перед отрисовкой. Браузер разбирает документ потоком и может рисовать его по частям, по мере получения байтов.

Путают async и defer или ставят async на библиотеку и зависящий от неё код и ловят ошибку, которая воспроизводится через раз.

Считают, что CSS останавливает парсинг HTML. Он держит отрисовку и следующие за ним синхронные скрипты, а парсер работает дальше.