В этой статье мы рассмотрим какие настройки и инструменты по оптимизации есть в Magento 2.
Версия Magento на момент написания статьи — 2.3.4
Производительность веб-сайта — очень важный аспект как и для поисковой системы (более быстрые сайты поднимаются в выдаче выше, чем медленные), так и для посетителей (медленный и тормозящий ресурс врядли будет обладать большой конверсией). В области e-commerce это особо важно.
Давайте посмотрим, что же может предложить нам Magento 2 «из коробки»:
- Настройки кеширования
- Настройки JavaScript
- Настройки CSS
- Настройки изображений
Настройки кеширования
Stores — Configuration — System — Full Page Cache
На выбор предлагается 2 опции: Built-in cache и Varnish cache
Built-in cache — встроенный кеш, Varnish cache — это HTTP ускоритель предназначенный для обслуживания динамических веб-сайтов, и сайтов имеющих API.
Опция varnish помечена как recommended, т.к. varnish cache гораздо производительнее встроенного built-in. По этому крайне важно не забыть включить и настроить varnish на сервере, и включить его в Magento.
Настройки JavaScript
Доступны только в developer моде
Stores — Configuration — Developer- JavaScript Settings
(1) Merge JavaScript Files — объединяет все JS файлы в один.
Без включенной опции Enable JavaScript Bundling «склеится» не так много файлов, в основном RequireJs конфиги.
Все остальные JS-файлы будут загружены по-требованию через RequireJs
(2) Enable JavaScript Bundling — включение JavaScript бандлинга.
При включении этой опции все JS-файлы буду объединены в «бандлы», согласно настройкам в файле view.xml
В view.xml настраивается размер каждого банда + исключения из него. Более подробно о view.xml Вы можете почитать в другой нашей статье.
Вот как это будет выглядеть во вкладке Network в Chrome Developer Tools (без JS-минификации):
Если же Вы включите опцию «Merge JavaScript Files», то на выходе вы получится 1 JS-файл вместо нескольких бандлов
В Magento также присутствует Advanced JavaScript Bundling, этот материал мы вынесли в отдельную статью.
(3) Minify JavaScript Bundling — минификация JavaScript файлов.
Минифицирует JavaScript файлы удаляя пробелы, переносы строк и пр., тем самым итоговый вес сокращается
Работает только в production моде.
Добавляет к файлу .min:
Будьте очень внимательны при настройке JS-бандлинга в view.xml, не забывайте дописывать .min в js-файлах исключения.
(4) Moove JS Code To The Bootom Of The Page — Перенос подключения JS-файлов из «хидера» в «футер»
Детальное описание это опции, я думаю, смысла не имеет. Жаль, только, что добавили ее только с версии 2.3.2, раньше этого очень не хватало, приходилось использовать другие решения.
Настройки CSS
Доступны только в developer моде
Stores — Configuration — Developer- CSS Settings
(1) Merge CSS Files — объединяет все css файлы в «один» (за исключением print.css)
Однако, после включения опции Вы можете заметить следующее:
Почему 2 CSS-файла? Все достаточно просто, в Magento как правило базово присутствует 2 css-файла: styles-m.css (базовые, мобильные стили) и styles-l.css (десктопные стили)
Таким образом и получается 2 файла. В файл для базовых, мобильных стилей «мержатся» такие файлы, как calenadar.css, которые подключены как css «напрямую», и не содержат в себе media-аттрибутов, то есть общие и для десктопа и для мобильной версий стили.
По этому, будьте внимательны при подключении каких-либо css-файлов. Если внутри подразумевается использование media-аттрибутов, то лучше все сделать через less, таким образом вы оптимизируете этот скрипт.
(2) Minify CSS Files — минификация css файлов, удаляются пробелы, переносы строк и пр., тем самым сокращается итоговый вес файла
Так же, как и у JavaScript merge к файлу добавляется .min
(3) Use CSS Critical Path — использовать «критический» css.
Помогает избежать блокирующего рендеринга со стороны CSS.
Настройки изображений
Stores — Configuration — System — Images Upload Configuration
В этой секции мы можем настроить максимальные размеры изображения, а так же качество.
По у молчанию качество установлено в 80, как правило, это оптимальная настройка.
На этом — все, вот так вот выглядит настройка оптимизации средствами Magento2.