<![CDATA[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.]]>
Copyrights © 2026
