Оптимизация доставки 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, который используется для отображения контента, который сам откладывается, например, скрытые элементы, которые отображаются после взаимодействия с пользователем.