Добрый день, на связи Дмитрий Захаров! Сегодня поделюсь как мы в Росбанке отказались от поддержки Internet Explorer (далее - IE) в интернет клиент банке для крупного бизнеса, расскажу про процесс и результаты.
Ни для кого не секрет, что большинство библиотек (например мы используем Tailwind CSS) и фреймворков последних версий не поддерживают IE от слова совсем, кто они, как не герои, двигающие прогресс вперед? Но в связи с этим случаются и проблемы, мы также застряли в какой-то момент на 11-ом angular, потому что были проблемы с перформансом при обновлении на 12-ый, но в 13-ом уже убрана поддержка IE. Также во многих библиотеках, содержались уязвимости и нужно было что-то с этим делать.
Смотрим аналитику, и у нас доля пользователей IE - 23%! Это цифры на январь 2022 года!
Начинаем есть слона по частям. У нас в приложении интернет клиент банка есть баннеры, которые обычно рассказывают про какую-то функциональность. С помощью них мы и даём понять людям о некоторых наших сервисах. Мы сделали баннер, который предлагает людям перейти на другой браузер и показывали его только для пользователей IE.
Спустя пару месяцев картина с процентом пользователей не особо поменялась, цифры были примерно в тех же значениях. Пришлось перейти к более серьезной работе: сотрудникам контакт центра поддержки был предоставлен скрипт, с помощью которого клиентов оповещали о необходимости работать через актуальные браузеры. Также стоит отметить, что Microsoft оказала нам существенную поддержку и подготовила “удаление” IE через патч из некоторых своих операционных систем 15 июня 2022. В действительности сначала удаление не происходило, просто был редирект запуска на Edge и по сути была некоторая блокировка самого IE, но сам Edge может в некоторую совместимость а-ля эмуляция IE.
Нами был подготовлен уже серьезный баннер, который также показывался у пользователей IE, но с текстом, что после даты N они не смогут работать в IE, так как Microsoft удалит его с их компьютера.
Примерно к этой дате "выпиливания" IE компанией Microsoft 15 июня, количество клиентов в IE уменьшилось до 2.2-3% ежедневных пользователей, что конечно, не могло не радовать. Для того чтобы переход был максимально мягким и люди не впадали в ступор при виде белого экрана в IE было принято решение сделать заглушку, которая предлагала людям возможность скачать себе новый браузер и предоставляла инструкции, как им перенести туда свою работу.
Но если Microsoft блокирует и удялает IE зачем еще думать об этом? А дело в том, что не у всех клиентов могут обновляться системы, и поэтому они этот патч не получат и могут продолжить пользоваться IE.
Вдобавок, использование Tailwind CSS первой версии 1.9.x накладывало свои дополнительные расходы, за счёт того, что библиотека генерировала 12 мб классов стилей и "вытряхивала" лишние только на этапе сборки. 12 мб классов в рантайме браузера это достаточно громоздко. За счёт этого и процесс разработки и сборки удлинялся во времени (холодный старт приложения, hot reloading, сама сборка занимали существенно больше адекватного времени). Но что мешало нам обновиться? Правильно! Уже со второй версии Tailwind CSS они полностью отказались от поддержки IE и поэтому мы не смогли бы обновиться, не убрав поддержку IE у себя в приложении. Поскольку релизы у нас раз в месяц, мы после очередного релиза приняли решение обновиться. Обновили сначала до 12-ого ангуляра, устранили все проблемы, которые возникли, исправили всё в соответствии с breaking changes библиотек и успешно обновились до 13-ого. Далее месяц шла разработка и обкатка, чтобы все команды успели выявить проблемы, если таковые возникнут, и спустя месяц в начале августа вышли в продакшн. Tailwind CSS тоже успешно был обновлен сразу на третью (последнюю) версию, где уже со второй версии существенно переработали процесс, теперь не генерится 12 мб CSS кода, а он добавляется on-demand. Как только вы добавили класс CSS из Tailwind CSS, то он включается в сборку. То есть процесс вывернут, не надо больше "вытряхивать" неиспользуемые классы, а лишь добавляются те, что используются. Такое “маленькое” обновление ускорило нашу сборку в 5 раз, а работу всего пайплайна в 6 раз. Холодная сборка проекта с почти двух минут уменьшилась до 40-50 секунд. Обычная сборка уменьшилась с 10-15 минут (в зависимости от машины, на которой собирается) до 1-2 минут.
Размер бандла после обновления и отказа от поддержки internet explorer упал примерно на 700-1000 КБ после gzip сжатия, плюс код на момент выкатки с 13ым ангуляром уже отдавался в ES2015, что также помогало экономить на размере. Выпилено большое количество полифилов, ну и сам angular тоже не стоит на месте и может все лучше в tree-shaking.
Размер бандла до обновления:
Размер бандла после обновления:
Никто не пострадал, не было ни одного гневного клиента, который отвалился бы из-за IE. Возможно кто-то и был недоволен, но до разработки этот гнев не дошел. Мораль сей басни такова, что нужно работать с клиентами, общаться со стейкхолдерами, пушить эту тему, потому что в конечном итоге никто не пострадает от того, что будет нажимать другую иконку браузера на своем рабочем столе. Зачастую люди просто привыкают к чему-то одному и потом с трудом принимают необходимость изменения. Зато клиент получает evergreen браузер, который обновляется, что также безопаснее для конечного нашего пользователя, нежели продолжать сидеть в небезопасном, не обновляющемся уже много лет IE. Также это хорошо и для нас, как банка, потому-что снижает риски от всякого рода зловредного ПО, который может находиться на компьютере.
Нам безусловно еще есть над чем работать и улучшать метрики Lighthouse, но проведенная работа, поистине принесла пользу всем, и разработчикам, что больше не надо костылять баги IE, тестировщикам больше IE не надо тестировать, ну и скорость работы за счет скорости сборки и прочего увеличилась, размер бандла стал меньше, что способствует лучшей работе нашего приложения для конечных пользователей, которые в свою очередь и приносят нам доход. Наш банк клиент имеет высокий рейтинг SUS (System Usability Scale), и скорость загрузки также прибавляет ему хоть и не на прямую, но косвенно баллов. Все мы помним исследования Google и Amazon, на тему того, что даже сотни миллисекунд влияют на принятие решения о покупке чего-либо и тот факт, что пользователи охотнее пользуются сервисами, которые быстро работают.
Очки Perfomance до обновления:
Очки Perfomance после обновления:
IE также не позволял нам внедрить brotli сжатие, которое эффективнее gzip сжимает текст и, что важно, быстрее распаковывает в браузере. Поэтому теперь у нас развязаны руки на внедрение, что ещё больше ускорит скорость загрузки нашего интернет клиент банка. Также мы посматриваем на avif изображения. Как раз недавно в последний Safary TP завезли уже нормальную поддержку. Правда нулевая поддержка в Edge еще пока пугает. Возможно мы придумаем что-то с фолбеком к jpeg для таких случаев, либо подождем еще :)
Что на сегодняшний день у нас? Мы наверное единственный крупный банк в России, чей интернет клиент банк для крупного бизнеса, сейчас в продакшне на последнем 15-ом ангуляре, отдаем код в ES2022 и практически все либы свежайшие, образы nginx, nodejs в сборочном процессе свежайшие LTS (спасибо нашим DevOps инженерам за помощь в подготовке образов), что не может не радовать нашу безопасность и нас - за простоту поддержки и легкость обновления.
Если вы всё еще поддерживаете Internet Explorer, то желаю вам наладить общение со стейкхолдерами для решения этой задачи по отказу от поддержки. В общем не отступать и не сдаваться! Всем спасибо за внимание!