Быстрая генерация критического CSS

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

Для чего выделять критический CSS

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

В этом руководстве вы узнаете, как отложить некритичный CSS с целью оптимизации критического пути рендеринга и улучшения First Contentful Paint (FCP).

Critical Path CSS Generator

Заходим на сайт Critical Path CSS Generator в поле URL TO WEB PAGE TO CREATE CRITICAL CSS FOR пишем адрес страницы для которой мы хотим выделить критический CSS
А в поле FULL CSS TO EXTRACT CRITICAL CSS FROM. CAN BE MINIFIED. вписываем весь CSS страницы и нажимаем кнопку «Create Critical Path CSS». После чего получаем наш критический CSS.

Далее встраиваем этот критический css в head обернув в:

<style type="text/css">
здесь критические стили
</style>

А весь остальной css рекомендую перенести в низ (ближе к закрытию body — перед подключением скриптов), вот такой конструкцией:

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Это не стандартный способ загрузки CSS. Вот как это работает:

• link rel="preload" as="style"запрашивает таблицу стилей асинхронно. Вы можете узнать больше о preload в руководстве по предварительной загрузке критически важных ресурсов .
• Атрибут onload в linkпозволяет CSS для обработки , когда он заканчивает загрузку.
• «обнуление» onload обработчика после его использования помогает некоторым браузерам избежать повторного вызова обработчика при переключении атрибута rel.
• Ссылка на таблицу стилей внутри noscript элемента работает как резерв для браузеров, которые не выполняют JavaScript.

Что делать если у сайта много таблиц стилей?

Вам их нужно объединить, почти во всех CMS, есть модуля для этого, в modx это можно сделать при помощи бесплатного дополнения MinifyX, в WP можно объединить при помощи плагина Autoptimize. Если у вас простой статический сайт, то объедините их в ручную.