Опубликовано: 10 февраля 2025 г.
Вы когда-нибудь откладывали внедрение современной веб-функции, потому что не были уверены, будут ли ее поддерживать браузеры ваших пользователей? Или хранить тяжелые полифилы дольше, чем нужно? Вы не одиноки. Хотя Baseline дает нам четкие сигналы о глобальной поддержке браузеров, недостающая часть: знание того, что на самом деле поддерживают ваши пользователи.
Команда RUMvision решила эту проблему, объединив базовые данные с данными реального мониторинга пользователей (RUM), и результаты оказались очень интересными. Команды обнаружили, что могут внедрить современные функции на несколько месяцев раньше, чем планировалось, а некоторые обнаружили, что поддерживают полифилы, которые даже не нужны 97% их пользователей. Другие обнаружили, что было бы разумно отложить внедрение новых функций, поскольку их аудитория еще не была готова.
Как работает поддержка Baseline и браузера
Поддержка веб-функции привязана к версии браузера: когда браузеры выпускают какую-либо функцию, пользователи получают ее, обновив свой браузер. Базовый показатель отслеживает, когда все основные браузеры (Chrome, Edge, Firefox и Safari) реализовали функцию, отмечая ее синим значком и устанавливая для нее значение «Вновь доступно». Через 30 месяцев этот статус изменится на «Широко доступный».
Но шаблоны обновлений ваших пользователей могут сильно отличаться от средних мировых показателей. Отслеживая фактические версии браузера ваших пользователей, RUMvision может точно определить, какой процент вашей аудитории поддерживает каждую функцию. Это превращает Baseline из общего индикатора в практический инструмент для вашей конкретной ситуации.
Распространение браузеров в Интернете
Изучив миллионы просмотров страниц на разных рынках (декабрь 2024 г.), RUMvision обнаружила четкие закономерности в том, как пользователи получают обновления браузера:
- Обновления Chrome, Edge и Firefox распространяются быстро, часто они достигают 95% поддержки примерно за три месяца.
- Safari требуется гораздо больше времени — около 19 месяцев, чтобы достичь того же уровня, поскольку он привязан к обновлениям операционной системы.
- У Chrome есть своя особенность: он быстро достигает 95-98%, но затем замедляется, и для достижения 99% требуется до 23 месяцев.
Хотя Baseline отслеживает сотни функций, вы, вероятно, сосредоточены на конкретных, которые хотите использовать. Время ожидания любой функции зависит от того, какой браузер последним ее поддерживал.
Если Chrome был последним браузером, который требовался для того, чтобы функция достигла базового уровня, и ваша аудитория в основном использует Chrome, скорее всего, он появится у них в течение пары месяцев. Но если бы Safari был последним, кто добавил поддержку, даже если бы все остальные браузеры были готовы много лет назад, вам, возможно, придется ждать 19 месяцев, пока пользователи Safari получат необходимое обновление операционной системы.
Реальный мир для всех выглядит по-разному
Наши данные показывают, насколько существенно различается поддержка на разных сайтах (декабрь 2024 г.):
- Голландский ритейлер товаров для дома:
- Базовые функции 2024 года: поддержка 34 %.
- Базовые функции 2023 года: поддержка 76 %.
- Широко доступные функции: поддержка 95%.
- Американский технологический блог:
- Базовые функции 2024 года: поддержка 59 %.
- Базовые функции 2023 года: поддержка 89 %.
- Широко доступные функции: 100% поддержка.
- Сайт недвижимости на Ближнем Востоке:
- Базовые функции 2024 года: поддержка 39 %.
- Базовые функции 2023 года: поддержка 74 %.
- Широко доступные функции: поддержка 95%.
Эти различия возникают из-за того, кто ваши посетители и как они просматривают:
- Технически подкованные пользователи, как правило, быстро обновляются, в то время как широкая аудитория часто остается на более ранних версиях.
- Разные возрастные группы и аудитории имеют разные привычки просмотра и устройства.
- Пользователи мобильных и настольных компьютеров различаются по способу доступа к вашему сайту.
- В некоторых регионах предпочитают iOS, в других — Android, что влияет на то, когда функции станут доступны.
Вот почему одну и ту же функцию можно будет безопасно использовать в технологическом блоге в течение нескольких месяцев, но на сайте электронной коммерции потребуется резервный вариант еще в течение года.
Интеграция Baseline в RUMvision
Команда RUMvision хотела убедиться, что интеграция соответствует ожиданиям разработчиков и тому, как они ожидают видеть представленную информацию.
Они подошли к этому с двух точек зрения:
- Как и сами разработчики, которым необходимо знать эту информацию.
- Как создатели, работающие для более широкого сообщества разработчиков.
Как и многие разработчики, команда регулярно использует такие инструменты, как Can I Use и таблицы поддержки MDN, поэтому они адаптировали интеграцию для представления информации таким образом, чтобы улучшить собственный рабочий процесс и одновременно удовлетворить потребности всех пользователей RUMvision.
Объединение нескольких источников данных
Процесс начинается с автоматического импорта данных недавно выпущенных веб-функций . Эти функции затем отображаются в списке с возможностью поиска и фильтрации для пользователей RUMvision.
При нажатии на веб-функцию открывается модальное окно, отображающее подробную базовую информацию и график поддержки браузера. Это представление дополняется дополнительными сведениями :
- Ресурсы : ссылки на MDN, «Могу ли я использовать», страницы W3C, информацию о выпуске браузера, статус Chrome и статьи на web.dev.
- Базовый график внедрения : показывает, когда каждый браузер реализовал поддержку той или иной функции.
- Таблица поддержки MDN : данные из данных совместимости браузера, отображающие подробную информацию, аналогичную стандартным таблицам поддержки MDN.
- Известные ошибки : Извлечено из того же набора данных для дополнения доступных ресурсов.
- Помощь искусственного интеллекта : помогает интерпретировать статистику поддержки в основных браузерах.
Максимальное использование современных функций
Реальная сила объединения Baseline с пользовательскими данными также заключается в продвижении вперед современных веб-функций. Для каждой функции вы увидите уровни принятия вашей аудиторией и сможете отслеживать, как они меняются с течением времени. Это означает замену сложных решений JavaScript на собственные возможности браузера в нужный момент. Например, вы можете перейти из:
- Адаптивные компоненты на основе JavaScript к запросам контейнера.
- Библиотеки отложенной загрузки JavaScript в зависимости от API IntersectionObserver для встроенной отложенной загрузки .
- Фреймворки с модальными окнами, встроенными в Popover API (например, Bootstrap).
Вместо того, чтобы ждать 30 месяцев для получения статуса «Широко доступный», вы можете принимать обоснованные решения на основе фактических данных об использовании. Вы будете точно знать, когда выпустить новые функции и как их эффективно реализовать.
Реальные примеры, реальный эффект
В качестве рабочего примера взгляните на функцию, которая недавно достигла Baseline, — свойство CSS content-visibility :
- Некоторые сайты имели поддержку 99% и были готовы к немедленному внедрению.
- Другие продемонстрировали поддержку на уровне 82-89%, что указывает на необходимость отступления.
- Некоторые определили конкретные сегменты пользователей, которые все еще используют старые браузеры.
content-visibility для технического сайта в США по сравнению с сайтом риэлтора на Ближнем Востоке.Данные также показали, что с февраля 2024 года по сентябрь 2024 года поддержка обоих браузеров Safari оставалась на уровне около 20%, что коррелирует с развертыванием IOS 18, начиная с сентября 2024 года, с поставкой этой функции.
Успех клиентов благодаря их собственной «широкодоступной» базовой линии
Используя информацию из вашей собственной информации RUM, вы можете создать свой собственный базовый уровень, который включает в себя функции, доступные для вашего сайта в четырех статусах, и возможность их фильтровать:
- Готов к отправке (при поддержке не менее 98% ваших посетителей).
- Выглядит хорошо (охват поддержки от 95% до 98%).
- Внимание (охват от 75% до 95%).
- Действуйте с осторожностью (охват менее 75%).
Объединив свои данные RUM с базовой информацией по каждой веб-функции, пользователи уже увидели истории успеха. Informatiebord.nl удалил 30 КБ полифилов JavaScript после того, как обнаружил, что 97% их пользователей уже поддерживают встроенные функции. Их разработчик Кевин Мейер сказал:
«С помощью Baseline мы можем стратегически решить: сосредоточимся ли мы на обеспечении идеального пользовательского опыта для 97% наших посетителей без ущерба для производительности, или же мы замедлим внедрение инноваций, чтобы охватить оставшиеся 3%? Мы сознательно выбираем первый вариант, поскольку дополнительные усилия для этих 3% негативно повлияют на опыт большинства».
Вклад в Интернет
Базовые данные в сочетании с реальными сведениями о пользователях помогают всем нам принимать более обоснованные решения о поддержке функций. Когда отказаться от устаревшего кода, а когда внедрить новые функции — этот выбор становится яснее, когда вы знаете, что на самом деле поддерживают ваши пользователи.
RUMvision делится результатами о шаблонах внедрения браузеров с группой сообщества WebDX , помогая информировать о том, как функции переходят из статуса «Новые доступные» в «Широко доступные».