Минификация JSON-файлов

Анимации в формате Lottie представляют собой описания сцен в виде JSON-структуры, содержащей ключевые кадры, кривые интерполяции, слои, маски, эффекты и наборы векторных данных. При использовании в браузере этот JSON загружается, парсится и преобразуется в набор WebGL или Canvas-инструкций через Lottie Web.

Каждый лишний килобайт в таком файле напрямую влияет на:

  • время загрузки анимации
  • скорость первого рендера
  • нагрузку на парсер JSON
  • потребление памяти
  • задержки при старте анимации

В отличие от изображений, Lottie-файлы не декодируются нативным кодеком — вся работа выполняется JavaScript-движком, поэтому избыточность данных становится особенно критичной.

Особенности структуры Lottie JSON

Lottie JSON содержит несколько крупных блоков:

  • layers — слои композиции
  • assets — внешние ресурсы и прекомпозиции
  • shapes — векторные формы
  • ks — keyframes (анимационные данные)
  • ip / op / st — таймлайн слоя
  • a / p / s / r — трансформации (anchor, position, scale, rotation)

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

Например, типичная анимация круга может содержать сотни повторяющихся значений кривых Безье, хотя визуально это один простой элемент.

Основные цели минификации Lottie-файлов

Минификация JSON в контексте Lottie Web — это не только удаление пробелов, а комплексная оптимизация структуры данных:

  • сокращение размера JSON
  • уменьшение количества числовых значений
  • устранение избыточных ключей
  • упрощение кривых и keyframes
  • повышение эффективности парсинга

Важно учитывать, что Lottie Web не интерпретирует семантику JSON — он просто читает структуру, поэтому любые оптимизации должны сохранять полную совместимость.

Базовая JSON-минификация

Первый уровень оптимизации — стандартная минификация JSON:

  • удаление пробелов и переносов строк
  • удаление табуляций
  • сокращение форматирования

Пример до:

{
  "v": "5.7.4",
  "fr": 60,
  "ip": 0,
  "op": 120
}

После:

{"v":"5.7.4","fr":60,"ip":0,"op":120}

В Lottie это даёт ощутимый эффект, особенно при больших композициях, но является лишь начальной стадией оптимизации.

Сокращение числовой точности

Одним из главных источников раздувания Lottie JSON являются числа с высокой точностью:

"p": { "x": 120.0000001, "y": 300.0000009 }

Такая точность избыточна для браузерной анимации.

Практика оптимизации:

  • ограничение до 2–3 знаков после запятой
  • округление координат
  • унификация значений трансформаций

Пример:

"p": { "x": 120, "y": 300 }

или

"p": { "x": 120.01, "y": 300.02 }

В сложных сценах это может уменьшить размер файла на десятки процентов.

Удаление избыточных ключей и значений

Экспорт из After Effects через Bodymovin часто включает поля, которые не влияют на финальный рендер:

  • пустые e (end keyframe easing)
  • нулевые маски
  • дефолтные значения opacity
  • неиспользуемые assets
  • пустые эффекты

Пример избыточной структуры:

"o": { "a": 0, "k": 100, "ix": 11 }

Если значение статическое, можно упростить:

"o": 100

Такая трансформация требует понимания семантики Lottie, но даёт существенное сокращение объёма.

Оптимизация keyframes

Keyframes — один из самых тяжёлых элементов Lottie JSON.

Типичные проблемы:

  • слишком частые ключевые кадры
  • дублирующиеся значения
  • микродвижения, не влияющие на визуальный результат

Пример избыточных keyframes:

"k": [
  { "t": 0, "s": [0, 0] },
  { "t": 1, "s": [0.1, 0.1] },
  { "t": 2, "s": [0.2, 0.2] }
]

После оптимизации:

"k": [
  { "t": 0, "s": [0, 0] },
  { "t": 2, "s": [0.2, 0.2] }
]

Lottie Web интерполирует значения самостоятельно, поэтому промежуточные точки часто избыточны.

Упрощение кривых Безье

Кривые анимации (cubic bezier) могут содержать множество контрольных точек:

"o": { "x": [0.333, 0.333], "y": [0, 0] }

В ряде случаев можно заменить сложные кривые на стандартные easing-функции, если визуально поведение не меняется.

Это уменьшает:

  • размер JSON
  • время интерполяции
  • нагрузку на CPU при расчёте кадров

Удаление неиспользуемых assets

Поле assets часто содержит:

  • прекомпозиции, не используемые в сцене
  • скрытые слои
  • экспортированные, но не задействованные элементы

Очистка выполняется через анализ layers и проверку ссылок refId.

Пример проблемы:

"assets": [
  { "id": "image_0", "w": 512, "h": 512, "p": "img.png" },
  { "id": "image_1", "w": 512, "h": 512, "p": "unused.png" }
]

Если image_1 нигде не используется, его удаление уменьшает размер без последствий.

Сжатие строковых идентификаторов

Lottie JSON часто содержит длинные идентификаторы:

  • image_000000123
  • layer_background_gradient_main

Их можно сокращать при условии сохранения ссылочной целостности:

"id": "a1"

или

"id": "l3"

Важно, чтобы все ссылки внутри layers и assets оставались согласованными.

Gzip/Brotli как обязательный уровень оптимизации

После структурной минификации JSON дополнительно проходит сетевое сжатие:

  • Gzip снижает размер на 60–80%
  • Brotli даёт ещё более высокую плотность

Lottie JSON особенно хорошо сжимается из-за:

  • повторяющихся ключей
  • числовых последовательностей
  • предсказуемой структуры

Однако эффективность компрессии зависит от предварительной минификации: плохо оптимизированный JSON хуже сжимается алгоритмами общего назначения.

Влияние минификации на Lottie Web runtime

Lottie Web выполняет несколько критических операций:

  1. JSON.parse
  2. построение внутренних структур слоёв
  3. вычисление keyframes
  4. создание canvas/webgl команд

Минификация влияет на:

  • скорость JSON.parse (меньший текст — быстрее разбор)
  • время построения графа слоёв
  • потребление памяти (меньше объектов)
  • стабильность кадров при старте анимации

Особенно заметен эффект на мобильных устройствах, где парсинг JSON становится узким местом.

Инструменты для минификации Lottie

В экосистеме используются разные подходы:

  • Bodymovin export settings
  • специализированные оптимизаторы JSON
  • post-processing скрипты на Node.js
  • сборочные пайплайны (Webpack, Vite plugins)

Типичный pipeline:

  1. экспорт из After Effects
  2. JSON beautify (для проверки)
  3. структурная оптимизация
  4. числовое округление
  5. финальная минификация
  6. gzip/brotli на сервере

Типичные ошибки при минификации

Некорректная оптимизация может привести к:

  • смещению анимации из-за округления
  • разрыву кривых easing
  • исчезновению слоёв при удалении “пустых” объектов
  • несоответствию таймингов после удаления keyframes
  • поломке ссылок между assets и layers

Особенно опасны автоматические скрипты, которые не учитывают семантику Lottie, а работают только на уровне JSON-структуры.

Баланс между качеством и размером

Минификация Lottie JSON всегда требует компромисса между:

  • визуальной точностью
  • скоростью загрузки
  • производительностью рендеринга
  • читаемостью исходного файла

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

Оглавление