Вдосконалена агрегація CSS та JS за допомогою Drupal-модуля AdvAgg — блог Drudesk
050 640 98 44
support@drudesk.com

Ще раз про швидкість: агрегація CSS/JS за допомогою Drupal-модуля AdvAgg

Магічна інтерактивність і неймовірна привабливість — саме такі якості дарують сайтам CSS та JavaScript! І до цього може додатись неперевершена швидкість — потрібно лише знайти до CSS і JS правильний підхід. На цю тему є багато порад, наприклад, про перенесення CSS та JavaScript в футер або зменшення цих файлів. Сьогодні ми поговоримо про вдосконалену агрегацію CSS і JS як спосіб підвищити швидкість Drupal-сайту. Звісно, інструмент для цього також має бути вдосконаленим та сучасним. Тож зустрічайте модуль Advanced CSS/JS Aggregation або, скорочено, AdvAgg.

Drupal-модуль AdvAgg та суть його роботи

Цей Drupal-модуль уже не вперше стає «героєм» наших статей, але AdvAgg на це заслуговує. Як складний контрибний модуль, він має безліч можливостей, головна з яких — вдосконалена (advanced) агрегація CSS та JavaScript-файлів.

Агрегація CSS/JS: для чого вона потрібна

Суть агрегації в тому, аби об’єднувати файли JavaScript і CSS у групи (бандли) з метою зменшення кількості запитів HTTP, необхідних для завантаження сторінки. Замість кількох десятків файлів сторінка завантажиться усього з декількома групами файлів. Це шлях до суттєвого підвищення швидкості сайтів.

Завдяки чому AdvAgg є вдосконаленим інструментом

Drupal має вбудовані можливості з агрегації, але модуль Advanced CSS/JS Aggregation їх суттєво покращує завдяки більш ефективним підходам до групування, кешування та стискання файлів.

Модуль має безліч субмодулів, кожен з яких вносить свій вклад в ідеальний процес агрегації. Це Compress CSS, Compress Javascript, Bundler, CSS/JS Validator, External Compression, Modifier, CSS/JS Aggregation, а також CDN CSS та CDN JavaScript, які працюють з мережами доставки контенту.

Серед безмежних можливостей AdvAgg щодо агрегації, варто виділити хоча б декілька прикладів:

  • Агрегація на вимогу.
    Модуль здатен створювати необхідні CSS та JavaScript бандли на вимогу, якщо їх ще не існує.
  • Кількість бандлів обираєте ви.
    AdvAgg дозволяє вам визначати кількість бандлів на одну веб-сторінку.
  • Захист від подвійної роботи.
    У разі декількох запитів до однієї сторінки, AdvAgg застосовує блокування, аби запобігти створенню однакових бандлів знову і знову.
  • Покращене кешування — запорука швидкості.
    Мудрі підходи AdvAgg до кешування включають в себе: повне кешування JavaScript і CSS із нульовим введенням/виведенням у випадку, якщо файл уже існує; видалення бандлів з кешу тільки тоді, коли вони не використовуються тривалий час; сканування файлів на предмет змін, щоб очистити кеш і т.д.
  • Ефективне стискання CSS/JS.
    Модуль, разом зі своїми субмодулями, ефективно зменшує файли шляхом стискання, пропонуючи для цього багато методів, які можна обрати в налаштуваннях.

Налаштування AdvAgg

Для початку, завантажте і встановіть AdvAgg, а також увімкніть його корисні субмодулі. Важливо, аби опції «Кешувати сторінки для анонімних користувачів» та «Кешувати блоки» були вимкнені, оскільки вбудоване кешування Drupal та AdvAgg не створені для ефективної роботи разом. І, навпаки, опції «Агрегувати і стискати CSS-файли» і «Агрегувати і стискати JavaScript-файли» на сторінці налаштування швидкодії повинні бути увімкнені.

У вкладці «Advanced CSS/JS Aggregation» найважливіша опція — це «Увімкнути розширену агрегацію». Якщо вона вимкнена, то модуль просто не буде працювати.

Ви також можете зробити додаткові налаштування стосовно кількості бандлів, вибору методів стискання, використання медіа-запитів, валідації файлів і багатьох інших моментів.

Аби повною мірою використовувати можливості вдосконаленої агрегації CSS і JavaScript, вам може знадобитись команда із вдосконаленим рівнем володіння Drupal’ом, яка чекає на вас тут. Наші послуги включають в себе встановлення Drupal-модуля AdvAgg і налаштування його згідно з потребами сайту, а також тестування результату. Крім того, ми можемо визначити інші способи підвищити швидкість вашого сайту. Все буде “Advanced”! ;)