Osfonder's blog Just another wd weblog

22Мар/100

Используйте CDN для ускорения своих сайтов.

Создавая современный сайт или веб-приложение вы наверняка используете сторонние JavaScript библиотеки и css фрэймворки.

Самые популярные и используемые из них располагаются в CDN Google, Microsoft и Yahoo!. Это значит, что вы можете подключать их на ваших страницах прямо с серверов вышеуказанных компаний.

А следовательно посетитель, пришедший с другого сайта, который использует ту же библиотеку, с той же Content Delivery Network, не будет повторно ее скачивать и затратит меньше времени на загрузку страницы. Вы же — понизите побочный траффик своего сервера.

Ниже представлен список наиболее полпулярных библиотек с сылками в CDN.

jQuery

Последняя версия первой ветки:

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

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

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

jQuery UI

1.7.2

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

CSS для jQuery UI

jQuery Validate Plugin

1.6
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js"></script>

ASP.NET Ajax Start.js

beta 0911

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/beta/0911/Start.js"></script>

Prototype

1.6.1.0

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>

script.aculo.us

1.8.3

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js"></script>

MooTools

1.2.4

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>

Dojo

1.4.1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.1/dojo/dojo.xd.js"></script>

SWFObject

2.2

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

Yahoo! User Interface Library (YUI)

2.8.0r4

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yuiloader/yuiloader-min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/yui/2.8.0r4/build/yuiloader/yuiloader-min.js"></script>

3.0.0

<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>

Ext Core

3.1.0

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>

Chrome Frame

1.0.2

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script>

YUI CSS Reset

2.8.0r4

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css"/>

jQuery UI Themes

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css"/>

Black Tie, Blitzer, Cupertino, Dark Hive, Dot Luv, Egg Plant, Excite Bike, Flick, Hot Sneaks, Humanity, Le Frog, Mint Choc, Overcast, Pepper Grinder, Redmond, Smoothness, South Street, Start, Sunny, Swanky Purse, Trontastic, UI Darkness, UI Lightness, Vader and Base

16Мар/103

Техническая сторона: отслеживание перехода по внешним ссылкам.

До этого был поднят вопрос об отслеживании перехода посетителя по внешним ссылкам не в ущерб удобству пользования сайтом.

Теперь коснемся его технической стороны.

Указанный раньше способ, довольно прост и, как следствие, имеет ряд недочетов. Дело в том, подмена адреса ссылки происходит во время перехода по ней, при этом учитывается, как клик левой клавишей мыши, так и средней(по колёсику), что в большинстве случаев приводит к открытию её в новой вкладке.

Текущая же вкладка, остается открытой, с измененным адресом ссылки, неприглядного вида. Её копирование или добавление в закладки приведет к не ожидаемому результату.

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

Обратимся к способу, используемому в поисковой выдаче Google.

В этом способе используется событие onmousedown, то бишь реакция на нажатие любой клавиши мыши, в том числе и правой.

Заключается он в загрузке с помощью JavaScript'a изображения в момент клика. Путь к изображению — есть наш собирающий статистику скрипт с передаваемым ему адресом перехода. Ссылка же продолжает работу, как любая другая, не изменяя своего адреса.

Код, дополняемый jQuery, выглядит следующим образом:

$('a.out').mousedown(function() {
    if(document.images) {
        $('<img>').attr('src', '/tests/out.php?'+$(this).attr('href'));
    }
    return true;
});

В указанном коде скрипту-счетчику,  передается всего один показатель — адрес перехода. Хотя можно усилить статистику, передавая и другие данные. Например время пребывания на странице, до перехода по ссылке и т.п.

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

Ну и в дополнение:

Чтобы перехватывать все внешние ссылки, без необходимости присвоения им класса, нужно заменить $('a.out') выражением:
$('a[href^=http://]:not([href*=osfonder.ru])')
где osfonder.ru домен вашего сайта.

Посты по теме

  1. Статистика и анализ: отслеживание переходов посетителя на внешние ресурсы