В этой статье мы рассмотрим, как настроить и включить 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 — один на все страницы, поэтому важно не забыть про листинг, продуктовую страницу, страницу регистрации и логина
