Может ли критический CSS быть почти пустым, чтобы ускорить время до FCP
Здесь мы говорим об экстремальных вещах, чтобы улучшить время первой рисовки содержимого.
CSS - это ресурс, блокирующий рендеринг, поэтому я хочу полностью исключить время ожидания и загружать CSS после завершения загрузки страницы. Скорее всего, это приведет к 200 миллисекундам Flash нестилизованного содержимого. Я бы с этим согласился.
Итак, если я возьму свой файл CSS размером 40 КБ и сначала загружу только несколько вещей (или ничего), а потом откладываю загрузку почти всего CSS, будет ли это уловкой для улучшения FCP?
И как это сделать?
<head>
<style> /* inlined critical CSS */ </style>
<script> loadCSS('non-critical.css'); </script>
</head>
Я знаю, что критически важный CSS должен загружать верхний контент. Но что произойдет, если я ничего не загрузил, кроме, может быть, структуры страницы (размеры и размещение заголовка, боковой панели и основного содержимого)? Просто голые кости. Это улучшит FCP и вызовет кратковременный FOUC?