Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


buslikdrev

1 669 переглядів

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

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

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 здесь:

 

  • +1 4

1 коментар


Recommended Comments

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.