В чем разница между блокирующими и неблокирующими ресурсами

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

Знаете ли вы, как браузер строит первую отрисовку и какие ресурсы её задерживают. Важно различать блокировку рендеринга и блокировку парсинга HTML. Следом почти всегда просят объяснить разницу между async и defer.

Как отвечать

Разделите два вида блокировки:

• блокирующие рендеринг: CSS. Браузер не рисует страницу, пока не построит CSSOM из стилей в <head>, иначе пользователь увидел бы вспышку нестилизованного контента. Таблица с неподходящим media, например media="print", рендеринг не блокирует, хотя всё равно скачивается;
• блокирующие парсинг: обычный <script> без атрибутов. Парсер останавливается, ждёт загрузки и выполнения. Кроме того, скрипт ждёт уже запрошенные стили, потому что может читать вычисленные стили;
• async: загрузка параллельно с парсингом, выполнение сразу по готовности, порядок не гарантирован. Подходит независимым скриптам вроде аналитики;
• defer: загрузка параллельно, выполнение после разбора документа строго в порядке подключения, до DOMContentLoaded. Скрипты с type="module" ведут себя как defer по умолчанию;
• неблокирующие: картинки, видео, iframe. Первую отрисовку они не держат, но влияют на LCP и сдвиги макета.

Дальше способы оптимизации: критический CSS инлайном, остальное асинхронно; defer для скриптов приложения; preload для шрифтов и главной картинки; font-display: swap, чтобы шрифт не прятал текст; loading="lazy" для картинок ниже первого экрана. Проверять в Lighthouse и во вкладке Performance в DevTools, где такие запросы помечены отдельно.

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

Называют async полностью неблокирующим. Загрузка действительно не мешает парсеру, но в момент выполнения скрипт его останавливает, а порядок выполнения непредсказуем, поэтому зависимые друг от друга скрипты с async ломаются.

Советуют склеивать все файлы в один бандл как универсальное средство. При HTTP/2 и HTTP/3 выигрыш от склейки меньше, а огромный бандл дольше парсится и хуже кешируется.

Вешают loading="lazy" на главную картинку первого экрана. Она начинает грузиться позже, и LCP ухудшается.