Думаю, что следует начать с того, что Drupal изначально дает нам определенный инструментарий по управлению оптимизацией фронтенда, которого нет изначально в других системах управления контентом. Некоторые вещи видны сразу в адиминке, а для некоторых есть функции и хуки, которые можно использовать как на уровне модуля, таки на уровне темы Drupal. В этом обзоре мы рассмотрим базовые возможности оптимизации фронтенда сайта на Drupal, а также специальные модули, которые позволят расширить доступный стандартный арсенал.
Собственные средства
Самое первое, что мы можем сделать для улучшения производительности нашего сайта на Drupal — это обратится к админке и в разделе настроек производительности (admin/config/development/performance) включить агрегацию CSS и JavaScript.
Это конечно же, не так много, но все-таки кое-что. А дальше, как советуют нам базовые принципы производительности фронтента, нам желательно переместить все JavaScripts в нижнюю часть страницы, перед закрывающим тегом «body», или как можно ближе к нему.
Advanced CSS/JS Aggregation
Модуль, который значительно расширяет ваши возможности оптимизации производительности фронтенда Drupal. Итак, что же он умеет?
- Агрегация CSS / JS по требованию.
- Защиты от повторной CSS / JS агрегации. Использование блокировки, так что несколько запросов к одному и тому же файлу будут пресекаться.
- Можно добавить JS в любой регион темы и при этом файлы в регионе также будут агрегированы.
- Комбинации CSS-файлов с помощью медиа-запросов.
- Ограничивает собираемые CSS файлы менее чем 4095 CSS селекторами (предотвращает ограничение IE 6-9).
- Gzip поддержка. Все агрегированные файлы могут быть предварительно сжаты в .gz файлы и отдаваться Apache. Это быстрее, чем сжимать каждый файл на каждый запрос.
- Bundler Submodule. Позволяет группировать файлы по их принадлежности друг к другу.
- Modifier Submodule. Добавляет вкусные «плюшки».
- Препроцессинг для всех CSS / JS;
- Помещать JS вниз страницы;
- добавить defer атрибут для всех JS;
- Встраивать CSS / JS инлайн для заданных путей;
- удалить неиспользуемые теги JavaScript, если это возможно, в данном случае будут сканированы все включаемые файлы JS на предмет связи использования JQuery и Drupal, если они не найдены, то JavaScript будет удалятся со страницы по умолчанию;
- встроенная поддержка для асинхронной загрузки JavaScript;
- CSS/JS Compress Submodules. Может минимизировать файлы и встроенный CSS / JS.
- CSS/JS Validator Submodule. Валидирует все файлы CSS, используя jigsaw.w3.org. Проверяет все файлы CSS с CSSLint. Проверяет все файлы JS с JSHint.
Magic Module
Этот модуль помимо базовых возможностей оптимизации фронтенда, также позволяет добавить к вашим темам полезные фичи разработчика, поэтому его также стоит описать в этом обзоре.
Многие популярные базовые темы предоставляют полезные инструменты для помощи в оптимизации фронтенда.
Этот модуль объединяет ряд этих полезных инструментов в одном месте.
Вместо того, чтобы каждый в каждой теме повторно реализовать полезные для фронтенда фичи, Magic позволяет держать все это в одном модуле и удобно управлять этим.
Вот что мы имеем на сегодняшний день:
- Улучшения в CSS агрегации
- Возможность явно исключить CSS и JS файлы
- Переместить JavaScript в нижнюю часть страницы
- Rebuild Тема реестра на перезагрузки страницы
- Отображать индикатор ширины для Viewport
- Безопасно портировать JavaScript под Drupal 8 в обращении (презентации Watch Теодор Biadala в DrupalCon Праге об обновлении JS в Drupal 8 для предварительный просмотр)
Модуль также позволит экспортировать набор собственных настроек для каждой из ваших тем. Посетите страницу «Настройки» вашей темы для примера (например,/admin/appearance/settings/bartik).
Спонсоры статьи: