Алина Уткина
Алина Уткина
0
Обложка: Самые интересные факты из веб-альманаха 2021

Самые интересные факты из веб-альманаха 2021

Веб-альманах — это ежегодный исчерпывающий отчёт о вебе, который основан на проверенных данных и выпускается разработчиками HTTP Archive. Давайте посмотрим, какую интересную статистику по вебу удалось собрать за 2021 год.

  1. HTML
  2. CSS
  3. JavaScript
  4. Другие интересные факты

HTML

Вы когда-нибудь задумывались, почему все страницы начинаются с общепринятого тега <!DOCTYPE html>? Этот элемент говорит браузерам максимально точно следовать спецификации HTML.

В этом году 97,4% страниц включили в себя <!DOCTYPE html>, что немного выше прошлогодних 96,8%. Если посмотреть на последние пару лет, процент доктайпов неуклонно увеличивался на полпроцента каждый год.

С точки зрения популярности, HTML5, более известный как <!DOCTYPE html>, по-прежнему остается самым популярным типом документа: его используют 88,8% мобильных страниц.

Популярность типов документов согласно веб-альманаху

Популярность типов документов в 2021 году. Источник

Сегодня средняя мобильная страница содержит 27 кБ HTML, что на 2 кБ больше, чем в прошлом году. Что же касается десктопных версий сайта, этот показатель ещё больше и составляет 29 кБ.

Также веб-альманах повествует о HTML-элементах. Например, в настоящее время определены и используются 112 элементов (за исключением SVG и MathML), а ещё 28 считаются устаревшими или устаревшими. При этом средняя страница как в мобильной, так и в десктопной версии, состоит из 31 различных элементов:

Количество различных типов элементов на странице

Количество различных типов элементов на странице. Источник

Ещё один забавный факт: оказалось, что ни один из проанализированных сайтов, не использует <button type="text">.

CSS

Любопытно, что внедрение CSS в JavaScript-код выросло до 3%, что на 1% больше по сравнению с прошлым годом.

Не менее любопытен и другой факт. Несмотря на то, что каскадные таблицы стилей не являются самой тяжёлой составляющей большинства страниц, их вес с каждым годом увеличивается. Так, в 2021 средняя веб-страница загружает около 70 кБ CSS, а это на 7,9% больше, чем в 2020 году. При этом ситуация с десктопом обстоит гораздо хуже, чем с мобильными версиями сайта:

Размеры CSS согласно веб-альманаху

Размеры передачи таблиц стилей на страницу. Источник

Невероятно, но рекорд этого года по количеству внешних таблиц стилей превзошел прошлогодний почти в два раза: 2368 против 1379 в 2020 году. Почему бы не объединить несколько файлов в один? Остаётся только догадываться.

В процессе исследования также была найдена страница, на которой общий вес изображений, загруженных с помощью CSS, составил целых 314 386 кБ, что равняется трети гигабайта!

JavaScript

Чтобы оптимизировать использование JavaScript в приложениях, необходимо понять, какая часть JavaScript-кода действительно требуется. Давайте узнаем, как распределяются байты JavaScript на странице:

Загрузка JavaScript на страницу

Загрузка JavaScript на страницу. Источник

Веб-альманах демонстрирует, что среднестатистическая мобильная страница загружает 427 кБ JavaScript, тогда как у десктопной это значение вырастает до 463 кБ.

В сравнении с 2019 годом, рост использования JavaScript составил 18,4% для десктопа и 18,9% для мобильных устройств. Со временем наблюдается тенденция к использованию большего количества JavaScript, что может замедлить рендеринг приложения из-за дополнительной нагрузки на CPU.

Согласно данным Lighthouse, средняя мобильная страница загружает 155 кБ неиспользуемого JavaScript. А в 90-м процентиле не используется целых 598 кБ JavaScript-кода:

Неиспользованные и общие байты JavaScript на мобильных страницах

Неиспользованные и общие байты JavaScript на мобильных страницах. Источник

Кроме того, JavaScript богат на различные библиотеки и фреймворки, и вот как распределилась их популярность в 2021 году:

Топ библиотек и фреймворков JavaScript согласно веб-альманаху

Использование библиотек и фреймворков JavaScript. Источник

Другие интересные факты из веб-альманаха

  1. 94% сайтов используют по крайней мере один сторонний ресурс, подавляющее большинство таких ресурсов от сервисов Google.
  2. Если на странице подключается виджет YouTube, медианное время блокирования главного потока составляет 1,6 сек.
  3. 16% страниц используют бессодержательные названия ссылок: «click here», «read», «more», etc.
  4. 22% сайтов поставляется с HSTS (HTTP Strict Transport Security).
  5. На 20% сайтов нет определения атрибута lang.

Всего в веб-альманахе было опубликовано 24 главы, которые также затрагивают HTTP, SEO, CMS, безопасность, производительность и многое другое. Ссылка на оглавление для тех, кто желает углубиться во все тонкости изменений веба за 2021 год.