For a better experience please change your browser to CHROME, FIREFOX, OPERA or Internet Explorer.

Чем быстрее ваш сайт реагирует на действия вашей аудитории, тем лучше для вашего бизнеса и СЕО показателей. И соответственно, лучше для ваших продаж. Мало кто будет ждать загрузку товара 3-9 сек. И тем более, никто не будет серфить по вашему сайту или интернет магазину в поисках нужного товара или информации. Когда каждый переход занимает до 10 секунд.
Для повешения скорости сайта, рассмотрим критический CSS.

Что такое Критический CSS (Critical CSS)?

Критический CSS (критикал, critical css) в вашем сайте или интернет магазине — это CSS, который используется для стилизации вашего сайта. Для начала, вам нужно понять, что пользователь должен увидеть в первые миллисекунды загрузки сайта. Верно, содержимое, оно может включать в себя навигацию, сайтбар, тексты и т.д.

В наше время, веб-разработки настоятельно рекомендуют устанавливать критический CSS. Он будет размещен на вашей веб-странице следующим образом:

<!doctype html>
<html>
  <head>
    <title>An Optimized Web Page</title>
    <style type="text/css"> (Ваш минимизированный критический CSS) </style>
  </head>
  <body>
     (Your markup)
  </body>
</html>

Какова необходимость встраивания критического CSS?

Перейдете на страницу Google PageSpeed ​​Insights и проанализируете одну из своих страниц. Вы увидите множественные предупреждения о доставке критического CSS. А также асинхронной загрузки стилей, блокирующих содержимое.

Браузеры не отображают содержимое ваших страниц, если они не загрузили все CSS-файлы. Это очень важно, когда нужно загрузить большое количество CSS файлов.

Но в чем смысл критического CSS? Все достаточно просто. Для поисковой системы, очень важна скорость загрузки сайта. Например для Google очень важно чтобы пользователь как можно быстрее увидел содержимое сайта. Но пока ваши CSS-файлы не загрузятся, содержимое не будет отображено, а это уже плохо и вы получаете предупреждение. Не у всех пользователей быстрый интернет, и по этой причине, важно сначала загрузить критический CSS а потом уже сами файлы.

Если ваш сайт имеет встроенный критический CSS, пользователь сможет получить доступ к контенту, даже если основные CSS файлы не будут загружены.

Изображение ниже отображает разницу между сайтами с критическим CSS и без него. На первом скриншоте вы видите сайт без критического CSS, а на втором скриншоте вы видите сайт с критическим CSS.

Критический CSS или как отложить вызов CSS

Как сгенерировать критический CSS

Достаточно трудоемко собирать критический CSS вручную, это долго и не эффективно. Проще обратиться к CSS генераторам для быстрого создания такого файла.

Можно использовать различные генераторы критических css

Sitelocity
Jonassebastianohlsson
Так же, есть дополнение для Google chrome