Как загрузка CSS влияет на рендеринг страницы

Ответ

При медленной загрузке CSS браузер может отображать нестилизованный контент (Flash of Unstyled Content - FOUC). Это происходит потому, что HTML загружается и парсится быстрее, чем CSS.

Для предотвращения FOUC можно:

Размещать CSS в <head> (блокирует рендеринг до загрузки стилей)
Использовать preload для критического CSS:

<link rel="preload" href="critical.css" as="style" onload="this.rel='stylesheet'">

Встраивать критический CSS прямо в HTML
Для SPA можно скрывать приложение до загрузки стилей:

.app { opacity: 0; transition: opacity 0.3s; }
.app-loaded { opacity: 1; }

window.addEventListener('load', () => {
  document.querySelector('.app').classList.add('app-loaded');
});