Case Study: Тинькофф

Ускорение загрузки UI на 45%

Как мы помогли одной из крупнейших финтех-компаний России оптимизировать дизайн-систему и сократить время отрисовки экрана мобильного приложения.

Интерфейс мобильного приложения Тинькофф

Проблема: «Тяжелый» интерфейс

К 2023 году мобильное приложение Тинькофф содержало более 2500 растровых иконок и сложных SVG-компонентов, что критически влияло на производительность.

Основная проблема заключалась в отсутствии единых стандартов оптимизации. Дизайнеры экспортировали ассеты в высоком разрешении, а разработчики вручную очистили код лишь частично. Это приводило к увеличению размера бандла приложения на 12 МБ и замедляло время первого отклика (FCP) на устройствах среднего класса.

Решение: Интеллектуальная векторизация

Мы внедрили IconKit Pro для автоматизации подготовки и распределения активов.

Автоматический SVG-спрайт

Объединение всех иконок в единый спрайт с удалением лишних мета-данных и атрибутов. Размер пакета иконок сократился с 4.2 МБ до 340 КБ.

Синхронизация токенов

Единый источник истины для цветов и размеров. Изменение палитры в дизайн-системе мгновенно обновляло CSS-переменные в приложении без ручного вмешательства.

Lazy Loading Ассетов

Настройка правил ленивой загрузки для тяжелых компонентов. Иконки загружаются только тогда, когда они попадают в область видимости пользователя.

Результаты: Улучшение метрики LCP

После внедрения IconKit Pro показатели Core Web Vitals вышли на зеленый уровень.

-45%
Время загрузки
0.8s
Новый LCP
3.8MB
Экономия места

Графики эффективности

Динамика LCP (Largest Contentful Paint)

Q1 2023 Q2 2023 Q3 2023 Q4 2023 Q1 2024

Размер бандла ассетов

До оптимизации 12.4 MB
После IconKit Pro 8.6 MB

Вопросы по кейсу

Сколько времени заняла миграция на IconKit?
Полная миграция дизайн-системы и перестройка пайплайна заняла 3 спринта (около 6 недель). Первые результаты по производительности были видны уже после первого обновления.
Совместимо ли решение с текущим стеком React Native?
Да, IconKit Pro генерирует нативные компоненты для React Native, Flutter и iOS/Android, обеспечивая кроссплатформенную консистентность.

Нужна такая же скорость для вашего продукта?

Проведите бесплатный аудит вашей дизайн-системы.

Заказать аудит