Как перенести 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 в футер, а также определить другие способы повысить быстродействие вашего сайта. Набирайте скорость, выигрывайте во всех «гонках» и получайте свои призы! Давайте обсудим это прямо сейчас.

Похожие материалы