critical css Критические стили / Critical CSS
Entry posted by buslikdrev in Модули ·
886 просмотров
Критические стили - это стили необходимые для отрисовки видимой части страницы или применяемые на данной странице, то есть без лишних стилей.
Как многие знают в стандартном шаблоне
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 здесь:
-
4
1 комментарий
Рекомендованные комментарии
Создайте аккаунт или войдите в него для комментирования
Вы должны быть пользователем, чтобы оставить комментарий
Создать аккаунт
Зарегистрируйтесь для получения аккаунта. Это просто!
Зарегистрировать аккаунтВойти
Уже зарегистрированы? Войдите здесь.
Войти сейчас