Как правильно следует подключать файлы на сайте?

Question

[Сергей Шилов]

Всем добрый день.
Как правильно следует подключать файлы стилей и скриптов на сайте?
В каком порядке, какая должна быть релевантность.
Сколько должно быть в среднем стилевых файлов и файлов скриптов. (потому что я знаю, что, например, reset файлы можно объединять с основными, тк меньше запросов у сервера идет).
Где правильнее подключать jquery: внизу или вверху.

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

Answer 1

[teotlu]

Стили внутри head, скрипты по возможности в конце body.

Объясню, почему: стили нам нужно загрузить раньше, чем весь остальной DOM, чтобы сразу отобразить все элементы правильно.

А скрипты не дают загрузиться остальным элементам страницы, пока не загрузятся сами. Если браузер натыкается на скрипт, он прекращает загрузку DOM до тех пор, пока не выполнит скрипт. Поэтому скрипты по возможности лучше засовывать вниз — тогда страница отобразится на экране раньше, визуально загрузка будет быстрее.

Никакого "в среднем" нет, файлов должно быть как можно меньше. Меньше файлов — меньше запросов к серверу. Поэтому стоит использовать или какой-нибудь упаковщик стилей-скриптов, который их минимизирует и сливает в один файл, или AMD-загрузчик, вроде RequireJS или чего-то такого.

jQuery тоже лучше подключать внизу, по описанным мною выше причинам. Но тогда нельзя будет писать всякие onClick="$('.blablabla').hide()", как многие часто делают. Впрочем, так всё равно лучше не делать.

Comments

[overmes]

уже все можно подлючать в header с атрибутом defer

[Dmmitry]

@overmes + за defer

[teotlu]

@overmes точно, что-то я тупанул.

[teotlu]

Вообще, я в своём ответе пропустил достаточно много нюансов, советую прочитать вот эту статью learn.javascript.ru/script-place-optimize

[Сергей Бурдужа]

overmes: Выходит, что скрипты можно подключить с атрибутом defer только в header, потому что, если подключить их перед тегом body, то они не срабатывают. Да, и еще один вопрос, jquery тоже нужно с атрибутом defer подключать? По крайне мере у меня он не срабатывает, жду ответа....

[overmes]

Сергей Бурдужа: про такие тонкости не отвечу, последние пару лет все какие-нибудь сборщики или импортеры модулей делают, типа веб пака.