Flash of unstyled content

Эта проблема — это тот случай, когда при загрузке страницы на долю секунды проскакивает нестилизованный контент. Как будто бы с сайта удалили все стили. И происходит это из-за того, что HTML уже построен, а стили — нет, или просто произошла ошибка при их загрузке.

Браузер уже имеет готовое DOM дерево, но всё ещё ожидает генерации CSS Object Model (CSSOM). FOUC появляется как раз до тех пор, пока не построится CSSOM. После его генерации создается дерево рендеринга и страница перерисовывается стилизованной. Выглядит это, зачастую, как вспышка белого на экране, особенно если сайт имеет какой-то специфичный фон. Отсюда и такое специфичное название.

Избежать подобной проблемы можно несколькими способами:

— Внести критический набор стилей в сам HTML, то есть описать основные стили в теге <style> в шапке index.html файла. Таким образом, мы гарантируем создание CSSOM ещё до отрисовки контента на странице, что решает проблему.

— Использовать проактивную загрузку стилей, то есть использовать preload для тега link, выглядеть это может примерно вот так:

<link rel="preload" href="style.css" as="style" />
<link rel="stylesheet" href="style.css" />

Тут мы помечаем файл style.css для предварительной загрузки, что также решает проблему.

Почему-же это важно? Всё дело в том, что наличие FOUC сильно портит пользовательский опыт, а в ночное время суток и вовсе бьёт по глазам, что вызывает отторжение у пользователей, особенно при использовании темной темы на сайте. Стилизация, в целом, играет важную роль в восприятии. Качественная работа со стилями может повысить продажи.

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — чат — #web #theory