Studi Analisis Dan Optimasi Penggunaan Format Animasi Vektor (Svg) Untuk Meningkatkan Performa Pada Pengembangan Website Profil Perusahaan
DOI:
https://doi.org/10.31004/joecy.v6i1.8360Keywords:
Performa website, animasi SVG, Lottie JSON, optimasi animasi, Core Web Vitals, pengalaman penggunaAbstract
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.
References
Ibrahim, I. M., Ameen, S. Y., Yasin, H. M., Omar, N., Kak, S. F., Rashid, Z. N., Salih, A. A., Salim, N. O. M., & Ahmed, D. M. (2021). Web Server Performance Improvement Using Dynamic Load Balancing Techniques: A Review. Asian Journal of Research in Computer Science, 10(1), 47–62. https://doi.org/10.9734/ajrcos/2021/v10i130234
Suprapto, A., & Sasongko, D. (2021). Evaluasi Performa Website Berdasarkan Pengujian Beban Dan Stress Menggunakan Loadimpact (Studi Kasus Website Iain Salatiga). Network Engineering Research Operation, 6(1). https://doi.org/10.21107/nero.v6i1.198
Aziz, N. S., Sulaiman, N. S., Hassan, W. N. I. T. M., Zakaria, N. L., & Yaacob, A. (2021). A Review of Website Measurement for Website Usability Evaluation. Journal of Physics: Conference Series, 1874(1). https://doi.org/10.1088/1742-6596/1874/1/012045
APJII. (2024). APJII Jumlah Pengguna Internet Indonesia Tembus 221 Juta Orang. APJII (Asosiasi Penyelenggara Jasa Internet Indonesia). https://apjii.or.id/berita/d/apjii-jumlah-pengguna-internet-indonesia-tembus-221-juta-orang
Sohail, M. (2023). Importance of Website Optimization in Full-Stack Development. In University of Virginia: Vol. VIII (Issue I). University of Virginia.
Sova, E., Makmun, & Tasliza, S. S. (2024). Performance Analysis of Business Startup Website Using Gt-Metrix With Waterfall Software Development Life Cycle Method. International Journal Science and Technology, 3(1), 56–63. https://doi.org/10.56127/ijst.v3i1.1338
Octaviani, A., & Andraini, R. (2022). Analisis Website Fakultas Teknik Universitas Negeri Jakarta Menggunakan Pingdom Tools dan GTmetrix. SINTESIA: Jurnal Sistem Dan Teknologi Informasi Indonesia, 1(2), 76–80. https://tools.pingdom.com/
Susanti, R., & Cahyono, N. (2024). ANALISIS DAN PERBANDINGAN PERFORMA WEBSITE PENERIMAAN. JATI (Jurnal Mahasiswa Teknik Informatika), 8(6), 12044–12050.
Gallino, S., Karacaoglu, N., & Moreno, A. (2023). Need for Speed: The Impact of In-Process Delays on Customer Behavior in Online Retail. Operations Research. https://doi.org/10.1287/opre.2022.2262
Xilogianni, C., Doukas, F.-R., Drivas, I. C., & Kouis, D. (2022). Speed Matters: What to Prioritize in Optimization for Faster Websites. Analytics, 1(2), 175–192. https://doi.org/10.3390/analytics1020012
BEŇO, M., & ӦLVECKÝ, M. (2024). Measuring the performance of techniques for dynamic 2D animation in web browsers. Journal of Applied Mathematics, Statistic, and Informatics, 20(2), 77–110.
Jahromi, H. Z., Delaney, D. T., & Hines, A. (2020). How crisp is the crease? A subjective study on web browsing perception of above-the-fold. Proceedings of the 2020 IEEE Conference on Network Softwarization: Bridging the Gap Between AI and Network Softwarization, NetSoft 2020, 43–50. https://doi.org/10.1109/NetSoft48620.2020.9165497
Imbleau, S. C. (2022). Understanding Hardware-Accelerated 2D Vector Graphics. Appalachian State University.
Maolana, A. (2024). Analisis Perbandingan Hasil Kompresi Citra Format PNG Dengan SVG Untuk Penyimpanan File Gambar. Dinamik, 29(1), 13–18. https://doi.org/10.35315/dinamik.v29i1.9362
Kurniawan, I., Maulana, M. R., & Rusli, C. Y. (2022). Perbandingan Kinerja Browser Pada Pemanfaatan Animasi Svg (Scalable Vector Graphic). IC-Tech, 17(2), 32–39. https://doi.org/10.47775/ictech.v17i2.243
Taryadi, T., Binabar, S. W., & Yunianto, E. (2021). Akurasi Presentasi Web dengan Animasi Scalable Vector Graphics: Studi Kasus Animasi Pembelajaran Komunikasi bagi Anak Autis. Proceedings Series on Physical & Formal Sciences, 1(1), 134–140. https://doi.org/10.30595/pspfs.v1i.145
Rajatheva, R. (2023). Performance Challenges with Data Visualizations in Browser Environment. Aalto University.
Loknar, N. S., Ivančević, T. K., Bekavac, M., & Valenko, S. I. (2023). Technologies for Web Animations and their Positive and Negative Sides Regarding Web Page Metrics. Tehnicki Glasnik, 17(4), 566–571. https://doi.org/10.31803/TG-20230621113640
LottieFiles. (2025a). Lottie: The industry standard for motion design. https://lottiefiles.com/
LottieLab. (2024). How We Make Lotties 10x Smaller. https://www.lottielab.com/blog/how-we-make-lotties-10x-smaller
Wardhani, D. (2024). KOMPARASI ANIMASI FORMAT LOTTIE , JSON , GIF DAN MP4. Jurnal Ilmu Komputer, Sistem Informasi Dan Teknologi Informasi (Innotech), 1(1), 64–72.
Hidayat, T., & Sungkowo, B. D. (2020). Comparison of Memory Consumptive against the Use of Various Image Formats for App Onboarding Animation Assets on Android with Lottie JSON. 2020 3rd International Conference on Computer and Informatics Engineering, IC2IE 2020, 376–381. https://doi.org/10.1109/IC2IE50715.2020.9274612
Nugroho, R. P. A., & Sugandi, A. (2024). Meningkatkan Performa Frontend dengan Menggunakan Framework Next . Js dalam Pengembangan Website. Journal of Cyber Health and Computer (JOCHAC), 2(2), 14–19. https://doi.org/10.18196/jochac.v3i4.14
Nurrokhim, R. F., Siregar, F. F., & Prabowo, A. (2025). Perancangan Sistem Collaborative Shopping dan Pemanfaatan Toko Offline untuk Optimalisasi E-Commerce. Journal of Multidisciplinary Research and Development, 7(4), 2502–2511.
Schoeberl, M., Jellum, E., Lin, S., Jerad, C., Maroun, E. J., Lohstroh, M., & Lee, E. A. (2025). Worst-case performance for real-time systems. Cambridge University Press, 1–8.
DebugBear. (2026, Januari 26). Core Web Vitals metrics and thresholds. DebugBear. Diakses 10 Desember 2025, dari https://www.debugbear.com/docs/core-web-vitals-metrics
Web performance. (n.d.). web.dev. https://web.dev/performance?hl=id
Google. (2024, November 7). Overview of the Performance panel (Indonesian version). Chrome for Developers. Diakses 10 Desember, dari https://developer.chrome.com/docs/devtools/performance/overview?hl=id
MDN contributors. (2025, April 11). Measuring performance. MDN Web Docs. Diakses 15 Desember, 2025, dari https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/Measuring_performance
Al-emran, A., Kapur, P., Pfahl, D., & Ruhe, G. (2008). Simulating Worst Case Scenarios and Analyzing Their Combined Effect in Operational Release Planning. Springer, 269–281.
Chen, S., Dong, X., Xu, H., Wu, X., Tang, F., Zhang, H., Yan, Y., Wu, L., Zhang, W., Hou, G., Shen, Y., Lu, W., & Zhuang, Y. (2025). SVGenius: Benchmarking LLMs in SVG Understanding, Editing and Generation. arXiv. https://doi.org/10.1145/3746027.3758287
Basaglia, M. (2025). Python-Lottie Script Documentation. https://gitlab.com/mattbas/python-lottie
Downloads
Published
How to Cite
Issue
Section
License
Copyright (c) 2026 Clarinta Ghita Pradyan, I Made Suartana
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
