Размещаем JS скрипты вниз страницы - Drupal 7

Одним из хороших способов по ускорению работы сайта является помещение JS скриптов вниз страницы. Но каким образом это сделать в Drupal 7?

Предположим, что у Вас есть своя тема оформления. Тогда нам потребуется сделать один обязательный шаг, и один опциональный.

Правим html.tpl.php

Если файла html.tpl.php еще нет в Вашей теме оформления, то его можно скопировать из modules\system\html.tpl.php. В результате файл должен выглядеть следующим образом:

<!DOCTYPE html>

<html<?php print $html_attributes; ?>>

<head>
  <?php print $head; ?>
  <title><?php print $head_title; ?></title>
  <?php print $styles; ?>
  <?php print $head_scripts; ?>
</head>

<body<?php print $body_attributes;?>>
  <?php print $page_top; ?>
  <?php print $page; ?>
  <?php print $scripts; ?>
  <?php print $page_bottom; ?>
</body>

</html>

Здесь переменная $scripts в отличие от оригинала (modules\system\html.tpl.php) перемещена вниз, а вместо неё добавлена переменная $head_scripts. Переменная $head_scripts необходима в тех случаях, когда все же требуется некоторые JS скрипты расположить вверху страницы, если Вам это не требуется, просто удалите переменную.

Правим template.php или поддержка JS скриптов в шапке (Опционально)

В случае, если мы хотим сохранить возможность загружать скрипты в шапку сайта (т.е. в предыдущем шаге использовали $head_scripts), тогда потребуется добавить следующий код в Ваш template.php:

/**
 * Implements hook_process_html().
 */
function THEMENAME_process_html(&$vars) {
  $vars['head_scripts'] = drupal_get_js('head_scripts');
}

Где THEMENAME - название Ваше темы оформление. Данный код позволит добавляться в этой области JS скрипты, например следующим образом:

/**
 * Implements hook_preprocess_html().
 */
function THEMENAME_preprocess_html(&$vars) {
  // Move JS files "$scripts" to page bottom for perfs/logic.
  // Add JS files that *needs* to be loaded in the head in a new "$head_scripts" scope.
  // For instance the Modernizr lib.
  $path = drupal_get_path('theme', 'THEMENAME');
 drupal_add_js($path . '/js/modernizr.min.js', array('scope' => 'head_scripts', 'weight' => -1, 'preprocess' => FALSE));  
}

Исходник: https://gist.github.com/pascalduez/1418121

Drupal 7 Оптимизация скорости сайта
comments powered by Disqus