Analisis Penggunaan Tag Image di dalam Next.js pada Sistem Manajemen Pembelajaran Instansi Belajar
Kata Kunci:
next.js, pengoptimalan gambar, web vitals, spss statisticsAbstrak
Sistem yang dibuat dalam bentuk web memiliki peran signifikan dalam hal kinerja, Web Vitals merupakan aspek penting dalam mengukur pengalaman pengguna dalam aplikasi berbasis web. Core Web Vitals, bagian dari Web Vitals yang dapat membantu mesin telusur memberikan peringkat untuk halaman web. Sistem manajemen pembelajaran (LMS) berbasis web yang bernama Instansi Belajar mengalami kesulitan untuk memenuhi pedoman metrik Core Web Vitals dikarenakan konten gambar. Penggunaan framework Next.js dalam pembuatan Instansi Belajar memiliki banyak manfaat, antara lain kemampuan Image Optimization yang belum diimplementasikan. Tujuan dari penelitian ini adalah untuk mengkaji penggunaan tag <Image> pada Next.js di dalam LMS Instansi Belajar, dengan penekanan khusus pada perubahan performa setelah mengadopsi fungsi Image Optimization. Penelitian ini dimaksudkan untuk membandingkan penerapan dua metode pemuatan gambar di situs web menggunakan tag <img> dan tag <Image>. Kemudian mengungkap perbedaan dan peningkatan dalam kinerja web dan pengalaman pengguna. Menurut penelitian ini, dua metrik Core Web Vitals telah meningkat: metrik LCP memiliki performa lebih tinggi karena waktu pemuatan gambar yang berkurang; metrik TBT memiliki waktu tunggu lebih sedikit untuk interaksi pengguna; dan metrik CLS tidak berpengaruh karena pergeseran layout tampilan.
Referensi
Azis, M., Pinandito, A. and Maghfiroh, I., 2023. Analisis Perbandingan Penggunaan State Management pada Aplikasi Ditonton menggunakan Framework Flutter. Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer, 7(1), pp.148–153.
Black, E., Beck, D., Dawson, K., Jinks, S. and Dipietro, M., 2007. The other side of the LMS: Considering implementation and use in the adoption of an LMS in online and blended learning environments. TechTrends, 51, pp.35-39+53. https://doi.org/10.1007/s11528-007-0024-x.
Google Developers, 2022. About PageSpeed Insights. [online] Available at: <https://developers.google.com/speed/docs/insights/v5/about> [Accessed 28 April 2023].
HTTP Archive, 2022. Web Almanac 2022. Available at: <https://cdn.httparchive.org/almanac/ebooks/web_almanac_2022_en.pdf>.
Kainu, I., 2020. Optimization in React.js: Methods, Tools, and Techniques to Improve Performance of Modern Web Applications. Tampere University.
Next.js, 2023. Optimizing: Image. [online] Available at: <https://nextjs.org/docs/pages/building-your-application/optimizing/images> [Accessed 16 May 2023].
Osmani, A., 2021a. Image Optimization. Freiburg: Smaching Media.
Osmani, A., 2021b. The Humble Element And Core Web Vitals. [online] Available at: <https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/> [Accessed 15 May 2023].
Sasikumar, S., Prabha, S. and Mohan, C., 2022. Improving Performance Of Next.Js App And Testing It While Building A Badminton Based Web App. Proceedings of the International Conference on Innovative Computing & Communication (ICICC) 2022. [online] Available at: <https://ssrn.com/abstract=4121058> [Accessed 28 April 2023].
Vasilijević, V., Kojić, N. and Vugdelija, N., 2020. A New Approach In Quantifying User Experience In Web-Oriented Applicatoins. In: 4th International Scientific Conference on Recent Advances in Information Technology, Tourism, Economics, Management and Agriculture – ITEMA 2020. Association of Economists and Managers of the Balkans. pp.9–16. https://doi.org/https://doi.org/10.31410/ITEMA.2020.9.
Walton, P., 2019a. First Input Delay (FID). [online] Available at: <https://web.dev/fid/> [Accessed 14 May 2023].
Walton, P., 2019b. Total Blocking Time (TBT). [online] Available at: <https://web.dev/tbt/> [Accessed 28 April 2023].
Walton, P., 2020. Web Vitals. [online] Available at: <https://web.dev/vitals/> [Accessed 15 May 2023].
Walton, P. and Mihajilija, M., 2019. Cumulative Layout Shift (CLS). [online] Available at: <https://web.dev/cls/> [Accessed 28 April 2023].
Walton, P. and Pollard, B., 2019. Largest Contentful Paint (LCP). [online] Available at: <https://web.dev/lcp/> [Accessed 28 April 2023].
Azis, M., Pinandito, A. and Maghfiroh, I., 2023. Analisis Perbandingan Penggunaan State Management pada Aplikasi Ditonton menggunakan Framework Flutter. Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer, 7(1), pp.148–153.
Black, E., Beck, D., Dawson, K., Jinks, S. and Dipietro, M., 2007. The other side of the LMS: Considering implementation and use in the adoption of an LMS in online and blended learning environments. TechTrends, 51, pp.35-39+53. https://doi.org/10.1007/s11528-007-0024-x.
Google Developers, 2022. About PageSpeed Insights. [online] Available at: <https://developers.google.com/speed/docs/insights/v5/about> [Accessed 28 April 2023].
HTTP Archive, 2022. Web Almanac 2022. Available at: <https://cdn.httparchive.org/almanac/ebooks/web_almanac_2022_en.pdf>.
Kainu, I., 2020. Optimization in React.js: Methods, Tools, and Techniques to Improve Performance of Modern Web Applications. Tampere University.
Next.js, 2023. Optimizing: Image. [online] Available at: <https://nextjs.org/docs/pages/building-your-application/optimizing/images> [Accessed 16 May 2023].
Osmani, A., 2021a. Image Optimization. Freiburg: Smaching Media.
Osmani, A., 2021b. The Humble Element And Core Web Vitals. [online] Available at: <https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/> [Accessed 15 May 2023].
Sasikumar, S., Prabha, S. and Mohan, C., 2022. Improving Performance Of Next.Js App And Testing It While Building A Badminton Based Web App. Proceedings of the International Conference on Innovative Computing & Communication (ICICC) 2022. [online] Available at: <https://ssrn.com/abstract=4121058> [Accessed 28 April 2023].
Vasilijević, V., Kojić, N. and Vugdelija, N., 2020. A New Approach In Quantifying User Experience In Web-Oriented Applicatoins. In: 4th International Scientific Conference on Recent Advances in Information Technology, Tourism, Economics, Management and Agriculture – ITEMA 2020. Association of Economists and Managers of the Balkans. pp.9–16. https://doi.org/https://doi.org/10.31410/ITEMA.2020.9.
Walton, P., 2019a. First Input Delay (FID). [online] Available at: <https://web.dev/fid/> [Accessed 14 May 2023].
Walton, P., 2019b. Total Blocking Time (TBT). [online] Available at: <https://web.dev/tbt/> [Accessed 28 April 2023].
Walton, P., 2020. Web Vitals. [online] Available at: <https://web.dev/vitals/> [Accessed 15 May 2023].
Walton, P. and Mihajilija, M., 2019. Cumulative Layout Shift (CLS). [online] Available at: <https://web.dev/cls/> [Accessed 28 April 2023].
Walton, P. and Pollard, B., 2019. Largest Contentful Paint (LCP). [online] Available at: <https://web.dev/lcp/> [Accessed 28 April 2023].
Diterbitkan
Cara Mengutip
Terbitan
Bagian
Lisensi
Hak Cipta (c) 2023 Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer
Artikel ini berlisensiCreative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
