Веб-альманах — это ежегодный исчерпывающий отчёт о вебе, который основан на проверенных данных и выпускается разработчиками HTTP Archive. Давайте посмотрим, какую интересную статистику по вебу удалось собрать за 2021 год.
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 году. При этом ситуация с десктопом обстоит гораздо хуже, чем с мобильными версиями сайта:
Размеры передачи таблиц стилей на страницу. Источник
Невероятно, но рекорд этого года по количеству внешних таблиц стилей превзошел прошлогодний почти в два раза: 2368 против 1379 в 2020 году. Почему бы не объединить несколько файлов в один? Остаётся только догадываться.
В процессе исследования также была найдена страница, на которой общий вес изображений, загруженных с помощью CSS, составил целых 314 386 кБ, что равняется трети гигабайта!
JavaScript
Чтобы оптимизировать использование JavaScript в приложениях, необходимо понять, какая часть JavaScript-кода действительно требуется. Давайте узнаем, как распределяются байты JavaScript на странице:
Загрузка JavaScript на страницу. Источник
Веб-альманах демонстрирует, что среднестатистическая мобильная страница загружает 427 кБ JavaScript, тогда как у десктопной это значение вырастает до 463 кБ.
В сравнении с 2019 годом, рост использования JavaScript составил 18,4% для десктопа и 18,9% для мобильных устройств. Со временем наблюдается тенденция к использованию большего количества JavaScript, что может замедлить рендеринг приложения из-за дополнительной нагрузки на CPU.
Согласно данным Lighthouse, средняя мобильная страница загружает 155 кБ неиспользуемого JavaScript. А в 90-м процентиле не используется целых 598 кБ JavaScript-кода:
Неиспользованные и общие байты JavaScript на мобильных страницах. Источник
Кроме того, JavaScript богат на различные библиотеки и фреймворки, и вот как распределилась их популярность в 2021 году:
Использование библиотек и фреймворков JavaScript. Источник
Другие интересные факты из веб-альманаха
- 94% сайтов используют по крайней мере один сторонний ресурс, подавляющее большинство таких ресурсов от сервисов Google.
- Если на странице подключается виджет YouTube, медианное время блокирования главного потока составляет 1,6 сек.
- 16% страниц используют бессодержательные названия ссылок: «click here», «read», «more», etc.
- 22% сайтов поставляется с HSTS (HTTP Strict Transport Security).
- На 20% сайтов нет определения атрибута lang.
Всего в веб-альманахе было опубликовано 24 главы, которые также затрагивают HTTP, SEO, CMS, безопасность, производительность и многое другое. Ссылка на оглавление для тех, кто желает углубиться во все тонкости изменений веба за 2021 год.
