• Скидка на платные статусы  -50%!

    получи безграничный доступ к нашим файлам, скриптам, курсам и другим инфопродуктам со скидкой -50%

     

    Подробнее

Перенос загрузки скриптов JS в футер

Васёк

Проверенные
11.10.17
106
16
#1
Почему нужно грузить js после контента можно почитать, например
Вы не можете видеть эту ссылку.
. Если кратко - это нужно для того, чтобы ускорить загрузку страниц.

На гите
Вы не можете видеть эту ссылку.
делить теги на те, что нужно грузить в head и те, что в перед </body> потерпела неудачу.

В чем сложность:
Нам надо оставить часть скриптов сверху, а часть снизу - а функция для вывода js только одна $this->printJavascriptTags. Сверху должна быть статистика и те скрипты, без которых код на странице выдаст ошибки при загрузке.

Решение этой задачи сводится к внесению изменений в один файл шаблона main.tpl.php. Минус в том, что мы больше не сможем использовать методы addMainJS, addControllerJS, addJSFromContext для скриптов, которые нужно загрузить в секцию head, но если на кону скорость загрузки страницы... Еще минус в том, что мы грузим jquery напрямую и возможны ситуации, когда этот скрипт повторно загрузится снизу.. Обычно такого не должно быть, но ситуация возможна.
Решение
1. Подключаем jquery в блоке head напрямую.
В шаблоне вместо
Код:
<?php $this->addMainJS("templates/{$this->name}/js/jquery.js"); ?>
вставляем строку
Код:
<script type="text/javascript" src="/templates/default/js/jquery.js"></script>
2. Грузим сверху все css и другие теги (сюда могут попасть и js, которые добавлены через функцию addHead)
Заменяем строку
Код:
<?php $this->head(); ?>
на
Код:
<?php $this->head(true, false, true); ?>
3. Добавляем перед </body> строку
Код:
<?php $this->printJavascriptTags(); ?>
После этих замен сверху будут грузиться все стили, jquery и другие теги, которые добавлены через метод addHead.

Остается вопрос - что делать со скриптами, которые обязательно должны грузиться сверху? - их нужно подключать не через addMainJS или addControllerJS. Подключать их теперь нужно только через addHead и тогда они попадут в блок <head></head>.