Скрипты/таблицы стилей: консолидировать локально или использовать CDN?

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

Два пункта в каждом списке «10 лучших» для оптимизации сайтов/пропускной способности:

  • Консолидируйте как можно больше JS и CSS в один файл (чтобы сократить круговые поездки); и
  • Используйте сеть доставки контента (для экономии полосы пропускания/ускорения загрузки).

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

Итак, допустим, я хочу использовать эти общедоступные CDN, а не доплачивать за личную учетную запись CDN за производительность, которая может быть лучше, хуже или такой же. И давайте также скажем, что я использую кучу файлов JS/CSS, которые все находятся в этих общедоступных CDN: jQuery, jquery-ui, одна тема, jQuery TOOLS и, возможно, несколько других. В дополнение к ним я могу использовать несколько скриптов, недоступных в общедоступных CDN, таких как superfish, jquery.approach и hoverIntent. Довольно распространенная вещь на самом деле. Кажется, у меня есть два взаимоисключающих варианта:

  • Обратитесь к общедоступным CDN для сценариев, перечисленных выше. Преимущество в том, что я могу использовать чужую пропускную способность и пользоваться популярностью некоторых из этих скриптов. Недостатком является то, что клиент должен сделать не менее 7 циклов обработки всех этих файлов (4 отдельных JS, 1 CSS и по 1 CSS и JS для консолидированного/минимизированного локального материала). Или...
  • Втисните все в два монолитных мини-файла (один для JS и один для CSS) и обслуживайте все с моего собственного веб-сервера. Преимущество в том, что есть только две поездки туда и обратно (экономия не менее 66%). Недостаток, конечно, в том, что теперь мне самому приходится обслуживать намного большую сумму.

Это кажется трудным выбором, и я думаю, что единственный способ действительно понять, что будет работать лучше («лучше» зависит от времени загрузки клиента и общего пользовательского опыта), — это фактически выпустить его в дикую природу и посмотреть, что произойдет. .

Так приходилось ли кому-нибудь делать этот выбор раньше, и если да, то что вы выбрали, почему и насколько удачно он оказался? Или, если кто-то пытался решить задачу тестирования в изолированной среде, как вы это делали и каковы были результаты?

P.S. Все это описывает сайт типа «веб-приложение» — другими словами, не очень загруженный медиа, но может содержать массу стилей и скриптов, которые фактически составляют значительную часть размера страницы. Поэтому я считаю это чем-то большим, чем просто интеллектуальным упражнением.


person Aaronaught    schedule 11.12.2009    source источник


Ответы (3)


Посетите Focus.com в Firebug.

Мы выбрали гибридный подход. Мы вытаскиваем jQuery из Google, а остальные наши css и js объединяются / минимизируются и обслуживаются S3. Мы автоматизировали этап объединения/минификации с помощью нашего процесса сборки, и каждая версия развертывается в своем собственном (пронумерованном) каталоге, чтобы позволить браузерам агрессивно кэшировать наши ресурсы.

Мы решили удалить jQuery из Google, чтобы избежать попадания в 40 КБ, учитывая частоту обновлений кода на нашем сайте (примерно каждые две недели). При этом перед запуском мы провели кучу тестов разных конфигураций и не обнаружили существенных различий в производительности.

person DrewM    schedule 11.12.2009
comment
Похоже, вы довольно много думали об этом; если вы не против рассказать мне несколько подробностей о том, как вы тестировали, я был бы рад принять этот ответ. - person Aaronaught; 15.12.2009
comment
Это очень просто. Я попросил разработчиков и тестировщиков загружать различные страницы с сайта из разных сетей (т. е. разных домашних интернет-провайдеров и одного в другой части страны) с помощью Firebug и записи результатов. Мы меняли конфигурацию сайта, и они снова запускали тест. Это была вечерняя работа, но оказалась полезной - person DrewM; 16.12.2009
comment
Хм, надеялся на что-то большее в плане нагрузочного тестирования. Но у вас есть что-то, что на самом деле находится в производстве сегодня, поэтому ваш ответ здесь лучший! - person Aaronaught; 16.12.2009

Я бы подумал, что все сводится к типу трафика, который вы ожидаете. Если вы получаете тонну уникальных посетителей в месяц, то есть финансовый стимул, по крайней мере, использовать Google или Microsoft для обслуживания JS/CSS и позволить им нести расходы на пропускную способность.

person Darrell Brogdon    schedule 11.12.2009

Microsoft размещает множество файлов jQuery и связанных с ними файлов в своей CDN здесь.

person rboarman    schedule 11.10.2010