Как задержать выполнение скрипта до загрузки jQuery

Бездумная гонка за показателями Google PageSpeed часто приводит к поломке некоторых динамических элементов на jQuery. Покажу один из частых примеров и способ, как все это можно быстро починить.

Чаще всего ломаются разные слайдеры, карусели, аккордеоны и прочая динамическая мишура. Связано это с тем, что Google PageSpeed рекомендует устранять ресурсы, блокирующие отображение страницы.

«Устраните ресурсы, блокирующие отображение»
Некоторые ресурсы блокируют первую отрисовку страницы. Рекомендуем встроить критическую часть данных JS/CSS в код HTML и отложить загрузку остальных ресурсов.
Google PageSpeed

Поэтому, если в Autoptimize или каком-то другом оптимизационном плагине Вордпресс включить перенос загрузки JS-скриптов в конец страницы, все инлайн инициализации jQuery будут происходить до загрузки самой библиотеки jQuery. И, естественно, работать не будут.

Есть несколько вариантов решения этой проблемы.

Можно собрать все инлайн скрипты в один и загружать после загрузки библиотеки. Некоторые плагины позволяют даже делать это автоматически, но не всегда корректно. Можно добавить в исключение и принудительно загружать все библиотеки в начале. Но Google PageSpeed за это не добавит очков.

Все это умеет тот же Autoptimize, например

Как задержать выполнение скрипта до загрузки jQuery — Autoptimize: Опции JavaScript

DOMContentLoaded

Остается один вариант — отсрочить выполнение jQuery скриптов до полной загрузки страницы и построения DOM-дерева. Сделать это проще всего на JS: обернуть скрипт в обработчик событий и просто дожидаться, когда произойдет DOMContentLoaded. К тому моменту jQuery уже будет загружен, и можно смело запускать все скрипты.

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

document.addEventListener('DOMContentLoaded', function() {

  // Здесь скрипты jQuery и другие, 
  // которые не заводятся без своих библиотек
  jQuery();

});