Что из перечисленного может заблокировать отображение страницы: картинки, JS файлы, CSS файлы, Favicon, шрифты

Ответ

  • JS файлы – блокируют отрисовку страницы, если загружаются синхронно (<script> без async/defer).
  • CSS файлы – блокируют рендеринг, так как браузер ждёт построения CSSOM.
  • Шрифты – могут вызвать FOIT (Flash of Invisible Text), если font-display: block или не указан.

Не блокируют:

  • Картинки – загружаются асинхронно, не влияют на отображение DOM.
  • Favicon – кэшируется и не блокирует рендеринг.

Пример блокировки JS:

<script src="app.js"></script> <!-- Блокирует -->
<script src="app.js" defer></script> <!-- Не блокирует -->

Оптимизация: минимизируйте критический CSS, используйте async/defer для JS, font-display: swap для шрифтов.