Может ли критический CSS быть почти пустым, чтобы быстрее достичь FCP - PullRequest
Новая
       27

Может ли критический CSS быть почти пустым, чтобы быстрее достичь FCP

0 голосов
/ 21 марта 2020

Мы говорим об экстремальных вещах, чтобы улучшить время первой содержательной рисования.

CSS - это ресурс, блокирующий рендеринг, поэтому я стараюсь полностью исключить время ожидания и загрузить CSS после загрузки страницы. Скорее всего, это приведет к 200 мс Fla sh из Unstyled Content. Я бы с этим согласился.

Итак, если я возьму свой файл размером 40 КБ CSS и загрузлю сначала только несколько вещей (или ничего), то отложу загрузку почти всего CSS позже, будет это хитрость для улучшения FCP?

И так ли это можно сделать? 

<head>
  <style> /* inlined critical CSS */ </style>
  <script> loadCSS('non-critical.css'); </script>
</head>

Я знаю, что критическая CSS должна загружать содержимое выше сгиба. Но что произойдет, если я не загрузлю ничего, кроме, может быть, структуры страницы (размеры и расположение заголовка, боковой панели и основного содержимого)? Просто голые кости. Это улучшит FCP и вызовет краткий FOU C?

...