Вопрос проверяет понимание того, как блокирующий рендеринг CSS влияет на время первой отрисовки страницы при медленной сети.
Когда браузер получает HTML, он начинает строить DOM. Параллельно он встречает ссылки на CSS и должен загрузить и распарсить их, чтобы построить CSSOM. Пока CSSOM не готов, браузер не может построить дерево рендеринга и не рисует ничего — это называется render-blocking поведением CSS.
<head>
<style>
/* критический CSS для первого экрана */
body { margin: 0; font-family: sans-serif; }
.hero { display: flex; padding: 20px; }
</style>
<link rel="preload" href="main.css" as="style" onload="this.rel='stylesheet'">
</head>Такой подход позволяет отрисовать первый экран сразу, а остальные стили подгрузить позже без блокировки.
<link rel="stylesheet" href="print.css" media="print">.Итог: большой CSS по медленной сети напрямую задерживает первую отрисовку, поэтому критический CSS нужно инлайнить, а остальное грузить асинхронно — это улучшает воспринимаемую скорость и метрики Core Web Vitals.
Frontend developer
Ментор по Frontend
Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства
Записаться на консультациюFrontend developer
Ментор по Frontend
Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства
Записаться на консультацию