critical css Критические стили / Critical CSS

Критические стили - это стили необходимые для отрисовки видимой части страницы или применяемые на данной странице, то есть без лишних стилей.

Как многие знают в стандартном шаблоне

bootstrap.min.css

font-awesome.min.css

Блокируют рендер из-за неиспользуемых стилей в результате чего PageSpeed Insights ругается на ресурсы, блокирующие отображение и предлагает встроить критическую часть данных JS/CSS в код HTML и отложить загрузку остальных ресурсов. А чтобы сократить расход трафика, удалить ненужные правила из таблиц стилей и отложите загрузку кода CSS, который не используется в видимой части страницы.

В интернете рекомендуют в основном такие библиотеки с сотнями файлов которые предназначены для node.js или сайты для ручной сборки критических стилей

https://github.com/filamentgroup/criticalCSS

https://github.com/pocketjoso/penthouse

Глядя на все эти решения, то я написал для разработчиков лёгкую JavaScript библиотеку в один файл:

А для других пользователей данная библиотека на JavaScript и PHP здесь: