В этой статье мы рассмотрим какие настройки и инструменты по оптимизации есть в 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.

Magento 2: Настройки frontend оптимизации