Claim Missing Document
Check
Articles

Found 1 Documents
Search

Studi Analisis Dan Optimasi Penggunaan Format Animasi Vektor (Svg) Untuk Meningkatkan Performa Pada Pengembangan Website Profil Perusahaan Clarinta Ghita Pradyan; I Made Suartana
Journal of Innovative and Creativity Vol. 6 No. 1 (2026)
Publisher : Fakultas Ilmu Pendidikan Universitas Pahlawan Tuanku Tambusai

Show Abstract | Download Original | Original Source | Check in Google Scholar

Abstract

Pesatnya perkembangan teknologi internet menuntut website memiliki performa optimal, di mana animasi menjadi elemen penting yang dapat memengaruhi kecepatan dan pengalaman pengguna. Format Scalable Vector Graphics (SVG) sering digunakan untuk animasi web karena skalabilitas dan kualitas visualnya, namun pada animasi kompleks, SVG dapat menurunkan performa akibat beban rendering DOM yang tinggi. Penelitian ini bertujuan menganalisis dampak penggunaan animasi SVG terhadap performa website profil perusahaan serta menguji efektivitas dua metode optimasi: code-level optimization (penyederhanaan struktur SVG) dan format-based optimization (konversi ke Lottie JSON). Metode penelitian menggunakan pendekatan eksperimen komparatif dengan pengujian pada landing page statis yang dilengkapi animasi kompleks. Parameter performa diukur menggunakan Google Lighthouse dan Chrome DevTools, mencakup First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT), Cumulative Layout Shift (CLS), Frame Rate (FPS), penggunaan CPU, dan ukuran file. Hasil penelitian menunjukkan bahwa format-based optimization dengan Lottie JSON secara signifikan meningkatkan metrik LCP (0,40–0,58 detik), TBT (250–318 ms), CLS (0,072–0,085), dan FPS (57–58 fps) dibandingkan SVG asli, meskipun ukuran file dan penggunaan CPU lebih tinggi. Sementara itu, code-level optimization efektif menekan TBT hingga 0 ms dan mengurangi ukuran file, namun tidak berdampak besar pada FPS. Kesimpulannya, Lottie JSON lebih optimal untuk animasi kompleks dengan pergerakan dinamis, sedangkan SVG tetap efisien untuk animasi sederhana atau statis. Penelitian ini memberikan rekomendasi praktis bagi pengembang web dalam memilih format animasi berdasarkan kompleksitas desain dan tujuan optimasi performa.