Lottie Web использует JSON-описание сцен, где каждая деталь
композиции из After Effects превращается в структуру слоёв, ключевых
кадров, масок и кривых. Основной источник избыточного размера — не сами
изображения, а метаданные анимации: трансформации, path-data, временные
кривые и повторяющиеся свойства.
Ключевые факторы увеличения размера:
- высокая плотность keyframes (покадровая анимация вместо
интерполяции)
- избыточная точность чисел (6–8 знаков после запятой)
- неупрощённые Bezier-кривые в shape paths
- дублирующиеся слои и precomposition без flattening
- неочищенные hidden layers и guide layers
- сохранённые expressions и эффекты After Effects
JSON-структура Lottie плохо переносит «визуальный мусор»: даже
невидимые элементы могут сохраняться в экспортированном файле и
увеличивать итоговый вес без влияния на результат рендеринга.
Оптимизация на
уровне композиции в After Effects
Перед экспортом критично влияет подготовка исходной сцены. Lottie
экспортирует практически всё, что присутствует в композиции.
Удаление и упрощение слоёв:
- отключённые visibility layers всё равно могут попадать в JSON
- guide layers и null-объекты иногда сохраняются как служебные
структуры
- эффекты (blur, glow, distortions) часто превращаются в тяжёлые маски
или растровые обходные решения
Сведение precomposition:
- вложенные композиции увеличивают глубину дерева
- flattening уменьшает количество уровней transform hierarchy
- уменьшение числа вложенных layers снижает количество отдельных
keyframes
Оптимизация текста:
- текстовые слои могут экспортироваться как shape layers
- при конвертации увеличивается количество path-данных
- предпочтительно минимизировать количество анимируемых символов
Управление
ключевыми кадрами и временной структурой
Каждый keyframe в Lottie — это отдельная запись JSON. При высокой
частоте кадров размер растёт экспоненциально.
Снижение плотности анимации:
- переход от 60fps к 30fps уменьшает количество ключевых точек
- удаление промежуточных ключей с линейной интерполяцией
- использование easing вместо множества micro-keyframes
Интерполяция вместо дискретизации:
- spatial interpolation заменяет цепочки ключей
- temporal smoothing уменьшает шум кривых
- удержание только экстремумов движения
Особое влияние оказывают path-анимации: каждое изменение точки кривой
создаёт отдельный набор координат, часто с избыточной точностью.
Сжатие чисел и точности
координат
JSON Lottie содержит большое количество числовых значений:
координаты, opacity, transform matrix, bezier handles.
Оптимизация числовой точности:
- сокращение precision до 2–3 знаков
- округление координат перед экспортом
- устранение микродвижений (jitter reduction)
Типичный эффект:
- уменьшение precision с 0.123456 → 0.12 снижает общий вес
path-блоков
- матрицы трансформаций становятся компактнее
- уменьшается entropy при gzip/brotli сжатии
Упрощение shape layers и
path-данных
Shape layers — один из самых тяжёлых элементов Lottie JSON.
Методы оптимизации:
- simplification bezier curves (уменьшение числа points)
- объединение соседних сегментов paths
- flattening boolean operations (union, subtract)
- удаление скрытых fill/stroke properties
Особенно критичны:
- маски с высокой детализацией
- stroke animations с переменной толщиной
- trim paths с множественными сегментами
Каждая дополнительная точка кривой увеличивает вложенность JSON и
снижает эффективность последующего сжатия.
Работа с растровыми
и векторными ресурсами
Изображения внутри Lottie чаще всего становятся base64 или ссылками
на внешние ресурсы.
Оптимизация изображений:
- перевод PNG → WebP снижает размер без потери качества
- снижение разрешения до фактического display size
- удаление alpha-каналов при отсутствии прозрачности
SVG-пути:
- упрощение через SVGO-подобные алгоритмы
- удаление metadata, titles, comments
- оптимизация path precision
Векторные элементы часто выгоднее растрировать при высокой сложности,
если интерактивность не требуется.
Минификация JSON-структуры
После экспорта JSON содержит множество служебных полей, не влияющих
на визуальный результат.
Типичные методы:
- удаление null-полей
- сокращение ключей (name → n, opacity → o и т.д.)
- устранение повторяющихся объектов через reference pooling (если
поддерживается пайплайном)
- сортировка структур для лучшего gzip compression ratio
Минификация влияет не только на размер файла, но и на скорость
парсинга в браузере.
Архивирование: gzip и Brotli
Перед доставкой через сеть Lottie JSON почти всегда сжимается
транспортным алгоритмом.
gzip:
- хорошо работает с повторяющимися ключами JSON
- стандартная поддержка CDN и серверов
Brotli:
- более эффективен для JSON с высокой структурной повторяемостью
- даёт дополнительное снижение 15–30% относительно gzip
Эффективность сжатия напрямую зависит от предварительной оптимизации:
чем чище JSON, тем выше коэффициент компрессии.
Формат dotLottie и
контейнеризация
Современный подход к упаковке анимаций — использование
контейнеров.
dotLottie:
- объединяет JSON, изображения и шрифты
- использует zip-структуру
- уменьшает HTTP-запросы
Преимущества:
- кэширование как одного файла
- централизованное хранение ресурсов
- возможность версионирования пакета
Оптимизация внутри контейнера включает дедупликацию ассетов и
устранение повторяющихся изображений между анимациями.
Оптимизация
загрузки и исполнения в браузере
Производительность зависит не только от размера файла, но и от
структуры исполнения в runtime.
Основные узкие места:
- парсинг JSON в main thread
- построение SVG/Canvas layers
- вычисление easing curves
- обработка mask clipping
Методы снижения нагрузки:
- lazy loading анимаций вне viewport
- кеширование разобранных animation objects
- повторное использование Lottie instances
- отключение autoplay до необходимости
Снижение нагрузки на
рендеринг
Рендеринг сложных сцен приводит к высокому CPU usage.
Оптимизационные техники:
- замена stroke animations на fill transformations
- ограничение количества одновременно активных слоёв
- использование Canvas renderer вместо SVG при сложных сценах
- уменьшение частоты обновления (requestAnimationFrame
throttling)
Особенно критичны анимации с большим количеством masks и blend modes,
которые плохо масштабируются.
Метрики качества и контроль
размера
Контроль оптимизации требует анализа конкретных параметров:
- размер JSON до/после оптимизации
- количество layers
- число keyframes
- depth hierarchy
- количество path points
- время парсинга (ms)
- frame drop rate на слабых устройствах
Сравнение метрик позволяет выявлять деградации после изменений в
композиции или экспортном пайплайне.
Типовые анти-паттерны
Наиболее частые причины раздувания Lottie-анимаций:
- экспорт «как есть» из After Effects без чистки
- использование сложных эффектов вместо простых трансформаций
- чрезмерная детализация motion paths
- сохранение неиспользуемых assets
- отсутствие постобработки JSON
Каждый из этих факторов увеличивает размер и снижает стабильность
воспроизведения на мобильных устройствах и слабых CPU.