Автор: Денис Шведюк
Привет 👋, я продуктовый дизайнер. Хочу рассказать вам, как благодаря дизайну мы уменьшили скорость загрузки приложения, снизили количество запросов с 130 до 3 и уменьшили вес файлов, не потеряв качество и количество.
✍️ Описание проблемы
Мы делаем web-сервис для внутренних пользователей. И так получается, что наши пользователи решают свои рабочие задачи в местах, где скорость мобильного интернета низкая - "edge". Наш сервис выключает в себя большое количество инструментов диагностики, которые делают огромное количество запросов. И наши пользователи жаловались на долгую загрузку страниц.
Пока разработчики занимались оптимизацией кода, я решил посмотреть, какие данные загружаются при открытии страницы.
Для тех, кто не знает, где это смотреть:
В браузере нажимаете кнопку "F12" ➔ Выбираете вкладку "Network" ➔ тут нужно перезагрузить страницу ➔ Нас интересуют вкладки "img" — все картинки и иконки, которые грузим, "Media" — видео, аудио, "Font" — шрифты
Я увидел, что у нас грузится 120 svg иконок весом 517 КБ и корпоративные шрифты 10 начертаний весом 1,1 МБ, и это формирует 130 запросов, не говоря уже о других картинках, с которыми надо было что-то делать.
Опытные дизайнеры могу заметить, что в мобильном приложении этих проблем бы не было. Но так сложилось, что у нас не нативное приложение. Переписывать все - слишком долго и дорого, бизнесу такой вариант не интересен. Работаем с тем, что имеем 🤓.
✍️ Оптимизируем иконки
Оптимизировать количество запросов и вес иконок можно, превратив их в шрифт. Если вы вдруг не дизайнер или не хотите рисовать иконки и собирать их в шрифт, то можете воспользоваться готовыми шрифтовыми иконками fontawesome. Нам такой вариант не подходит, т.к. во-первых, в нем много лишних иконок, а во-вторых, продукт требует уникальные иконки.
Мы привели в порядок наши иконки и вписали их в рамки 20х20px.
Экспортируем все иконки в svg отдельными файлами. Далее переходим на сайт fontello. Перетаскиваем наши иконки в поле "Custom Icons", проверяем иконки и видим, что на некоторых иконках есть атрибуты.
Я научился решать эту проблему опытным путём (если кто-то знает как лучше сделать, поделитесь в комментариях). Как решаю ее я: открываю иконку в illustrator ➔ обработка контуров ➔ исключение ➔ сохранить в svg ➔ заливаем на сайт fontello. Атрибуты должны уйти.
Когда все иконки в норме, даем имя шрифту и нажимаем "Download webfont". Мы получаем набор для подключения, больше всего нас интересует размер файла "name-font.woff2". Современные браузеры сами выбирают этот формат и файл ".CSS". В моем случае он весит 18 КБ и СSS 2КБ.
Итого
Было: 517 КБ, 120 запросов. Стало: 20 КБ, 2 запрос 🥳
Минус этого способа 🙁
- Иконки могут быть только монохромные
- Приходится постоянно поддерживать и скидывать актуальную версию
- Если вы поставили буквенные обозначения каждому символу в ручную, когда сбросите кэш на сайте "fontello", придется повторно прописывать их руками.
✍️ Оптимизируем шрифт
В моем случае корпоративный шрифт не подходит. Символы широкие и контента помещается в сроке не так много, как хотелось бы. Кроме этого, размер 1,1 МБ и 10 начертаний не годятся. Можно использовать стандартные шрифты браузера, но нет возможности постоянно тестировать, как рендерится шрифт в разных браузерах и на разных телефонах.
Решили использовать вариативный шрифт Inter. Один файл - 800 начертаний, плюс бесплатная лицензия на использование "Open Font License"
Итого
Было: 1,1 МБ, 10 запросов. Стало: 740 КБ, 1 запрос 🥳
✍️ Оптимизируем анимацию/иллюстрации
Если хочется добавить анимацию, какие есть варианты?
- Делать gif — большой вес файла, если много цветов, и ужасное качество.
- Просить разработчиков делать анимацию на CSS — дорого для бизнеса и очень долго достигать нужного результата.
Есть решение lottie. Подключаем библиотеку, вес которой в районе 200 КБ. Читает файлы в формате "json".
Анимация получается векторной, высокого качества, имеет очень маленький вес. К тому же разработчикам очень просто управлять такой анимацией.
Готовые lottie анимации можно брать на сайте lottiefiles.
Если хотите узнать, как делать свои lottie анимации, подписывайтесь и следите за новостями.
Если эта статья была вам полезна, поставьте лайк👍и напишите в комментариях, какую тему еще стоит разобрать.
