Matrix Field в Craft CMS: настройка под компонентную верстку

Разработчики часто наступают на грабли с Matrix Field в Craft CMS: то N+1 запросы кладут сервер, то редакторы просят «а можно ещё один тип блока». Однажды к нам пришёл клиент с сайтом, где страница 'О компании' содержала 25 блоков, каждый с изображением. Загрузка страницы занимала 8 секунд — из-за 25 отдельных запросов к медиа. После правильной настройки Matrix Field с eager loading время сократилось до 1.2 секунды. Мы переделали десятки проектов на Craft и выработали подход, при котором Matrix не тормозит и не бесит команду.

Как спроектировать блоки, чтобы не переделывать через месяц

В типовом корпоративном сайте поле pageBody может содержать 6–10 типов блоков. Каждый блок — это микроструктура: текст, изображение, ссылка, цитата, код, статистика. Важно заранее продумать не только названия, но и набор полей — потом добавить поле сложнее, чем убрать.

Пример оптимальной структуры для лендинга:

pageBody (Matrix) ├── hero │ ├── heading, subheading, backgroundImage, ctaButton ├── richTextContent │ └── content (Redactor) ├── imageWithCaption │ ├── image, caption, alignment ├── twoColumns │ ├── leftContent, rightContent (Redactor) ├── testimonial │ ├── quote, author, role, avatar ├── stats │ └── items (Table field внутри) ├── ctaBanner │ ├── heading, text, buttonLabel, buttonUrl └── codeSnippet ├── language, code 

Мы рекомендуем использовать Table field для списков (статистика, тарифы) — это быстрее, чем вложенный Matrix, и проще кэшируется.

Twig-рендер: switch vs include vs component

Большинство проектов используют {% switch %} внутри цикла — это надёжно и читаемо. Но при 10+ блоках шаблон раздувается. Альтернатива — вынести каждый блок в отдельный include с именем по хендлу. Это упрощает поддержку, но немного медленнее из-за множественных вызовов include. Оптимальный вариант — рендерить блоки через компонентный подход с кэшированием фрагментов.

Наш опыт: для страниц с 15+ блоками выигрыш в 40-50 мс при включении cache-тегов.

Почему N+1 убивает производительность и как этого избежать

Без eager loading каждый блок с полем Assets генерирует отдельный запрос. Например, блок image ищет картинку, блок testimonial — аватар. Если на странице 10 блоков, получаем 10 запросов к БД, плюс сам запрос списка блоков. Решение — один вызов with(): {% set blocks = entry.pageBody.with(['image', 'avatar', 'backgroundImage']).all() %}.

Для блоков, содержащих вложенные Matrix (например, табы с контентом внутри), используйте .with()['subMatrixField.childField'] — Craft поддерживает глубокий eager loading. Подробнее читайте в официальной документации Craft CMS.

Что делать, если Matrix Field стал тормозить панель управления

Matrix с 50+ блоками в CP — частый кошмар. Причина: каждый блок рендерит свои поля. Решение — фрагментировать матрицу на несколько полей: например, отдельный Matrix для «шапки», отдельный для «тела» и «футера». Либо использовать Neo Field от McDowell — аналог Matrix с поддержкой вложенности, но без проблем с производительностью CP.

Выбор инструмента: когда Matrix, когда Neo, когда Table

Matrix — лучшее решение для 80% проектов. Neo стоит брать только если нужна вложенность более двух уровней (например, сайт с вариативными секциями). Table и SuperTable — для табличных данных, где количество полей фиксировано.

Кэширование блоков: стратегии для Matrix

Matrix-блоки ломают кэширование страниц, если не продумать стратегию. Решение — кэшировать каждый блок отдельно с тегами. В Twig:

{% cache globally using key 'block-' ~ block.id tags 'matrixBlock:' ~ block.id %} {% include 'matrix/_' ~ block.type.handle %} {% endcache %} 

При изменении блока Craft инвалидирует только его кэш. Для статических блоков (richText) можно кэшировать на день, для медиа — на час.

pageBody (Matrix): - hero (heading, subheading, backgroundImage, ctaButton) - richTextContent (content Redactor) - imageWithCaption (image, caption, alignment) - twoColumns (leftContent, rightContent Redactor) - testimonial (quote, author, role, avatar) - stats (items Table field) - ctaBanner (heading, text, buttonLabel, buttonUrl) - codeSnippet (language, code)