В этой статье мы рассмотрим, как настроить и включить 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» входит только видимая часть страницы.