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



Таким образом, мы можем значительно улучшить время «первого» отображения наших страниц.

Как включить?

Stores — Settings — Configuration — Advanced — Developer

Вкладка Advanced доступна только в developer моде

Выставить Use CSS critical path в yes

Или же воспользоваться командной строкой: bin/magento config:set dev/css/use_css_critical_path 1

Критический CSS должен быть расположен в app/design/frontend/vendor_name/theme_name/theme_name/web/css/critical.css

Как сгенерировать?

Полностью ручной процесс создания достаточно трудоемкий и времязатратный.

Чтобы создать критический CSS для вашей темы, можно использовать генераторы, такие как Penthouse или Critical.

Или же обратиться к достаточно хорошему он-лайн ресурсу.



Необходимо в поле (1) вставить url-адрес на ресурс, а в поле (2) вставить css, который используется на сайте и нажать на кнопку Create



В результате мы получим сгенерированный и минифицированный critical css



Определенную часть ручной работы, выполнить конечно придется:

• Проверка и корректировка сгенерированного critical css
• Не забывайте, так же, что critical.css в Magento — один на все страницы, поэтому важно не забыть про листинг, продуктовую страницу, страницу регистрации и логина