Вспышка неоформленного содержимого: определение и объяснение

Коротко

Момент, когда браузер уже показал текст и блоки страницы, но ещё не применил к ним CSS, и посетитель на долю секунды видит голую разметку, после чего вёрстка перестраивается.

Что такое «Вспышка неоформленного содержимого»

В англоязычной литературе явление сокращают до FOUC (flash of unstyled content). Выглядит оно так: страница на миг открывается как документ без оформления — синие подчёркнутые ссылки, списки с маркерами, огромные картинки, — а затем «щёлкает» и принимает задуманный вид. Это раздражает, сбивает прокрутку и может ухудшать метрику визуальной стабильности из набора Core Web Vitals.

Браузер не рисует страницу, пока не загрузит таблицы стилей, подключённые в head: такой CSS блокирует отрисовку. Вспышка появляется, когда эту защиту что-то обходит.

Откуда берётся

Стили подключены в конце body или добавляются скриптом уже после первой отрисовки.
CSS грузится асинхронно ради скорости, а стили первого экрана при этом не встроены в страницу.
Оформление генерирует JavaScript: компоненты появляются раньше, чем библиотека CSS-in-JS вставила стили.
Плагин оптимизации на WordPress или Битриксе отложил основной CSS, не оставив ничего для первого экрана.

Родственное явление — FOUT, показ текста системным шрифтом до загрузки веб-шрифта. Его обычно считают меньшим злом, чем невидимый текст.

Как устранить

<head>
  <!-- нужное первому экрану — прямо в HTML -->
  <style>.header{…} .hero{…}</style>
  <!-- остальное — без блокировки отрисовки -->
  <link rel="stylesheet" href="/css/rest.css" media="print" onload="this.media='all'">
</head>

Если основная таблица стилей подключена обычным тегом link в head, вспышки не будет. Когда её всё же грузят асинхронно, стили шапки, меню и первого блока встраивают в страницу, как в примере. Цепочки @import заменяют отдельными ссылками или склейкой файлов при сборке.

Как заметить

На быстром интернете вспышку легко пропустить. В инструментах разработчика включают замедление сети, отключают кэш и перезагружают страницу; запись в панели производительности со снимками экрана покажет, какие кадры отрисованы до применения стилей. Порядок загрузки CSS — одна из первых вещей, которые проверяют при ускорении сайта, поэтому FOUC часто находят и устраняют именно в этой работе.