Модулі для оптимізації фронтенда сайту на Drupal

  1. Власні кошти
  2. Advanced CSS / JS Aggregation
  3. Magic Module

Думаю, що слід почати з того, що 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).

Отже, що ж він вміє?