Yandex jquery



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

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

  • подключить её с внешнего ресурса (google, яндекс, jquery);
  • загрузить файл на сайт и подключить его локально.

Рассмотрим плюсы и минусы этих способов.

Подключение jQuery с внешнего ресурса

Начнём сразу со спорного вопроса. Скорость загрузки.

Спорный момент:

Скорость подключения с внешнего ресурса непредсказуема. Если многие и доверяют серверам google и не сомневаются, что подключение будет происходить достаточно быстро, то Яндексу доверяют не все. Хотя любое подключение библиотеки от любого из них будет с серверов CDN, а их надёжность гораздо выше любого из хостинг-провайдеров.

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


Несколько тестов для самого дешёвого хоста показали, что скорость первого подключения jquery с сервера CDN  и локального примерно одинакова 390-400 мс. Но при повторном обновлении страницы скорость подключения файла jquery.js с сервера CDN быстрее в 2, а то и в 4 раза. По соответствующим темам в интернете находил посты, где выкладывают скрины, на которых загрузка с CDN сервера доходит до 32 мс против 400 мс.

CDN сервера есть не только у Google или Яндекс, также можно использовать сервера Microsoft, CDNJS, jQuery…

Плюсы:

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

Минусы:

При загрузке страницы ваш сайт делает дополнительный, возможно даже лишний, HTTP запрос на внешний ресурс. Если в дальнейшем вы будете заниматься оптимизацией своего сайта, то количество HTTP запросов придётся уменьшать. Но тут тоже всё неоднозначно из-за ограничений спецификации HTTP 1.1. Ни один браузер не сможет скачивать более чем 2 файла одновременно с одного хостинга. Поэтому может имеет смысл параллелить загрузки?

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

Минусы:

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

Плюсы:

  •  При загрузке ваш сайт не делает дополнительный запрос на внешний ресурс;
  • Вы всегда уверены, что ваш сайт загрузит библиотеку, пусть и дольше чем с CDN сервера.
  • Вы можете спокойно манипулировать вашей библиотекой как пожелаете, например, если вы занялись оптимизацией сайта и сжимаете все файлы в один.

webmaster-gambit.ru

I recently discovered that the biggest Russian search engine Yandex (yeah, it’s bigger than Google in Russia) is using jQuery on its home page. It also hosts all previous jQuery versions on it’s fast gzip enabled servers just like Google and MIcrosoft do.

Because most of the Russian internet users have visited Yandex already, they already have it in their browser cache. I also did route tracing from Russian server to Google CDN servers and I was directed to the server in California, USA and pining the local Russian CDN server was at least 3 times faster.

Anyway, if you decide to use Russian CDN to host your jQuery files here are the links:

Minified versi.  

uery/1.3.2/jquery.js http://yandex.st/jquery/1.4.0/jquery.js http://yandex.st/jquery/1.4.1/jquery.js http://yandex.st/jquery/1.4.2/jquery.js

jQuery UI links

http://yandex.st/jquery-ui/1.8.2/jquery-ui.min.js  Hosted versions 1.8.2, 1.8.1, 1.8.0, 1.7.3, 1.7.2, 1.7.1, 1.7.0, 1.6.0  jQuery UI modules can be downloaded seperately http://yandex.st/jquery-ui/1.7.2/effects.blind.js http://yandex.st/jquery-ui/1.8.0/jquery.effects.blind.min.js  Language files http://yandex.st/jquery-ui/1.7.2/i18n/ui.datepicker-ru.js http://yandex.st/jquery-ui/1.8.0/i18n/jquery.ui.datepicker-ru.min.js  jQuery UI CSS files (matches original directory names) http://yandex.st/jquery-ui/1.8.0/themes/humanity/jquery.ui.all.min.css

jquery-howto.blogspot.com

Ромчик


Уроки по jQuery

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

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

Создадим виртуальный хост, например, jquery. В нем будет основной файл index.php, директория js — со скриптами JavaScript, директория img — директория с картинками и директория css — директория с файлами стилей CSS.  

В index.php добавим следующий код:

  <!doctype html>  <html lang="ru">  <head>   <meta charset="UTF-8">   <link href="./css/style.css" rel="stylesheet" media="screen">   <title>Изучаем jQuery</title>  </head>  <body>  <div id="wrapper">   <div id="header">Header</div>   <div id="content">   Content   </div>   <div id="sidebar">Sidebar</div>   <div id="clear"></div>  </div>  <div id="footer">  Footer  </div>  </body>  </html>  

В файл style.css, который находится в директории css, поместим следующий код:


  html, body{   padding:0;   margin:0;   height:100%;   position:relative;  }  /* Header */    #header {   background-color: red;   height: 100px;   width: 900px;   margin: 0 auto;  }    /* Content */    #wrapper{   background:#CCC;   min-height:100%;   margin: 0 auto;   width: 900px;  }  #content{   float: left;   width: 700px;  }  #clear{   clear: both;   height: 50px;  }    /* Footer */    #footer{   background:#36F;   height:50px;   margin: 0 auto;   width: 900px;   margin-top:-50px;   position:relative;  }  

Код для этих файлов я пояснять не буду. Просто давайте проверим, что у нас получилось. Переходим, в моем случае я набираю в браузере jquery и попадаю на локальный сервер apache, на виртуальный хост jquery и вижу:

Подготовка проекта

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

Для подключения библиотеки этим способом необходимо скачать ее с официального сайта. Для этого переходим на официальный сайт:


официальный сайт jQuery

И жмем «Download jQuery»

Переходим на следующую страницу, где выбираем версию jQuery библиотеки. На момент написания можно было скачать две версии: jQuery 1.9.1 (устраевшая, но поддерживающая браузеры IE6/7/8) и jQuery 2.0.0 (последняя версия, которая уже не поддерживает браузеры IE6/7/8)

Если Вы качаете библиотеку для production, т. е. для готового проекта, то выбирайте сжатую версию Download the compressed, production jQuery… Если же качаете библиотеку для development, т. е. для разрабатываемого проекта, то качайте не сжатую библиотеку Download the uncompressed, development jQuery… Почему? Для рабочего проетак лучше сжатая версия, т. к. весит меньше. А для development — просто иногда хочется заглянуть в код, любопытство 🙂

Скачиваем jQuery


Я скачал не сжатую версию jQuery 1.9.1 и назвал файл с этой библиотекой jquery.js Теперь помещаем этот файл в папку js нашего проекта.

Открываем файл index.php и между тегами <head> и </head> помещаем следующий код:

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

Т.о. мы подключили библиотек jQuery к нашему проекту. Давайте проверим.

Для этого создадим в директории js еще один файл script.js и поместим в него следующий код:

    $(function(){    alert('jQuery работает');    });    

Данный код ничего особенного не делает, просто выводит сообщение «jQuery работает». Проверим, открываем через браузер нашу страницу и видим:

Проверка работоспособности jQuery

Как видим jQuery мы подключили и она работает.

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

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

Что такое CDN? CDN (Content Delivery Network) — сеть доставки контента. И так, при использовании CDN само ядро jQuery уже храниться на стороне. Это может быть Google, Microsoft, Yandex или сам jQuery. Выбирать Вам. Я использую CDN от Google (самый стабильный, может конечно я не прав). Хотя следует отметить и CDN от Yandex они выкладывают и плагины за что им огромное спасибо.


Для того, чтобы подключить jQuery через CDN от Google. Откройте файл index.php и в тегах строку:

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

замените на:

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

Проверяем.

Если же Вы хотите использовать CDN от Yandex, то замените на:

    <script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>  

Проверяем и видим аналогичный результат.

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


Вот в принципе и все. Мы с Вами рассмотрели два способа подключения библиотеки jQuery к проекту. Какой из способ использовать выбирать Вам. А на этом пока все.

web-programming.com.ua

Обнаружили на страницах сайта множество ссылок дублирующих друг друга, эти ссылки располагаются в разных блоках, виджетах и разделах сайта.
 
Например в  блоке с новостями: ссылка дублируется аж 3 раза: ссылка на статью, ссылка с изображения, ссылка на кнопке подробнее. Есть дублирующие ссылки в главном слайдере, дубли в миниатюрах каждого слайда, Дубли в кнопках вида «далее», «подробнее» — даже во внутренних ссылках нельзя использовать не точные анкоры, анкор должен соответствовать теме URL , поэтому такие кнопки лучше завернуть в JS.   Категории товаров.  Принято считать, что сквозные элементы сайта, в частности меню, поисковиками не учитываются, либо учитываются очень слабо, т.к. присутствуют на каждой странице. Тем не менее имеют место быть различные варианты. Возьмем для примера 4 крупных интернет-магазина:  www.mvideo.ru, www.eldorado.ru и www.dns-shop.ru, www.tehnosila.ru. На сайте М.Видео абсолютно всё меню навигации с категориями и подкатегориями закрыто в тег noindex.


алогичная картина на сайте Эльдорадо. Закрывать меню в noindex имеет смысл только чтобы не учитывать его текстовую составляющую, чтобы меню не попадало в сниппет на поисковой выдаче, чтобы не мешало определению релевантной страницы. Если запустит Краулер и посмотреть как он определить релевантные страницы, то можно увидеть что некоторые стр. определяются не верно. Так же есть повторяющиеся ссылки в Footer , микроразметке, и т.д, и прочих элементах…  
судя по отчету ScreaminFrog — google видит все  внутренние ссылки, воспринимает, и распределяет вес с учетом всех внутренних факторов. Ссылки нужно закрыть, но по умолчанию такого решения в Opencart не предлагается, поэтому ищем альтернативные способы, изучаем правила закрытия ссылок:
 
Внутренние ссылки не должны содержать атрибута rel=”nofollow”. В противном случае вес со страницы будет утекать, то есть будет попросту испаряться. Атрибут rel=”nofollow” необходимо использовать в редких случаях случаях, когда ссылка ведет на неиндексируемую страницу. Ссылки всегда должны вести на индексируемые страницы сайта, иначе будет повторяться история, описанная в пункте №1 выше. Даже при формировании внутренних ссылок при перелинковке следует использовать уникальные анкоры. Внутренние ссылки всегда должны быть прямыми и идти строго на целевые страницы. Это значит, что переход по ссылке должен отдавать ответ 200 OK. Я не говорю о том, что битые ссылки недопустимы, это очевидно, а я говорю о том, что ссылки должны идти без промежуточных 301-редиректов (а если там еще и не 301, а 302-редирект, то совсем беда). Не редко, когда меняют структуру, либо по вине верстальщика  
отследить на глаз многие мелочи трудно, и чтобы потом не удивляться — советую использовать краулер. (XENU или родной Screaming Frog)
 
Нашел следующие методы закрытия внешних и внутренних ссылок на jQuery AJAX:
(взяты со стороннего ресурса; там где проводили эксперимент пишут, что все способы  рабочие)
 
Вариант №1 —
<a href=»#» class=»link» data-link=»http://goo.gl»>ссылка</a> Скрипт, который будет обрабатывать ссылку и открывать ее:
<script>$(‘a.link’).click(function(){window.open($(this).data(«link»));return false;});</script> В этом варианте вам не надо будет производить никаких дополнительных доработок стилей в css, наша ссылка будет выглядеть как и все остальные «нормальные» ссылки.
Вариант №2 —
Код ссылки на странице:
<a href=»#» class=»link» rel=»http://goo.gl»>ссылка</a> Скрипт, который будет обрабатывать ссылку и открывать ее:
<script>$(‘a.link’).click(function(){window.open($(this).attr(«rel»));return false;});</script> Вариант №3 —
Код ссылки на странице:
<span class=»hidden-link» data-link=»http://goo.gl»>ссылка</span> Скрипт, который будет обрабатывать ссылку и открывать ее:
<script>$(‘.hidden-link’).click(function(){window.open($(this).data(‘link’));return false;});</script> как пишет автор данный вариант100% не вызовет никаких подозрений у поисковика, так как даже структурно в коде нет ссылки, а просто кусок текста (он же анкор) выделен спаном <span>, что довольно часто используется при разметке документов.
Однако и отображаться такая «ссылка» будет как обычный текст на странице. Придется пошаманить с css, чтобы имитировать ссылку. Например, добавить в свой css:
span.hidden-link { color: #00ff00; /*-цвет ссылки-*/ text-decoration: underline; /*-подчеркивание-*/ cursor: pointer; /*-указатель в виде пальца-*/ } Вариант №4 — Еще один вариант скрытия ссылки
<span class=»hidden-link» data-link=»http://goo.gl»>ссылка</span> Скрипт, который будет обрабатывать ссылку и открывать ее:
<script>$(‘.hidden-link’).replaceWith(function(){return'<a href=»‘+$(this).data(‘link’)+'»>’+$(this).text()+'</a>’;})</script> Отличие этого способа от предыдущего в том, что js-скрипт меняет на странице html-код «якобы» ссылки на нормальную ссылку после полной загрузки документа. Поэтому никаких правок в css вносить не придется, а ссылка будет открываться как и обычная.
Способ так же прошел проверку экспериментом — ссылка не индексируется и не видится поисковыми роботами и, соответстенно, не учитывается.
 
Вариант №5 — Универсальный вариант скрытия любого контента, например, картинок
….. Предыдущий вариант не работает в том случае, если в анкоре ссылки стоит картинка. А такие варианты довольно часто встречаются: счётчики, информеры, партнёрские баннеры. Поэтому предлагаю использовать вместо метода .text () метод .html (), он будет более универсальным.
Код элемента, в данном случае ссылки, на странице, будет такой:
<span class=»hidden-link» data-link=»http://goo.gl»>внешняя ссылка</span> * — Чтобы закрыть картинку, в коде, указанном выше, необходимо заменить «внешняя ссылка» на код <img src=»…»>.
Скрипт, который будет обрабатывать ссылку или любой другой элемент:
<script>$(‘.hidden-link’).replaceWith(function(){return'<a href=»‘+$(this).data(‘link’)+'»>’+$(this).html()+'</a>’;})</script> Как вы понимаете, отличие данного способа от всех других в том, что в скрипт можно «спрятать» не только ссылку, но и картинку со ссылкой или еще что-нибудь. Все проверено — все работает
 
6.  Вариант №6 —  как пишут в коментариях самый лучший.
$(‘.hidden-link’).replaceWith (function (){return'<a href=»‘+$(this).data (‘link’)+'» title=»‘+$(this).text ()+'»>’+$(this).html ()+'</a>’;})  
Интересно кто какие варианты использует и на что нужно обратить внимание еще.
 
 

opencartforum.com


You May Also Like

About the Author: admind

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

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

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