Опубликовано автор в категориях CMS, Drupal, Верстальщику.

12361

Думаю, что следует начать с того, что Drupal изначально дает нам определенный инструментарий по управлению оптимизацией фронтенда, которого нет изначально в других системах управления контентом. Некоторые вещи видны сразу в адиминке, а для некоторых есть функции и хуки, которые можно использовать как на уровне модуля, таки на уровне темы Drupal. В этом обзоре мы рассмотрим базовые возможности оптимизации фронтенда сайта на Drupal, а также специальные модули, которые позволят расширить доступный стандартный арсенал.

Собственные средства

Самое первое, что мы можем сделать для улучшения производительности нашего сайта на Drupal — это обратится к админке и в разделе настроек производительности (admin/config/development/performance) включить агрегацию CSS и JavaScript.

Агрегация CSS и JavaScript

Это конечно же, не так много, но все-таки кое-что. А дальше, как советуют нам базовые принципы производительности фронтента, нам желательно переместить все JavaScripts в нижнюю часть страницы, перед закрывающим тегом «body», или как можно ближе к нему.

Advanced CSS/JS Aggregation

AdvAgg-modules_0

Модуль, который значительно расширяет ваши возможности оптимизации производительности фронтенда 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

shia-magic

Этот модуль помимо базовых возможностей оптимизации фронтенда, также позволяет добавить к вашим темам полезные фичи разработчика, поэтому его также стоит описать в этом обзоре.

Многие популярные базовые темы предоставляют полезные инструменты для помощи в оптимизации фронтенда.
Этот модуль объединяет ряд этих полезных инструментов в одном месте.

Вместо того, чтобы каждый в каждой теме повторно реализовать полезные для фронтенда фичи, Magic позволяет держать все это в одном модуле и удобно управлять этим.

Вот что мы имеем на сегодняшний день:

  • Улучшения в CSS агрегации
  • Возможность явно исключить CSS и JS файлы
  • Переместить JavaScript в нижнюю часть страницы
  • Rebuild Тема реестра на перезагрузки страницы
  • Отображать индикатор ширины для Viewport
  • Безопасно портировать JavaScript под Drupal 8  в обращении (презентации Watch Теодор Biadala в DrupalCon Праге об обновлении JS в Drupal 8 для предварительный просмотр)

Модуль также позволит экспортировать набор собственных настроек для каждой из ваших тем. Посетите страницу «Настройки» вашей темы для примера (например,/admin/appearance/settings/bartik).

2 комментария к записи “Модули для оптимизации фронтенда сайта на Drupal”

  1. Вадим

    Спасибо за полный обзор фич Advanced Aggregation, давно хотел узнать, да некогда было разбираться :-).

    Кстати, у вас, здесь, похоже, опечатка или неоконченная мысль:
    «Использование блокировки, так что несколько запросов на к одному и тому же файлу».

    Ответить

Trackbacks/Pingbacks

  1.  Оптимизируем изображения на сайте Drupal | Master-web

Оставить комментарий

  • (не будет показан)