Производительность приложений на Bubble. Заметки. Часть 4. Повышение производительности.
Данная серия статей — это мои заметки по книге The Ultimate Guide to Bubble Performance. Тут изложено только то, что фиксировал я, т.к. посчитал это важным.
Когда открываете Bubble-приложение, ряд ресурсов загружаются на ваш копьютер в оперативную память:
- Движок Bubble
- Изображения и другие медиа-файлы
- Шрифты
- Иконки
- Библиотеки JS
- CSS
- Дизайн страницы (Элементы со страницы)
- Логика приложения (условия и workflow)
Чем больше мы пользуемся страницей, тем больше данных подгружаются в оперативную память. Когда оперативная память заканчивается, то они начинают подгружаться на жёсткий диск, что приводит к медленной работе браузера.
Как оптимизировать работу приложения?
Изображения
Придерживайтесь 4-х простых правил, чтобы использовать изображения:
- Не используете изображения. По возможоности не используйте изображения, там где можно обойтись без них.
- Сжимайте изображения.
- Большинство изображений можно сжать до 40%, прежде чем они потеряют в качестве.
- Прогоните изображение через www.tinypng.com. Сервис работает с png, jpg и webp форматами и отлично сжимает без потери качества. - Используйте правильный формат.
Обычно мы используем форматы: JPG, PNG и SVG. SVG — это векторный формат. Это значит, что мы можем масштабировать изображения такого формата без потери качества. SVG отлично подойдёт для иконок и иллюстраций.
Часто svg-изображение весит меньше, чем такое же, но только в растровом формате (PNG, JPG). Можно использовать его в своем приложении в разных размерах, тогда не будет необходимости загружать несколько копий. - Учитывайте размер устройства. Используйте условие, чтобы загружать изображение меньшего размера на маленькие экраны. Не нужно загружать на телефон изображение размером для ноутбука или десктопа
Шрифты
Каждый шрифт, который используется в приложении, даже если используется один раз, всё равно загружается в оперативную память. Поэтому рекомендуется использовать только 1 шрифт, дабы не нагружать память.
Иконки
Иконки скачиваются не по одной, а сразу наборами. То есть если мы в одном месте использовали иконку из одного набора, а в другом — иконку из другого набора, то чтобы отобразить обе иконки, нужно будет скачать 2 набора иконок полностью.
Поэтому рекомендуется использовать иконки из одного набора.
Библиотеки JS (плагины)
Каждый плагин, который мы используем в приложении, должен быть загружен в оперативную память, только после этого мы можем его использовать.
Ещё один важный момент: плагины, которые ипользуете в приложении, не хранятся на том же сервере, что и ваше приложение. Это значит, чтобы их использовать, нужно отправить запрос на другой сервер (где хранится плагин), чтобы скачать плагин.
Поэтому без необходимости не добавляйте плагины, которыми не планируете пользоваться.
CSS
CSS в Bubble — это стили для элементов.
Используйте стиль, чтобы один раз задать внешние параметры для элемента, а затем использовать этот же стиль для всех подобных элементов.
К примеру, нужно сделать 10 одинаковых голубых кнопок — делайте это через стиль, а не задавайте каждой кнопке голубой цвет.
Подобный подход сделает приложение не только производительнее, но и добавит удобства вам, как разработчику. Например, в случае, если нужно будет поменять цвет кнопки на зелёный. С использованием стилей вы сделаете это нажатием одной кнопки. Без стилей придётся изменять цвет в каждой кнопке по отдельности.
Если статья была для вас полезной, поставьте огонёк 🔥.
→ Подписывайтесь на мой канал в Телеграме Иван Некодит.