Что такое FOUC и как с ним бороться?
Веб-разработчики часто сталкиваются с неприятным визуальным эффектом, который портит первое впечатление от сайта — FOUC (Flash of Unstyled Content). Это мигание неоформленного контента, когда страница на мгновение отображается без CSS-стилей. Разберёмся, почему это происходит и как от этого избавиться.
Что такое FOUC?
FOUC (в переводе — «вспышка неоформленного контента») — это кратковременное отображение HTML-контента без стилей, прежде чем CSS будет загружен и применён. Пользователь видит «сырой» текст и элементы интерфейса, которые затем «перепрыгивают» в своё нормальное состояние.
Это выглядит непрофессионально, особенно если сайт позиционируется как современный и быстрый.
Как возникает FOUC?
Причин несколько:
Поздняя загрузка CSS
Если стили подключены внизу страницы или загружаются асинхронно, HTML отображается без них.
Внешние шрифты
Использование шрифтов с Google Fonts или других CDN может привести к FOUT (Flash of Unstyled Text), родственной проблеме: текст сначала отображается системным шрифтом, а затем «перескакивает» на кастомный.
Асинхронная работа JavaScript
Некоторые фреймворки применяют стили через JS после загрузки страницы (особенно в SSR/CSR-приложениях), что тоже может вызвать FOUC.
Пример FOUC
<!-- Неправильное подключение CSS -->
<body>
<h1>Добро пожаловать!</h1>
<link rel="stylesheet" href="styles.css" />
</body>
В этом примере CSS подключается после контента, что почти гарантирует FOUC.
Как предотвратить FOUC?
Вот несколько проверенных способов:
1. Подключайте CSS как можно раньше
Разместите в , чтобы браузер начал загружать стили сразу:
<head>
<link rel="stylesheet" href="styles.css" />
</head>
2. Используйте preload для шрифтов
<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
Это ускорит загрузку шрифта и снизит вероятность FOUT.
3. Минимизируйте критические стили (Critical CSS)
Выделите ключевые стили, необходимые для отображения «первого экрана», и вставьте их прямо в HTML:
<style>
body { margin: 0; font-family: sans-serif; }
header { background: #f4f4f4; padding: 1em; }
</style>
4. Избегайте асинхронной подгрузки CSS без нужды
Не используйте media=»print» или rel=»alternate» для основных стилей — это задерживает применение.
FOUC — это мелочь, которая способна испортить UX. К счастью, с ней легко бороться, если следовать простым правилам: подключайте стили рано, ускоряйте загрузку шрифтов и думайте о «первом экране» как о приоритете.
