Устранение визуализации-блокировки JavaScript и CSS - необходимы консультации

Question

Google PageSpeed ​​Insights отмечает это как-то, что я должен исправить - я прочитал руководство по оптимизации доставки CSS по адресу https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery, но я смущен тем, что наилучшая практика, и также на какие ресурсы делают блокировку, а какие нет?

Является ли Google предлагающим удалить ссылки стилей из заголовка страницы и заменять встроенными стилями, чтобы сделать что-то визуализировать, а затем использовать Javascript для запуска внешней таблицы стилей для загрузки при запуске window.onload? Не будет ли это просто задерживать процесс перехода на страницу «правильно оформленная» - разве не лучше, чтобы браузер начал загружать CSS как можно скорее?

Answer 1

Да, это в значительной степени то, что рекомендует ссылка на страницу. Поместите минимальное количество CSS (до тех пор, пока оно небольшое количество) непосредственно в разметке HTML в теге <style>. Затем включите полный набор стилей в конце документа. (В примере он фактически не загружается с помощью JavaScript как таковой, а ссылка на внешнюю таблицу стилей помещается в тег <noscript>. Это немного взломанный, но он выполняет эту работу. Вы также можете запросить таблицу стилей через AJAX и вставлять его непосредственно с помощью JavaScript.)

Этот подход работает только в том случае, если вы можете изолировать минимальный CSS, необходимый для вашей страницы, и этот объем CSS достаточно мал. Если, например, вы создаете одностраничное веб-приложение, тогда многие из ваших правил CSS могут быть для частей приложения, отличных от исходного. В этом случае эти дополнительные правила могут быть помещены во внешнюю таблицу стилей. Или, может быть, у вас есть свод правил строго для всплывающих диалоговых окон. Эти правила также могут быть отложены.

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