Статистика использования javascript-библиотек и CDN

в 18:41, , рубрики: CDN, javascript, jquery, Веб-разработка, статистика, метки: , ,

Вы когда-нибудь задумывались над такими вопросами:

  • Как мир относится к технологии CDN для загрузки библиотек?
  • Сколько успешных сайтов написано на WordPress?
  • Какие скрипты чаще всего разработчики загружают из Google CDN?
  • На сколько популярен jQuery?

А я вот задумался.
И не просто задумался, а сделал маааленькое исследование.
И написал маленькое расширение для хрома, которое, возможно, сделает жизнь лучше или сломает интернеты.
Результаты внутри.

Выводы для ленивых, или TL;DR;

  1. 10% из 300 000 самых популярных сайтов используют WordPress.
  2. Популярные сайты, использующие jQuery, переходят на подключение библиотеки из CDN. С каждым годом правильных ребят всё больше.
  3. Самые популярные версии jQuery в мире: 1.7.x, 1.8.x, 1.9.1, 1.10.2.
  4. jQuery 1.7.x лидирует с большим отрывом: каждая 4ая подключенная jquery имеет версию 1.7.1 или 1.7.2
  5. Google, jQuery и Cloudflare — самые популярные CDN.
  6. 89% всех загрузок с Google CDN — это jquery.

С чего всё началось, или прелюдия

Я вот призадумался — почему браузеры не добавляют популярные js-библиотеки в свои дистрибутивы? Ведь CDN — это очень хорошо, один урл для ресурса, кеширование, все дела. Но ещё лучше вообще не загружать статические файлы, а иметь их сразу в браузере.

Как ответ на несправедливость судьбы был изготовлен сей образец расширениестроения, который призван ускорять интернеты.

Но нельзя же просто выдвинув пару гипотез и «запилив» прототип успокоиться и почивать на лаврах: мозг требует доказательств, фактов и весёлой движухи (да, имеено так я отношусь к интересным исследованиям, хотя в процессе подготовки данных движухи как таковой было мало).

Зачем исследуем?

Итак, есть несколько идей:

  • Вся статика из CDN можеть быть безболезненно помещена в браузер, т.к. она не модифицируются и вообще перманентна.
  • Если много много людей будет грузить статику из браузера, не посылая запросы на сервера CDN, то всем будет хорошо.
  • Если хранить локально все распространённые статические файлы (читай — js библиотеки) и предположить, что сайты пишут хорошие программисты, которые не модифицируют минимизированные либы типа jquery-1.7.2.min.js, то такие файлы — перманентны и к ним применимы п.1 и п.2

Эти идеи требовали подтверждения. А в ходе реализации расширения я столкнулся с дополнительными вопросами:

  • Правда ли, что jQuery — самый популярный скрипт?
  • Какая доля скриптов подключается к сайтам из CDN?
  • Какие версии jQuery используют люди?
  • Попадают ли минифицированные библиотеки, подключаемые со своих серверов, под нужный паттерн в нужном количестве?

Что исследуем?

Изначально я хотел использовать Common Crawl корпус. Но в виду того, что этот зверь весит 81 Тб, и учитывая количество времени и денег, которое придётся потратить на его анализ, зверь был оставлен в покое.

Чуть позже я наткнулся на замечательную статью, в которой автор исследовал интернеты как раз по той теме, которая была мне нужна.
Проблема была в том, что нужных ответов в статье я не нашёл, но нашёл нужные инструменты!

Исследование

Для нужным мне ответов я использовал датасет httparchive. Это набор данных краулера, опращивающего сайты из TOP 300 000 сервиса Alexa. Т.е. можно сказать, что это огромная куча самых популярных сайтов интернета.

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

Количество сайтов, грузящих jQuery из CDN

Скрытый текст

SELECT "jquery" AS name,
count(distinct(pageid)) AS count,
(100*count(distinct(pageid))/290835) AS percent 
FROM requests WHERE pageid <= 14802750 AND pageid >= 14489007
AND url LIKE "%//ajax.googleapis.com/ajax/libs/jquery/%"

Имя Количество %
jquery 59977 20.6223

Каждый год количество сайтов, которые используют различные CDN-решения для подключения jQuery, растёт. Это означает, что прогресс не стоит на месте и люди осознают всю крутость такого решения.

Популярность различных версий jQuery из Google CDN

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

  • Некоторые сайты используют «короткий формат» версий, к примеру //ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js. На сегодняшний день этот формат соответствует jquery-1.9.1. Я учитываю это в итоговых данных.
  • WordPress добавляет к статике параметр?ver=wpversion, которые влияет на группировку по урлу.
  • При изучении частоты версий нам нет разницы, какой протокол используется — http или https.

Скрытый текст

select SUBSTRING(
	url FROM POSITION("/libs/jquery/" IN url) + 13 
	FOR 
		LOCATE("/jquery", url, POSITION("/libs/jquery/" IN url) + 13) - (POSITION("/libs/jquery/" IN url) + 13) 
	) as version, 
count(distinct(pageid)) as count,
(100*count(distinct(pageid))/59977) as percent 
from requests where pageid >= 14489007 and pageid <= 14802750 
and url LIKE "%//ajax.googleapis.com/ajax/libs/jquery/%.min.js" 
group by version order by count desc;

Версия Число включений %
1.7.2 8938 14.9024
1.7.1 6842 11.4077
1.8.3 5670 9.4536
1.9.1 5533 9.2252
1.10.2 5244 8.7434
1.8.2 3832 6.3891
1.4.2 3673 6.1240
1.3.2 2519 4.1999
1.5.2 2297 3.8298
1.6.4 1987 3.3129
1.4.4 1985 3.3096
1.6.2 1644 2.7411
1.6.1 1395 2.3259
1.5.1 1160 1.9341
1.9.0 964 1.6073
1.8.1 880 1.4672
1.10.1 868 1.4472
1.8.0 803 1.3388
2.0.3 508 0.8470
1.2.6 449 0.7486
1.7.0 403 0.6719
1.4.1 382 0.6369
1.11.0 363 0.6052
1.4.3 357 0.5952
2.0.0 246 0.4102
1.6.0 204 0.3401
1.6.3 193 0.3218
1.3.1 112 0.1867
1.5.0 104 0.1734
1.4.0 83 0.1384
1.10.0 79 0.1317
2.0.2 74 0.1234
2.1.0 68 0.1134
1.3.0 42 0.0700
2.0.1 19 0.0317
1.2.3 13 0.0217

В мире jQuery наблюдается интересный тренд — версия 1.7.х лидирует из года в год с огромным отрывом.

Самые популярные CDNы, раздающие js-библиотеки.

Параметр Число % всех сайтов
Общее число CDN-запросов 78160 26.8743

Скрытый текст

select "Google"as name, count(distinct(pageid)) as count,
(100*count(distinct(pageid))/78160) as percent 
from requests where pageid >= 14489007 and pageid <= 14802750 
and url LIKE "%//ajax.googleapis.com/ajax/libs/%" 
UNION
select "Yandex" as name,  count(distinct(pageid)) as count,
(100*count(distinct(pageid))/78160) as percent 
from requests where pageid >= 14489007 and pageid <= 14802750 
and url LIKE "%//yandex.st/%" 
UNION
select "Microsoft" as name,  count(distinct(pageid)) as count,
(100*count(distinct(pageid))/78160) as percent 
from requests where pageid >= 14489007 and pageid <= 14802750 
and url LIKE "%//ajax.aspnetcdn.com/ajax/%" 
UNION
select "JsDelivr" as name, count(distinct(pageid)) as count,
(100*count(distinct(pageid))/78160) as percent 
from requests where pageid >= 14489007 and pageid <= 14802750 
and url LIKE "%//cdn.jsdelivr.net/%" 
UNION
select "Cloudflare" as name, count(distinct(pageid)) as count,
(100*count(distinct(pageid))/78160) as percent 
from requests where pageid >= 14489007 and pageid <= 14802750 
and url LIKE "%//cdnjs.cloudflare.com/ajax/libs/%" 
UNION
select "jQuery" as name, count(distinct(pageid)) as count,
(100*count(distinct(pageid))/78160) as percent 
from requests where pageid >= 14489007 and pageid <= 14802750 
and url LIKE "%//code.jquery.com/%"
group by name order by count desc;

CDN Count Percent
Google 67671 86.5801
jQuery 9222 11.7989
Cloudflare 3996 5.1126
Yandex 2379 3.0438
Microsoft 1300 1.6633
JsDelivr 324 0.4145

Как мы видим, львиная доля ресурсов подключается из Google CDN.
Давайте теперь посмотрим на профиль Google CDN. Будет интересно, но результат предсказуем.

Профиль загрузки скриптов из Google CDN
Скрытый текст

select "jquery" as name,count(distinct(pageid)) as count,
(100*count(distinct(pageid))/67198) as percent 
from requests WHERE pageid <= 14802750 AND pageid >= 14489007
and url like "%//ajax.googleapis.com/ajax/libs/jquery/%"
UNION
select "jquerymobile" as name,count(distinct(pageid)) as count,
(100*count(distinct(pageid))/67198) as percent 
from requests WHERE pageid <= 14802750 AND pageid >= 14489007
and url like "%//ajax.googleapis.com/ajax/libs/jquerymobile/%"
UNION
select "angularjs" as name,count(distinct(pageid)) as count,
(100*count(distinct(pageid))/67198) as percent 
from requests WHERE pageid <= 14802750 AND pageid >= 14489007
and url like "%//ajax.googleapis.com/ajax/libs/angularjs/%"
UNION
select "chrome-frame" as name,count(distinct(pageid)) as count,
(100*count(distinct(pageid))/67198) as percent 
from requests WHERE pageid <= 14802750 AND pageid >= 14489007
and url like "%//ajax.googleapis.com/ajax/libs/chrome-frame/%"
UNION
select "dojo" as name,count(distinct(pageid)) as count,
(100*count(distinct(pageid))/67198) as percent 
from requests WHERE pageid <= 14802750 AND pageid >= 14489007
and url like "%//ajax.googleapis.com/ajax/libs/dojo/%"
UNION
select "ext-core" as name,count(distinct(pageid)) as count,
(100*count(distinct(pageid))/67198) as percent 
from requests WHERE pageid <= 14802750 AND pageid >= 14489007
and url like "%//ajax.googleapis.com/ajax/libs/ext-core/%"
UNION
select "jqueryui" as name,count(distinct(pageid)) as count,
(100*count(distinct(pageid))/67198) as percent 
from requests WHERE pageid <= 14802750 AND pageid >= 14489007
and url like "%//ajax.googleapis.com/ajax/libs/jqueryui/%"
UNION
select "mootools" as name,count(distinct(pageid)) as count,
(100*count(distinct(pageid))/67198) as percent 
from requests WHERE pageid <= 14802750 AND pageid >= 14489007
and url like "%//ajax.googleapis.com/ajax/libs/mootools/%"
UNION
select "prototype" as name,count(distinct(pageid)) as count,
(100*count(distinct(pageid))/67198) as percent 
from requests WHERE pageid <= 14802750 AND pageid >= 14489007
and url like "%//ajax.googleapis.com/ajax/libs/prototype/%"
UNION
select "scriptaculous" as name,count(distinct(pageid)) as count,
(100*count(distinct(pageid))/67198) as percent 
from requests WHERE pageid <= 14802750 AND pageid >= 14489007
and url like "%//ajax.googleapis.com/ajax/libs/scriptaculous/%"
UNION
select "swfobject" as name,count(distinct(pageid)) as count,
(100*count(distinct(pageid))/67198) as percent 
from requests WHERE pageid <= 14802750 AND pageid >= 14489007
and url like "%//ajax.googleapis.com/ajax/libs/swfobject/%"
UNION
select "webfontloader" as name,count(distinct(pageid)) as count,
(100*count(distinct(pageid))/67198) as percent 
from requests WHERE pageid <= 14802750 AND pageid >= 14489007
and url like "%//ajax.googleapis.com/ajax/libs/webfont/%"
order by count;

Script Count Percent
jquery 59977 89.2541
jqueryui 12437 18.5080
webfontloader 4624 6.8812
swfobject 2347 3.4927
prototype 993 1.4777
scriptaculous 787 1.1712
mootools 445 0.6622
angularjs 353 0.5253
dojo 186 0.2768
chrome-frame 75 0.1116
ext-core 16 0.0238
jquerymobile 1 0.0015

jQuery — действительно самый популярный скрипт. Обходит остальные библиотеки на порядок!..
Заметили интригующий результат? jQuery mobile подключен только на одном сайте!
Это не ошибка, я проверил трижды :)

Примерное влияние WordPress

В ходе анализа данных я заметил устойчивый паттерн, вносящий шум в результаты. А именно непонятный параметр в запросах к статике: ?ver=xxx.
Как оказалось, в основном это проделки WordPress! Он добавляет к статике параметр с версией.
К тому же, есть еще несколько характерных паттернов — некоторые сайты добавляют кеш бастинг ко всем ресурсам, включая статику из CDN.

Вернемся к вордпрессу. Я обнаружил интересные закономерности, которые позволяют ввести простую эвристику и оценить, на сколько распространён вордпресс:

  • WordPress использует плагин jquery-migrate. Этот плагин — довольно редкий и используется для того, чтобы вернуть устаревшие фичи jQuery из старых версий в версии 1.9+.
  • Как упоминалось выше, WordPress добавляет параметр с версией к ресурсам.

Используя эти знания, получаем следующее.

Скрытый текст

select count(distinct(pageid)) as count,
(100*count(distinct(pageid))/290835) as percent 
from requests where pageid >= 14489007 and pageid <= 14802750 
and url LIKE "%jquery-migrate%.js\?ver=%"
or url LIKE "%jquery-migrate%.js\?v=%";

Число сайтов % от общего количества
29819 10.2529

Как видите — более 10% самых посещаемых сайтов в мире используют wordpress.

P.S. В ходе исследования ни один сайт не пострадал. А вот расширение может что-нибудь сломать. Если вы его все же решите использовать и обнаружите такое поведение — напишите мне в личку.
P.P.S. Если у вас есть интересные вопросы, то задавайте их в комментариях. Я буду обновлять статью и добавлять ответы.

Автор: MrMig

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js