Как правильно подключать яваскрипт?

Question

[Дмитрий]

Здравствуйте, на сайте (wordpress) подключил jquery, плагины и кастомный яваскрипт в подвале.

Проверил с помощью speed test от google. Он написал следующее:

Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы
Количество блокирующих скриптов на странице: 12. Количество блокирующих ресурсов CSS на странице: 8. Они замедляют отображение контента.
Все содержание верхней части страницы отображается только после загрузки указанных далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML.

Выводить непосредственно в html не хочу. Как правильно подключить эти скрипты чтобы google не ругался?
PS. С оптимизацией под google pagespeed опыта почти не имею.
Спасибо.

Answer 1

[DevMan]

как минимум по максимуму подключать скрипты не со своего хоста, а со сторонних cdn.
например, https://cdnjs.com/ навскидку половина ваших скриптов там есть.

остальное, что должно лежать у себя, объеденить в один/несколько файлов.

Answer 2

[Stalker_RED]

Многие из этих скриптов можно грузить асинхронно. Используйте async и defer:
https://learn.javascript.ru/external-script

Comments

[Дмитрий]

Я так понимаю
всем этим скриптам можно добавить defer и они загрузятся в правильном порядке?

jquery.min-2.1.1.js
owl.carousel.min.js
jquery.fancybox.pack.js
jquery.fancybox-media.min.js
jquery.maskedinput.min.js
touchswipe.min.js
imagesloaded.min.js
masonry.min.js

[Stalker_RED]

Дмитрий: Если вы добавите defer ко всем скриптам, то они загрузятся именно в том порядке, в каком прописаны. Но я уверен, что некоторые из них не нужны в первые доли секунды отрисовки страницы. touchswipe.min.js нужен? jquery.maskedinput.min.js тоже нужен с первых мгновений?
Скорее всего их можно грузить с async.

[Дмитрий]

Stalker_RED: Спасибо. Добавил defer но pagespeed не сдвинулся ни на единицу