Як перенести JavaScript / CSS в футер і збільшити швидкість Drupal-сайту — блог Drudesk
050 640 98 44
support@drudesk.com

Перенесення файлів JS / CSS у футер для збільшення швидкодії Drupal-сайту

Як бігуни у марафонській дистанції, найшвидші сайти завжди отримують призи (а саме: лояльність відвідувачів, клієнтів та пошукових систем). А що повинен уміти робити бігун, аби набирати хорошу швидкість? Окрім інших навичок, він повинен вміти тримати баланс і правильно розподіляти вагу свого тіла. Аналогічно, з-поміж численних секретів того, як оптимізувати швидкість сайту, є один, що стосується перенесення JavaScript і CSS у футер. Давайте дізнаємося, чому таке розташування елементів дозволяє сайтам стати легшими та «бігати» швидше, та як розмістити ці елементи у футер на Drupal-сайті.

Покращена швидкодія сайтів завдяки перенесенню JavaScript і CSS у футер

Хоча JS робить сайти більш інтерактивними та цікавими, та під час свого завантаження і запуску він може дещо знижувати швидкість видачі сторінки. А якщо перемістити JavaScript і CSS із хедера в футер, в першу чергу буде завантажуватись HTML, а потім запускатиметься JS і застососуватимуться стилі. Користувачам не потрібно буде чекати, адже вони дуже швидко побачать основну частину сторінки, а ефекти JS та CSS підтягнуться згодом. Від цього значно виграє швидкодія сайту.

До речі, перенесення JavaScript у футер — це рекомендація таких відомих сервісів з аналізу швидкості, як Google PageSpeed та Yslow.

В Drupal’і JavaScript завантажується ближче до верхньої частини сторінки. Але ніщо не завадить підвищити швидкість вашого Drupal-сайту, тож є одразу два способи перемістити JS та CSS в його футер:

  • за допомогою спеціального Drupal-модуля
  • вносячи зміни у файл шаблону

1) Перенесення JavaScript і CSS у футер за допомогою модуля AdvAgg 

Є дуже корисний модуль для Drupal 7 і для Drupal 8 під назвою Advanced CSS/JS Aggregation або AdvAgg, метою якого є покращена швидкодія сайтів. Він допоможе вам розмістити файли JavaScript у футер, а також ефективніше зменшувати та агрегувати їх (організовувати в групки для зменшення кількості запитів). Крім того, AdvAgg дасть вам більше контролю над усіма цими маніпуляціями.

AdvAgg має ряд корисних підмодулів, і вам варто увімкнути наступні: Bundler, Compress CSS, Compress Javascript, CSS / JS Validator, External Compression, Modifier, CSS / JS Aggregation.

Щоб AdvAgg коректно працював, переконайтесь, що у вкладці Configuration — Development — Performance вимкнено опції, пов’язані з кешуванням: Cache pages for anonymous users, Cache blocks (Кешувати сторінки для анонімних користувачів, Кешувати блоки). І, навпаки, увімкненими повинні бути опції, пов’язані з агрегацією: Aggregate and compress CSS files, Aggregate JavaScript files (Агрегувати і стискати файли CSS, Агрегувати файли JavaScript).

Щоб розмістити JS у футер, зайдіть у Modifications та оберіть Adjust JavaScript location and execution (Налаштувати розташування та запуск JavaScript). Найбезпечніший варіант — обрати, щоб переносилось «усе, крім бібліотек JavaScript» (all but JavaScript libraries).

У вкладці Validations є корисна опція Flush only the AdvAgg cache (Очищення тільки кешу AdvAgg).

Можна дізнатися більше порад із розширеного налаштування модуля AdvAgg у цьому відеоуроці

2) Перенесення JavaScript і CSS у футер за допомогою файлу TPL

Інша можливість перенести JS та CSS у футер — це зайти у файл page.tpl.php вашої теми і перенести наступний рядок у футер:

 print $scripts;

Однак, ця опція вимагає кращого розуміння коду, тоді як робота з модулем AdvAgg може підійти і адміністраторам сайтів.

Нехай швидкість вашого Drupal-сайту зростає, а він стає найзручнішим, найефективнішим та просто бездоганним — від хедера до футера! Команда Drudesk може допомогти вам перенести JavaScript і CSS у футер, а також визначити інші способи підвищити швидкодію вашого сайту. Набирайте швидкість, вигравайте в усіх «перегонах» і отримуйте свої призи! Давайте обговоримо це просто зараз.