В этой статье мы рассмотрим, как настроить и включить critical css в Magento 2.

Что ты такое, critical css?

И HTML, и CSS замедляют вывод страницы. HTML-документ нужно обработать для создания модели DOM, без которой на странице не будет контента. CSS-документ необходимо сначала загрузить, а далее обработать (CSS Object Model).

Чтобы ускорить процесс, необходимо упрощать CSS и использовать media-запросы. Так же увеличению производительности способствует critical css.

Как мы уже говорили выше, все стили CSS, загруженные из внешних файлов, рассматриваются как блокирование рендеринга. Это означает, что веб-страница не будет отображаться, пока эти файлы не будут загружены. Используя critical css, мы предоставляем «критический CSS», встроенный в, и делаем загрузку всех остальных стилей асинхронной.

Асинхронная загрузка достигается путем добавления новой директивы preload в атрибут rel

Для поддержки кроссбраузерности rel=«preload» в Magento используется полифилл.

Важная особенность, в «критический css» входит только видимая часть страницы.

Magento 2: Critical CSS