Как подключить скрипты и где лучше это сделать

Віталий

10 років ago

Доброго времени суток. 🙂

В этой статье хочу Вам рассказать о том как подключать javascript скрипты, или jQuery и его библиотеки. Каждый из вебмастеров или просто тех, кто сам вносит изменения и создает свой сайт, сталкивался с тем, что нужно подключить сторонние скрипты, чтобы иметь возможность вывести какой нибудь интересный элемент. Это может быть меню с анимацией или какой-то таймер, плавающие блоки или фиксированные меню. В общем тысячи разных скриптов, которые помогают, украшают и выполняют определенные функции Вашего сайта. В моих статьях тоже уже не один десяток раз я просил Вас подключить тот или иной скрипт. Каждый раз я пишу что это нужно сделать в шапке переда закрывающимся head или подвале сайта переда закрывающимся body.

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

Хочу поделится с Вами своим опытом. Лично я подключаю все скрипты, все таки в подвале. Дело в том, что любой скрипт - это дополнительная нагрузка на сайт и чем больше Вы подключите скриптов тем дольше будет загружаться Ваш сайт. К тому же, как Вы понимаете сайт начинает грузится именно с шапки и по порядку в низ подгружаются все элементы, поэтому сначала все Ваши скрипты в шапке загрузятся и только потом начнет загружаться основной контент Вашего сайта. Вот по этому я это делаю в подвале. Сначала грузим контент, потом скрипты. К тому же сайты, которые показывают скорость загрузки Вашего сайта, за частую тоже советуют сделать подключение в подвале, для большей оптимизации. Да что там говорить, Google Analytics и его PageSpeed Insights и тот советует убрать все скрипты из шапки сайта.

Так что открываем файл отвечающий за Ваш подвал и перед закрывающимся body подключаем скрипты. Если Вы работаете с WordPress, то нужно это делать после функции wp_footer();.

Следующий момент, касается самого подключения. иногда скрипт занимает две строки, а иногда и 100. А если таких скриптов 5 штук? Ваш подвал превращается в тихий ужас. Чтобы этого избежать, я советую каждый скрипт вставлять в отдельный файл и сохранять его с расширением js. Например у нас есть скрипт и мы сохранили его в файле script.js. Теперь мы должны его подключить к сайту, для этого нужно просто указать ссылку и готовый код будет выглядеть примерно так:

<script type="text/javascript" src="сайт/папка/script.js"></script>

Только если ваш скрипт был заключен в теги, то помещая его в файл, теги не нужно переносить
То есть, скрипт на сайт добавляется так:
<script type="text/javascript"> // ЭТО ОТКРЫВАЮЩИЙ ТЕГ
//тут скрипт
</script> // ЭТО ЗАКРЫВАЮЩИЙ ТЕГ
То в файл добавляется просто скрипт
//тут скрипт, перед ним и после нет открывающего и закрывающего тега!!!

Так делаем для каждого скрипта, который хотите использовать на своем сайте. Такой способ, явно уменьшит количество кода в основных файлах. Также перед всеми такими подключениями, подключается и библиотека jQuery, конечно же если она не подключена по умолчанию системой управления сайтом, как это сделано в WordPress.

Как подключить, мы разобрались, но хочу еще посоветовать один момент. За частую скрипт разбит на строки и как я писал может занимать кучу места. К тому же часто в скриптах используют комментарии, которыми объясняют что и посему и в дополнение много ненужного мусора в виде лишних пробелов. Все это в суме увеличивает размер скрипта и его вес.

Есть способ, как можно уменьшить размер javascript. Есть отличный сервис, с помощью которого можно сжать скрипты. Это сайт dean.edwards.name/packer/. Скопируйте адрес и вставьте в адресную строку, чтобы перейти на сайт

Чтобы сделать сжатие нужно в открывшемся сайте вставить код в первое поле для текста и под ним нажать на . Во втором поле появится сжатый вариант. Если код был большим, то его размер явно уменьшится и ускорит загрузку Вашего сайта. Ваш скрипт будет в виде одной строки без лишнего мусора 🙂

Для примера я решил взять один и скриптов и показать Вам до и после. Начальный вид скрипта такой:

function up() {  
  var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);  
if(top > 0) {  
  window.scrollBy(0,((top+100)/-10));  
  t = setTimeout('up()',20);  
} else clearTimeout(t);  
return false;  
}
jQuery(function(f){
    var element = f('#back-top');
    f(window).scroll(function(){
        element['fade'+ (f(this).scrollTop() > 200 ? 'In': 'Out')](500);           
    });
});

А вот так он будет выглядеть после сжатия

function up(){var top=Math.max(document.body.scrollTop,document.documentElement.scrollTop);if(top>0){window.scrollBy(0,((top+100)/-10));t=setTimeout('up()',20)}else clearTimeout(t);return false}jQuery(function(f){var element=f('#back-top');f(window).scroll(function(){element['fade'+(f(this).scrollTop()>200?'In':'Out')](500)})});

Единственный недостаток в том, что если Вы плохо разбираетесь в javascript, то в сжатом варианте Вам сложновато будет разобраться, де и что надо настроить. Так что если это создает дополнительные проблемы для удобства, то я советую Вам сохранять где то несжатые версии скрипта. Тогда просто внесите в него изменение и опять сожмите для вставки на сайт.

В принципе все, я рассказал все что хотел. Теперь Вы сможете тоже пользоваться удобным способом при работе со скриптами.

На этом все, спасибо за внимание. 🙂

Exit mobile version