Когда и как загружать JQuery из CDN Google
Многие плагины и темы используют JQuery. И как знает большинство пользователей WordPress, которые пытались оптимизировать производительность своих сайтов, чрезвычайно трудно исключить JQuery, как ресурс, блокирующий отображение страницы.
Значение JQuery на сегодняшний день настолько велико, что он включен в ядро WordPress. Таким образом, попытка отложить, асинхронно загрузить или объединить JQuery с другими скриптами ресурса часто приводит к сбою в работе сайта. Эту проблему можно решить с помощью JQuery Google.
Почти всегда это связано с тем, что встроенные скрипты (JavaScript, который вставляется в HTML не через ссылку / HTTP-запрос, а фрагмент кода) зависят от JQuery, который должен загружаться в разделе <head>.
Что можно сделать, чтобы устранить проблему?
Первое - использовать PageSpeed Insights. Это может и не дать существенного прироста производительности. Результат в значительной степени зависит от целого ряда условий. В первую очередь, есть ли на сайте другие блокирующие кроме JQuery. Например, CSS или другие файлы JavaScript.
Если на сайте есть хотя бы один такой ресурс, то их количество уже не имеет особого значения. Потому что они будут загружаться браузером параллельно (в отличие от JQuery Google CDN). Если только для загрузки одного из них не требуется значительно больше времени, чем для других.
Но нужно постараться устранить блокираторы. И многим это удается, пока они не упрутся в JQuery. Рассмотрим некоторые способы решения этой проблемы:
1. Удалить или не использовать функционал, зависящий от JQuery
Например, если вы используете плагин отложенной загрузки, который дает сбой при попытке асинхронного вызова или объединения JQuery с другими скриптами сайта, то удалите этот плагин или найдите альтернативу, независимую от JQuery.
Существует плагин Rocket Lazy Load, для работы которого не требуется JQuery. После того как вы успешно удалите JQuery зависимый функционал, проблемы при отложенной загрузке, асинхронном вызове или объединении JQuery должны исчезнуть.
2. Объединить все, включая встроенные скрипты JavaScript
Это можно сделать с помощью плагина Autoptimize. Это не всегда работает, но вы все равно должны попробовать.
3. Загрузить Jquery с Google, а не локально
Если JQuery загружается с Google, то он (технически) все равно остается ресурсом, блокирующим загрузку. Но он таковым не является. Почему? Потому что миллионы сайтов используют JQuery Google.
Это означает, что с огромной долей вероятности пользователь вашего сайта уже посещал сайт с JQuery, и он сохранен в кэше его браузера. То есть JQuery не будет загружаться еще раз. Получается, что JQuery не блокирует отображение страницы (в отличие от локального варианта использования).
Как загрузить копию JQuery от Google
Шаг 1: Определите, какая версия Jquery используется на вашем сайте
- Просмотрите исходный код вашей страницы;
- Найдите JQuery. Он будет выглядеть примерно так: http://yourdomain.com/wp-includes/js/jquery/jquery.js?ver=1.11.3;
- Три цифры в конце, в данном примере 1.11.3, обозначают версию JQuery;
- Если вы не видите номер версии подключаемого JQuery Google, откройте файл;
- В верхней части файла (в начале кода) вы увидите что-то вроде JQuery v1.11.3;
- В этом примере 1.11.3 - это версия JQuery.
Шаг 2: Исключите из очереди загрузки локальную копию JQuery и добавьте копию Google
Вставьте в файл functions.php темы следующий код или используйте плагин, наподобие Code Snippets:
function modify_jquery() {
if (!is_admin()) {
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js’, false, ‘x.x.x’);
wp_enqueue_script(‘jquery’);
}
}
add_action(‘init’, ‘modify_jquery’);Важно:
Везде, где вы видите в приведенном выше коде "x.x.x", замените эти символы номером версии подключаемого JQuery Google.
Шаг 3: Танцуйте от радости
Когда не следует использовать копию JQuery от Google
- Когда вы можете объединить JQuery с другими скриптами.
- Когда у вас есть много китайских пользователей, так как сервисы Google запрещены в этой стране.
Это все, ребята!