Cách dùng Tối ưu JSON Lottie
- Xuất hoạt ảnh của bạn dưới dạng Lottie JSON (Bodymovin/LottieFiles) rồi kéo thả file vào đây.
- Giữ 3 chữ số thập phân để đảm bảo an toàn; thử 2 số để tiết kiệm thêm, sau đó so sánh lại hoạt ảnh.
- Tải file đã tối ưu về và tải lên phần tử Lottie trong Webflow (hoặc trình phát của bạn).
Vì sao file Lottie bị nặng?
Hoạt ảnh Lottie xuất từ After Effects lưu giá trị của mọi keyframe với tới 15 chữ số thập phân, giữ nguyên tên layer và shape gốc, kèm thông tin của phần mềm xuất và đôi khi còn chứa các layer hướng dẫn ẩn. Những thứ này không làm thay đổi cách hoạt ảnh trông, nhưng tất cả vẫn phải được tải xuống và phân tích trước khi hoạt ảnh chạy — làm chậm trang và ảnh hưởng xấu đến Core Web Vitals.
Công cụ tối ưu loại bỏ những gì?
| Tối ưu | Tác dụng |
|---|---|
| Làm tròn số (ví dụ 80.0000001 → 80) | Thường là cải thiện lớn nhất; 3 chữ số thập phân nhìn gần như giống hệt |
Xóa tên (nm, mn, cl, ln) | Loại bỏ nhãn dễ đọc với con người (giữ lại tên marker dùng để phân đoạn) |
| Xóa metadata | Bỏ thông tin về phần mềm xuất, tác giả và từ khóa |
| Xóa layer/shape ẩn | Xóa các phần tử được đánh dấu ẩn (hd: true) |
Sử dụng Lottie trong Webflow
Phần tử Lottie của Webflow (bảng Add → Media → Lottie) nhận file JSON tải lên và điều khiển phát bằng Interactions. File nhỏ hơn sẽ tải nhanh hơn, nhất là khi nhiều hoạt ảnh chạy trên cùng một trang. Nếu hoạt ảnh có chứa ảnh raster nhúng (base64 PNG/JPG), chúng thường chiếm phần lớn dung lượng — hãy nén trước khi xuất hoặc thay bằng vector. Nếu bạn tham chiếu tên layer trong code (ví dụ thuộc tính động của lottie-web), hãy bỏ chọn “Xóa tên layer & shape”.
Cũng được tìm dưới tên: nén lottie json, tối ưu lottie, bodymovin, dung lượng lottie json, webflow lottie, tối ưu hoạt ảnh lottie, lottie optimizer, giảm kích thước lottie.
Các công cụ dùng kèm tốt với Tối ưu JSON Lottie
- SVG sang Webflow — Dán SVG từ Figma và sao chép sang Webflow dưới dạng Custom Elements thật.
- Nén ảnh — Giảm dung lượng ảnh và đồ họa đến 90% mà gần như không thấy mất chất lượng, tùy thuộc vào ảnh và cài đặt.
- Định dạng JSON — Dán JSON để định dạng đẹp, nén hoặc kiểm tra.
- HTML sang Webflow Rich Text — Dán HTML lộn xộn từ website cũ, file xuất WordPress, Google Docs hoặc Word, rồi nhận lại mã ngữ nghĩa sạch mà phần tử Rich Text và import CMS của Webflow chấp nhận, không còn rác.