Как пользоваться: Оптимизатор Lottie JSON
- Экспортируйте анимацию в формате Lottie JSON (Bodymovin/LottieFiles) и перетащите файл сюда.
- Оставьте 3 знака после запятой для безопасного результата; для большей экономии выберите 2 и после сравните анимацию.
- Скачайте оптимизированный файл и загрузите его в элемент Lottie в Webflow (или в ваш плеер).
Почему файлы Lottie получаются большими
Анимации Lottie, экспортированные из After Effects, хранят значение каждого ключевого кадра с точностью до 15 знаков после запятой, сохраняют исходные имена слоёв и фигур, содержат метаданные экспортёра и иногда включают скрытые направляющие слои. Ни один из этих элементов не влияет на внешний вид анимации, но всё это нужно загрузить и разобрать до начала воспроизведения — из-за этого страницы работают медленнее и ухудшаются показатели Core Web Vitals.
Что удаляет оптимизатор
| Оптимизация | Эффект |
|---|---|
| Округление чисел (например, 80.0000001 → 80) | Обычно самый большой выигрыш; 3 знака после запятой визуально не отличаются от исходника |
Удаление имён (nm, mn, cl, ln) | Убирает читаемые подписи (имена маркеров, используемых для сегментов, сохраняются) |
| Удаление метаданных | Удаляет информацию об экспортёре, авторе и ключевых словах |
| Удаление скрытых слоёв и фигур | Удаляет элементы с отметкой скрытия (hd: true) |
Использование Lottie в Webflow
Элемент Lottie в Webflow (панель Add → Media → Lottie) принимает загруженные JSON-файлы и управляет воспроизведением через Interactions. Меньшие файлы загружаются быстрее, особенно когда на одной странице работает несколько анимаций. Если анимация содержит встроенные растровые изображения (PNG/JPG в base64), именно они обычно занимают основной объём, — сожмите их перед экспортом или замените векторами. Если вы обращаетесь к именам слоёв в коде (например, к динамическим свойствам lottie-web), отключите опцию «Remove layer & shape names».
Также ищут как: сжать lottie, оптимизатор lottie, bodymovin, lottie webflow, оптимизация анимации lottie, уменьшить json анимации.
Инструменты, которые хорошо сочетаются с Оптимизатор Lottie JSON
- SVG в Webflow — Вставьте SVG из Figma и скопируйте его в Webflow как настоящие Custom Elements.
- Сжатие изображений — Уменьшите фото и графику до 90% без заметной потери качества — всё зависит от изображения и настроек.
- JSON форматтер — Вставьте JSON, чтобы отформатировать, минифицировать или проверить его.
- HTML в Webflow Rich Text — Вставьте «грязный» HTML со старого сайта, экспорта из WordPress, Google Docs или Word и получите чистую семантическую разметку, которую элемент Rich Text в Webflow и импорт CMS принимают без лишнего мусора.