Pull to refresh

Особенности Google CDN

Website development
Translation
Original author: Chris Coyier
Сначала посмотрите на это:

<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 мс)
Tags:Google CDNCDNjQueryMooToolsDojoклиентская оптимизацияклиентское кэширование
Hubs: Website development
Total votes 89: ↑76 and ↓13+63
Views26K

Popular right now