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