Оптимизация доставки CSS - предложение от Google

Google предлагает использовать очень важный CSS-код в главном и другом CSS внутри <noscript><link rel="stylesheet" href="small.css"></noscript>.

Это вызывает у меня несколько вопросов:

Как приоритезировать CSS в двух файлах. Все для этой страницы очень важно. Дисплей, шрифт и т.д. Если я переместил его снизу, то как он помогает сделать рендер. Не будет ли причиной перерисовки и т.д.?
Требуется ли, чтобы CSS был после события готовности к документу? Получил его от здесь.
Как CSS может войти внутрь <noscript></noscript>, что для script? Будет ли он работать, когда включен JavaScript? Совместимы ли браузеры?

Ссылка

Ответ 1

Основываясь на моем чтении ссылки, указанной в вопросе:

Выберите, какие объявления CSS встраиваются на основе устранения эффекта Flash-of-Unstyled-Content. Таким образом, убедитесь, что все элементы страницы имеют правильный размер и цвет. (Конечно, это будет невозможно, если вы используете веб-шрифты.)
Поскольку CSS, который не встроен, отложен, вы можете его загрузить, когда это имеет смысл. Загрузка его на DOMContentReady, по моему мнению, идет вразрез с этой оптимизацией: запуск новых HTTP-запросов до того, как документ будет полностью загружен, потенциально замедлит остальную нагрузку на страницу. Также см. Следующий пункт:
Пример показывает CSS в теге noscript как резерв. Ниже приведен пример состояния страницы

Исходный файл small.css загружается после загрузки страницы.

то есть с помощью javascript.

Если бы я мог добавить свое личное мнение к этой части:

эта оптимизация кажется особенно вредной для читаемости кода: таблицы стилей не входят в теги noscript и, как указано в комментариях, она не проходит проверку.
Он разрушит любые потенциальные будущие улучшения запросов HTTP (или других протоколов), поскольку сетевая транзакция жестко закодирована через javascript.
Наконец, при каких обстоятельствах вы получите прирост производительности? Возможно, если ваша страница загружает много изначально скрытого контента; однако я надеюсь, что сам браузер сможет оптимизировать загрузку страницы, чем это может сделать.

Возьмите это с солью. Я бы с сомнением сказал, что Google не знает, что они делают.

Изменить: отметить flash-of-unstyled-content (сокращенно FOUC)

Скажите вам блок текста, охватывающий несколько строк, и включает в себя текст с пользовательским стилем, например <span class="my-class">. Теперь скажите, что ваш CSS установит .my-class { font-weight:bold }. Если этот CSS не является частью встроенной таблицы стилей, .my-class внезапно станет полужирным после завершения отложенной загрузки. Текстовый блок может перепланироваться и может также изменить размер, если требуется дополнительная строка.

Итак, вместо вспышки полностью неустановленного контента у вас есть вспышка частично оформленного контента.

По этой причине вы должны быть осторожны при рассмотрении вопроса о переносе CSS. Безопасным подходом было бы только отложить CSS, который используется для отображения контента, который сам откладывается, например, скрытые элементы, которые отображаются после взаимодействия с пользователем.