Всем читателям блога SEOBID.NET привет! Что такое CDN (Content Delivery Network или Content Distribution Network — сеть доставки контента), и зачем эта технология нужна, знают немногие. Поэтому той части веб-мастеров, которые вплотную занимаются оптимизацией сайта или собираются ее осуществить, весьма пригодится информация о CDN и о том, как максимально эффективно ее можно использовать.

jquery1

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

Эта сеть доставки контента существует у многих поисковых систем — Google, Yandex. Веб-разработчики сети CDN чаще всего используют, чтобы подключать часто используемые библиотеки, в том числе и jQuery. Например, CDN от Google имеет несколько сотен таких библиотек с их версиями – посмотреть их количество и воспользоваться нужной вы можете здесь.

Как подключать jQuery в WordPress

Самый распространенный способ подключения jQuery (и в WordPress тоже) – в файл header.php, между тегами <hеаd> и </hеаd>. Обычно это такая строка:

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

в которой может меняться только номер версии.

Такое подключение будет работать, но почему-то многие гуру программирования предупреждают, что код подключения jQuery лучше всего размещать в подвале, то есть – в файле footer.php. Отложенная загрузка jQuery визуально ускоряет загрузку страницы.

И еще — в WordPress скрипты подключаются при помощи специального программного метода: это такие функции, как wp_register_script(), wp_enqueue_script(), wp_deregister_script(), и т.д. Это делается для того, чтобы между некоторыми плагинами, которых в хранилище WordPress уже более 30 000 штук, не возникало конфликтов при подключении одного скрипта в разных местах страницы. Допустим, jQuery подключается и в самом плагине, и на странице WordPress – это неизменно вызовет программный сбой.

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

jQuery

Правильное подключение jQuery

Правильно подключить библиотеку jQuery — это значит, использовать функцию wp_enqueue_script(). Ниже вы видите код подключения. Такой способ подключения не нарушает стандарты программирования и исключает возможность конфликтов при подключении одного и того же скрипта в плагинах, так как скрипт будет подключаться только один раз:

<?php
function my_scripts_method(){
	wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>

Вставляется этот фрагмент кода в файл шаблона functions.php. После вставки этого кода в <hеаd> и </hеаd> отделе заголовка страницы появится такая строчка:

<script type='text/javascript' src='http://wptest.ru/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>

Использование CDN при подключении jQuery в WordPress

Теперь о применении CDN при подключении jQuery в WordPress. Код, приведенный выше, показывает способ подключения jQuery из файлов WordPress, но проще, быстрее и безопаснее подключать jQuery с CDN Google. Такой способ обладает следующими преимуществами:

1. Подключаемый файл будет сжатым виде, и весить будет меньше.
2. Если пользователь уже был на сайте, на котором jQuery подключался таким же образом, то в кэше его браузера уже остался этот скрипт. То есть — скрипт вообще не будет загружаться при посещении сайта с использованием CDN при подключении jQuery в WordPress. На сегодняшний день около 20% сайтов уже используют такое подключение с использованием CDN Google для jQuery.
3. Файл загружается отдельным потоком.

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

function my_scripts_method() {
	wp_deregister_script( 'jquery' ); // отменяем зарегистрированный jQuery
	wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js');
	wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Динамический jQuery

Осталось только одно непредвиденное обстоятельство – версия jQuery, которая указана в коде подключения, не может изменяться при обновлениях. Все эти версии будут постепенно обновляться в CDN Google, но не в вашем WordPress. Решается, однако, эта проблема довольно просто — необходимо взять текущую версию jQuery в WordPress и вставить ее в ссылку на CDN Google вот таким образом:

function my_scripts_method() {
	// получаем версию jQuery
	wp_enqueue_script( 'jquery' );
	$wp_jquery_ver = $GLOBALS['wp_scripts']->registered['jquery']->ver; // для версий WP меньше 3.6 'jquery' меняем на 'jquery-core'
	$jquery_ver = $wp_jquery_ver == '' ? '1.11.0' : $wp_jquery_ver;
	wp_deregister_script( 'jquery' );
	wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/'. $jquery_ver .'/jquery.min.js', false, null, true );
	wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method', 99 );

Теперь версия jQuery будет определяться динамически, и вам уже не нужно будет ломать голову, почему скрипт вдруг перестал работать после обновления. Скрипт подключается в файле footer.php (значения false, null, true). Ну и повторюсь еще раз — все скрипты рекомендуется также подключать в файле footer.php документа, то есть – в подвале шаблона. До встречи!