Jquery google


Всем читателям блога 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 документа, то есть – в подвале шаблона. До встречи!

seobid.net

ОБНОВЛЕНИЕ 7/3/2014: На данный момент jquery-latest.js больше не обновляется. Из блога jQuery:

Мы знаем, что http://code.jquery.com/jquery-latest.js злоупотребляют из-за статистики CDN показывая его самый популярный файл. Это было бы не так, если бы это было был использован только разработчиками для создания локальной копии.

Мы решили прекратить обновление этого файла, а также уменьшенную копию, сохраняя оба файла в версии 1.11.1 навсегда.

Команда CDN Google присоединилась к нам в этой непреднамеренный перерыв в сети и больше не обновляет файл на http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js. Этот файл будет оставаться заблокированным и в версии 1.11.1.


Следующий, теперь спорный ответ сохраняется здесь по историческим причинам.


Не делайте этого. Серьезно, не делайте.

Связывание с основными версиями jQuery действительно работает, но это плохая идея — все новые функции добавляются и устаревают с каждым десятичным обновлением. Если вы обновите jQuery автоматически без тестирования кода ПОЛНОСТЬЮ, вы рискуете неожиданным сюрпризом, если API для некоторого критического метода изменился.

Вот что вы должны делать: напишите свой код, используя последнюю версию jQuery. Протестируйте его, отлаживайте, публикуйте его, когда он готов к производству.

Затем, когда выйдет новая версия jQuery, спросите себя: Нужна ли мне эта новая версия в моем коде? Например, существует ли какая-то критическая совместимость с браузером, которая раньше не существовала, или это ускорит мой код в большинстве браузеров?

Если ответ «нет», не беспокойтесь, обновляя свой код до последней версии jQuery. Это может даже добавить НОВЫЕ ошибки в ваш код, который не существовал до. Ни один ответственный разработчик не будет автоматически включать новый код с другого сайта без тщательного тестирования.

Просто нет веской причины ВСЕГДА использовать последнюю версию jQuery. Старые версии все еще доступны на CDN, и если они работают для ваших целей, то зачем их заменять?



Вторичная, но, возможно, более важная проблема — кэширование. Многие люди ссылаются на jQuery на CDN, потому что многие другие сайты делают это, и ваши пользователи имеют хорошие шансы на то, что эта версия уже кэширована.

Проблема в том, что кэширование работает только в том случае, если вы предоставляете полный номер версии. Если вы предоставляете частичный номер версии, кэширование в будущем будущем не произойдет, потому что если это произойдет, некоторые пользователи получат разные младшие версии jQuery с одного и того же URL-адреса. (Скажем, что ссылка на 1,7 указывает на 1,7,1 в день и 1,7,2 на следующий день. Как браузер будет уверен, что он получит последнюю версию сегодня? Ответ: нет кеширования.)

Фактически здесь разбивка нескольких вариантов и их истечение Настройки…

http://code.jquery.com/jquery-latest.min.js (без кеша)

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js (1 час)

http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js (1 час)

http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js (1 год)

Итак, связываясь с jQuery таким образом, вы фактически устраняете одну из основных причин использования CDN в первую очередь.


http://code.jquery.com/jquery-latest.min.js может не всегда давать вам ожидаемую версию. На момент написания этой статьи он ссылался на последнюю версию jQuery 1.x, хотя был выпущен и jQuery 2.x. Это связано с тем, что jQuery 1.x совместим со старыми браузерами, включая IE 6/7/8, и jQuery 2.x не является. Если вам нужна последняя версия jQuery 2.x, то (на данный момент) вам нужно явно указать это.


Две версии имеют один и тот же API, поэтому для совместимых браузеров нет различий в восприятии. Однако jQuery 1.x является более крупным, чем 2.x.

qaru.site

Что можно сделать, чтобы устранить проблему?

Первое — использовать 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:

Важно:

Везде, где вы видите в приведенном выше коде «x.x.x«, замените эти символы номером версии подключаемого JQuery Google.

Шаг 3: Танцуйте от радости

www.internet-technologies.ru

Подключение jquery через Google или Microsoft

Чтобы подключить последнюю версию jquery через Google нужно добавить одну строку кода внутри <head> – все предельно быстро и удобно:

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

Для подключения точной версии (в данном случае 1.11.0):

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

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

Для подключения jquery через Microsoft добавляем код:

 <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.11.0.min.js"></script> 

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

Подключение jquery скачиванием файла с библиотекой

Подключаем jQuery со страницы своего сайта – это дольше, но надежнее. Для этого нужно:
скачать библиотеку jquery с официального сайта, сохранить в файл, назовем его jquery-1.11.0.min.js, положить в папку js на нашем сайте и добавить следующий код в <head>:

 <script type="text/javascript" src="/js/jquery-1.11.0.min.js"></script> 

В src задается путь где лежит наш файл с jquery, который нужно подключить на страницу сайта.

И, наконец, самый надежный и бронебойный вариант – подключение с Google, если Google недоступен – подключение со своего сайта:

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> if (typeof jQuery == 'undefined') {  document.write(unescape("%3Cscript src='/js/jquery-1.11.0.min.js' type='text/javascript'%3E%3C/script%3E")); } </script> 

Или самый современный вариант – прописываем в <head> следующий код:

 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.11.0"); google.setOnLoadCallback(jQueryIsLoaded); function jQueryIsLoaded() {  alert('jQuery от Google загружен'); } if (typeof jQuery == 'undefined') {  document.write(unescape("%3Cscript src='/js/jquery-1.11.0.min.js' type='text/javascript'%3E%3C/script%3E")); } </script> 

www.stijit.com

Introduction

jQuery Google Map is a jQuery Plugin allows you to easely manipulate the Google Map API. You are now able to create maps, add some markers et create routes.

Installation

For using the plugin, you need to call jQuery, the Google API and the plugin file :

<script src="javascripts/jquery.js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY"></script> <script type="text/javascript" src="javascripts/jquery.googlemap.js"></script>

How it works

Create a simple map

On your HTML file, create your map block. Don’t forget to give it some width and height with CSS.

You just have to call the googleMap() method. You can specify the center of the map, the map type and the initial zoom level.

<div id="map" style="width: 300px; height: 300px;"></div> <script type="text/javascript">  $(function() {  $("#map").googleMap({  zoom: 10, // Initial zoom level (optional)  coords: [48.895651, 2.290569], // Map center (optional)  type: "ROADMAP" // Map type (optional)  });  }) </script>

There is 4 different type of map :

  • ROADMAP : The default map, displaying streets, city names, etc.
  • SATELLITE : The Google Satellite view.
  • HYBRID : The Google Satellite view combine with the roadmap view.
  • TERRAIN : The relief view.

Add a marker

Once your map initialized, you can add some markers and assign them an action.

Add a marker with a link
<div id="map" style="width: 300px; height: 300px;"></div> <script type="text/javascript">  $(function() {  $("#map").googleMap();  $("#map").addMarker({  coords: [48.895651, 2.290569], // GPS coords  url: 'http://www.tiloweb.com', // Link to redirect onclick (optional)  id: 'marker1' // Unique ID for your marker  });  }) </script>
Add a marker with infoview

You can add a marker by give it a title and a HTML content.

<div id="map" style="width: 300px; height: 300px;"></div> <script type="text/javascript">  $(function() {  $("#map").googleMap();  $("#map").addMarker({  coords: [48.895651, 2.290569], // GPS coords  title: 'Marker n°1', // Title  text: '<b>Lorem ipsum</b> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' // HTML content  });  }) </script>
Add a marker with a personnal icon

You can add a marker and change the default icon by specify the URL to your image.

<div id="map" style="width: 300px; height: 300px;"></div> <script type="text/javascript">  $(function() {  $("#map").googleMap();  $("#map").addMarker({  coords: [48.895651, 2.290569],  icon: 'http://www.tiloweb.com/wp-content/uploads/2012/04/logo-e1335400790554.png', // Icon URL,  url: 'http://www.tiloweb.com' // Link URL  });  }) </script>
Add multiple markers

You can add multiple markers to your map.

<div id="map" style="width: 300px; height: 300px;"></div> <script type="text/javascript">  $(function() {  $("#map").googleMap();    // Marker 1  $("#map").addMarker({  	 coords: [48.895651, 2.290569]  });    // Marker 2  $("#map").addMarker({  	 coords: [48.869439, 2.308664]  }); 	  // Marker 3  $("#map").addMarker({  coords: [48.888846, 2.198674]  });  }) </script>
Add a marker from a postal address

You can place a marker by giving a postal address.

<div id="map" style="width: 300px; height: 300px;"></div> <script type="text/javascript">  $(function() {  $("#map").googleMap();  $("#map").addMarker({  	address: "15 avenue des champs Elysées 75008 Paris", // Postale Address  	url: 'http://www.tiloweb.com' // Link  });  }) </script>

Add a route

Google allows you to create a route between a start postal address to an arrival postal address or GPS coordinates. You have to specify the path the block where you want the route to be displayed.

<div id="map" style="width: 300px; height: 300px;"></div> <script type="text/javascript">  $(function() {  $("#map").googleMap();  $("#map").addWay({  	start: "15 avenue des champs Elysées 75008 Paris", // Postal address for the start marker (obligatory) 		end: [48.895651, 2.290569], // Postal Address or GPS coordinates for the end marker (obligatory) 		route : 'way', // Block's ID for the route display (optional) 		langage : 'english' // language of the route detail (optional) 	});  }) </script>

Add a route with some steps

You can add some steps to your route

<div id="map" style="width: 300px; height: 300px;"></div> <script type="text/javascript">  $(function() {  $("#map").googleMap();  $("#map").addWay({  	start: "15 avenue des champs Elysées 75008 Paris", // Postal address for the start marker (obligatory) 		end: [48.895651, 2.290569], // Postal Address or GPS coordinates for the end marker (obligatory) 		route : 'way', // Block's ID for the route display (optional) 		langage : 'english', // language of the route detail (optional) 		step: [ // Array of steps (optional) 		 [48.85837009999999, 2.2944813000000295], // Postal Address or GPS coordinates of the step 		 "Porte Maillot, 75017 Paris", // Postal Address or GPS coordinates of the step 		] 	});  }) </script>

Add a callback

When you start to place a marker on the map, you can have a callback with the GPS coordinates of the calculated marker in order to save it.

<div id="map" style="width: 300px; height: 300px;"></div> <script type="text/javascript">  $(function() {  $("#map").googleMap();  $("#map").addMarker({  	address: "15 avenue des champs Elysées 75008 Paris", // Postal address  	success: function(e) {  	 $("#latitude").val(e.lat);  	 $("#longitude").val(e.lon);  	} 	});  }) </script>

Make a marker draggable

When you want to be abble to move your marker with your mouse, you can add the «draggable» param to it. The success function will be call every time your user finish dragging the marker.

<div id="map" style="width: 300px; height: 300px;"></div> <script type="text/javascript">  $(function() {  $("#map").googleMap();  $("#map").addMarker({  	address: "15 avenue des champs Elysées 75008 Paris", // Postal address  	draggable: true,  	success: function(e) {  	 $("#latitude").val(e.lat);  	 $("#longitude").val(e.lon);  	} 	});  }) </script>

Remove a marker

If you have set an ID for your marker, you will be able to remove this marker.

<div id="map" style="width: 300px; height: 300px;"></div> <script type="text/javascript">  $(function() {  	$("#map").googleMap();  	$("#map").addMarker({  coords: [48.895651, 2.290569], // GPS coords  url: 'http://www.tiloweb.com', // Link to redirect onclick (optional)  id: 'marker1' // Unique ID for your marker  });  $("#map").removeMarker("marker1");  }) </script>

Clean a map

You can remove all the marker just by reinitializing the map.

<div id="map" style="width: 300px; height: 300px;"></div> <script type="text/javascript">  $(function() {  $("#map").googleMap();  }) </script>

tilotiti.github.io

Многие шаблоны, плагины и компоненты сайта используют для своей работы библиотеку скриптов 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.

codebeer.ru

Jquery googleПривет, дорогой друг!

Вот уже наверное в 1000-ный раз я открываю гугл и ввожу «jquery google», чтобы подключить к очередному разрабатываемому проекту библиотеку jQuery. Пора бы уже и на своем блоге это написать!

«jquery google» я ввожу, чтобы узнать ссылку на эту библиотеку в специальном хранилище Google.

Дело в том, что корпорация Зла Google, четко следуя своей миссии «ускорять веб», создала специальное хранилище для различных библиотек. Ну, а библиотека jQuery являясь самым популярным javascript фреймворком, туда естественно попала.

Каждый толковый сайт грузит jQuery не с собственного хостинга или CDN, не с сайта jQuery, а непосредственно из хранилища Google.

Это очень просто:

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

В данном хранилище тебе доступны следующие версии библиотеки jQuery: 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3

Вот другой вариант подключения этого же файла:

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>  <script type="text/javascript">  // укажи здесь другу версию, если нужно  google.load("jquery", "1.8.1");  google.setOnLoadCallback(function() {  // здесь код твоих скриптов  });  </script>    

Если честно, это один из важных шагов на пути к ускорению твоего сайта. Если ты хочешь ускорить свой блог, то обязательно подключи все возможные javascript-библиотеки из хранилища Google.

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

А если даже твои посетители чисто гипотетически не знают, что такое гугл и заходят на твой сайт строго из закладок, то в любом случае Google обладает чуть ли не самым мощным оборудованием, и имеет в своем распоряжении сотни или даже тысячи серверов по всему миру. Поэтому jQuery или другая библиотека, подключенная с гуглохранилища, будет загружена твоему посетителю с ближайшего к нему collocation-а Google. И, скорее всего, в большинстве случаев это будет быстрее, чем просто грузить фреймворк со своего хостинга.

Еще одно преимущество данного способа заключается в том, что ты получаешь jQuery от Googl’а в уже сжатом gzip виде. И следовательно получаешь 26kb вместо 76kb (для версии 1.4.3), что является сокращением на ~60%.

Кстати, как я уже упоминал выше, из гуглохранилища можно грузить не только jQuery.

Вот, что еще можно грузить с хранилища Google:

  • AngularJS
  • Chrome Frame
  • Dojo
  • Ext Core
  • jQuery UI
  • MooTools
  • Prototype
  • script.aculo.us
  • SWFObject
  • WebFont Loader

И этот список постепенно дополняется новыми популярными библиотеками…

Если вдруг сервера всемогущего Google упадут, то jQuery конечно с него не загрузиться, и несмотря на то, что вероятность этого события крайне мала, вот тебе решение и на этот случай (вставлять после кода подключения с гугла):

<script>  if(!window.$){   document.write('<script type="text/javascript" src="директория с  jquery на твоем хосте"></script>');  }  </script>

twog.me

Сначала посмотрите на это:

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

С помощью этого кода вы можете загрузить библиотеку jQuery напрямую из сети доставки контента (CDN) Google.

Обратите внимание, вы можете прямо указать какую версию (/1.4.4/) библиотеки следует загрузить. Но это далеко не все, что можно сделать. Путем простого изменения этой части ссылки можно творить маленькие приятности:

/1.4.4/ – загрузит точно указанную версию библиотеки, которая никогда не изменится.

/1.4/ – прямо сейчас загрузит версию 1.4.4, но если завтра выйдет версия 1.4.5, то эта ссылка будет указывать на нее. Если затем появится 1.5, то будет указывать на последний релиз в ветке 1.4.х.

/1/ – прямо сейчас загрузит версию 1.4.4. Если завтра появится 1.5, то будет указывать на нее. После выхода версии 2.0 будет указывать на последний релиз в jQuery 1.х.

Маленькое напоминание о том, ради чего все это вообще делается

Уменьшаем задержки – файл грузится с ближайшего географически сервера.

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

Улучшаем кеширование – есть большая вероятность, что в браузерном кеше посетителя файл уже лежит и это скорейший способ загрузить его.

Сохраняем траффик – сжатая версия 1.4.4 «весит» 82 килобайта. Если ваши посетители запросят миллион страниц с пустым кешем браузера, вы сэкономите 74 гигабайта трафика.

Кеширование

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

/1.4.4/ – public, max-age=31536000 (один год)

/1.4/ – public, must-revalidate, proxy-revalidate, max-age=3600 (один час с перепроверкой)

/1/ – public, must-revalidate, proxy-revalidate, max-age=3600 (один час с перепроверкой)

Очевидно, кешировать на один час совершенно бесполезно. С другой стороны, пи выходе версии 1.4.5 тот, кто закешировал 1.4.4 на год, получал бы несвежую версию, а это тоже не очень хорошо.

Учет факторов задержек, параллельности загрузки и сохранения траффика по-прежнему важен, но кеширование не менее значимо. Так что если уж кеширование играет для нас большую роль, используйте вариант ссылки на строго определенную версию.

Что выбрать

/1.4.4/ – никогда не изменится, никогда не разрушит функционал, лучше всех кешируется, интуитивно понятно

/1.4/ – может привести к нарушению работы кода при обновлениях, плохо кешируется.

/1/ – весьма вероятно, приведет к нарушению работы при обновлении, плохо кешируется.

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

Не забудьте, конечно, объединить и все свои скрипты. Прописная истина: один файл загружать всегда лучше, чем несколько.

Не jQuery единым

Приведенные выше соображения справедливы для всех библиотек в Google CDN. Автор проверил их в отношении MooTools и все работает аналогичным образом.

Другие CDN

JQuery можно забирать из сети Microsoft или с jquery.com. Они не дают большой свободы при выборе версий, но, стоит отметить, Майкрософт позволяет кешировать файл на год:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"></script>

jQuery.com не указывает как кешировать его файл:

<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

Update 1.

Поддерживайте отечественного производителя с обширным списком библиотек: api.yandex.ru/jslibs

Update 2.

Такая загрузка позволит поисковикам использовать этот инструмент как дополнительный источник статистики посещений тех или иных сайтов, если кого-то это смущает.

Кеширование даже на год часто не имеет смысла, т.к. размер браузерного кеша у многих пользователей мал. У меня в Файрфоксе и Опере по умолчанию стояло 50 и 40 мегабайт соответственно. При таких размерах и нынешних скоростях доступа он будет обновляться очень часто ввиду вытеснения старых элементов новыми. Я увеличиваю размеры кешей до 500 мегабайт, хотя некоторые авторы предпочитают думать, что это сильно снижает быстродействие браузеров.

Update 3. Передаваемый трафик

Опыты с ФайрБагом показали, что минимальный траффик дает загрузка jQuery из CDN Yandex.st, а Микрософт еще зачем-то подсовывает плюшку:

Yandex.st Google CDN Microsoft CDN
24605 bytes, gzip 27100 bytes, gzip 34187 bytes, gzip + 1090 bytes cookie

Update 4. Скорость отклика
Замеры производились в Краснодаре (Билайн) вручную посредством Yslow путем 10-кратного рефреша. В других городах результаты могут разительно отличаться. В скобках время первого отклика с чистым кешем.

Yandex.st Google CDN Microsoft CDN
~53 мс (305-320 мс) ~110 мс (324-333 мс) ~400 мс (720-990 мс)

habr.com


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.