Загрузка jQuery с Google CDN

Многие шаблоны, плагины и компоненты сайта используют для своей работы библиотеку скриптов jQuery. По умолчанию в WordPress скрипты загружаются из папки wp-includes. Первоначальный размер библиотеки jQuery составляет порядка 300KB, после минимизации его можно уменьшить до 90KB. Дополнительно количество передаваемых данных можно снизить за счет использования сжатия GZIP.

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

Ситуация кардинально меняется если посетители запросят миллион страниц с пустым кэшем браузера, в этом случае используя CDN вы экономите до 76GB трафика. А при использовании популярного Google CDN, есть большая вероятность, что необходимая библиотека jQuery уже лежит внутри кэша браузера. В добавок, если сравнить скорости загрузки с CDN и обычного хостинга, то разница во времени может отличаться в несколько раз в пользу CDN.

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

Вместо того чтобы использовать платные CDN-сервисы, мы можем свободно загружать jQuery с серверов крупных компаний. Для jQuery есть несколько популярных общедоступных CDN:

  • jQuery CDN
  • Google CDN
  • Microsoft CDN
  • CDNJS CDN
  • Яндекс CDN

Подробней о использовании указанных CDN-сервисов вы можете прочитать на официальном сайте jQuery. Что касается меня, для своих нужд я предпочитаю использовать Google CDN — наиболее популярный среди всех бесплатных CDN-сервисов, 89% от загрузок которого приходится на библиотеку jQuery. Поэтому, далее речь пойдет о использовании именного этого сервиса.

Особенности использования Google CDN

При использовании Google CDN, вы можете прямо указать версию (1.11.1) загружаемой библиотеки или с помощью модификации фрагмента ссылки, указать необходимые параметры для загрузки jQuery.

Пример подключения jQuery с использованием точной версии библиотеки:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Для загрузки последней актуальной версии jQuery используем код:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Следует отметить, что время жизни файла в кэше браузера, напрямую зависит от ссылки, которую мы будем использовать для подключения библиотеки. При использовании ссылки содержащей точную версию библиотеки, время хранение файла в кэше будет ограничено сроком равным одному году max-age=31536000. Если вы используете ссылку для последней актуальной версии jQuery, файл будет храниться в кэше в течении часа max-age=3600.

Используем Google CDN для загрузки jQuery в WordPress

Для загрузки jQuery с Google CDN на сайте использующем WordPress, для начала необходимо выяснить необходимую версию библиотеки. Для этого достаточно заглянуть в содержимое HTML-документа вашего сайта. Для правильного подключения jQuery в WordPress необходимо добавить код функции ниже в содержимое файла functions.php вашей темы:

function wpdocs_dequeue_script() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', ("//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"), false, '1.11.1');
    wp_enqueue_script('jquery');
}
add_action( 'wp_print_scripts', 'wpdocs_dequeue_script', 100 );

Данная функция удалит из очереди на подключение библиотеку из каталога wp-includes и заменяет ее на jQuery с сайта Google CDN.