Optimasi Kecepatan Loading Time Web Template Dengan Implementasi Teknik Front-End
Main Article Content
Abstract
Situs web merupakan sekumpulan dokumen Hypertext Markup Language (HTML) statis yang dibangun untuk memudahkan setiap orang berbagi informasi, selama terhubung ke dalam jaringan internet. Salah satu bagian dari sistem sebuah situs web adalah web template. Web template adalah komponen dasar dari sistem web template berguna untuk memudahkan pengembang web merancang ulang sebuah halaman web. Salah satu yang mempengaruhi kinerja halaman web yaitu loading time, dimana loading time adalah waktu yang dibutuhkan oleh browser agar dapat menampilkan halaman web secara menyeluruh oleh pengguna ketika pengguna melakukan request, selain itu loading time merupakan salah satu bagian penting dari optimasi situs web. Optimasi merupakan suatu proses dimana memodifikasi atau merubah sesuatu yang telah ada agar efektifitasnya meningkat. Dalam sebuah situs web, terdapat beberapa konsep dalam optimasi, yaitu First Paint, Time To Interactivity (TTI), First Meaningful Paint (FMP) dan Long Task. Berdasarkan penelitian-penelitian yang sudah ada, diketahui bahwa optimasi loading time web dapat dilakukan dari sisi front-end. Oleh karena itu pada penelitian ini melakukan teknik optimasi dengan menggunakan critical rendering path, above the fold, priority resource, bundle and minify, gzip, dan splitting code. Hasil dari peforma web berdasarkan metriks first meaningful paint (FMP), first contetful paint (FCP), dan time to interactivity (TTI) mengalami peningkatan rata-rata kecepatan (perosentase) yaitu FMP sebesar 73%, FCP sebesar 60%, TTI sebesar 50%, dan loading time sebesar 29%. Selanjutnya, pada resource file rata-rata ukuran file menurun sebesar 59% dan jumlah request file menurun sebesar 21%.
Downloads
Article Details
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.
References
Fielding J, Fielding J. The Power of Media Queries. In: Beginning Responsive Web Design with HTML5 and CSS3. 2014.
Gash D. Overview Web Fundamentals Google Developers [Internet]. Google Developers. Google Developers; 2019. Available from: https://developers.google.com/web/fundamentals/performance/get-started/
Sawant O, Godse S. Web-Page Complexity and Optimization Mechanism to Reduce Web-Page Load Time. 2014;1(9):444–7.
Kurniawan H, Widiyanto EP. Analisis Peningkatan Performa Akses Website dengan Web Server Stress Tool. Jatisi. 2016;
Muliono R. OPTIMASI WEBSITE BERBASIS CMS PADA GOOGLE PEGESPEED. CESSJournal Comput Eng Syst Sci. 2016;
Arumoadi, T.Y, Laksito, Y.S.W & Susyanto, T. OPTIMASI KINERJA MOBILE WEBSITE DENGAN TEKNIK FRONT- END OPTIMIZATION PADA TOKO ONLINE IMPERIAL PARFUM. :53–9.
Peterson C. Learning Responsive Web Design: A Beginner’s Guide. A Beginner’s Guide. 2014.
Overson J, Strimpel J. Developing Web components. From jQuery to Polymer. O’Reilly. 2015.
Natarajan H, Rashmi. Improving a website’s rst meaningful paint by optimizing render blocking resources - An experimental case study. School of Technology; 2017.
Kaur S, Kaur K, Kaur P. An Empirical Performance Evaluation of Universities Website. Int J Comput Appl. 2016;146:10–6.
Grigorik I. Critical Rendering Path | Web Fundamentals [Internet]. Google Developers. 2019. Available from: https://developers.google.com/web/fundamentals/performance/critical-rendering-path
Fadeyev D. 10 Useful Usability Findings and Guidelines | Smashing Magazine [Internet]. Smashing Magazine. 2009. Available from: http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/
Gomes S. Resource Prioritization – Getting the Browser to Help You | Web Fundamentals | Google Developers [Internet]. Developers.Google.Com. Available from: https://developers.google.com/web/fundamentals/performance/resource-prioritization
MVC - framework [Internet]. Available from: www.tutorialspoint.com/mvc_framework/mvc_framework_bundling.htm
Wagner JL. Web performance in action : building fast web pages [Internet]. Shelter Island, NY : Manning Publications Co; 2017. Available from: https://www.safaribooksonline.com/library/view/-/9781617293771/?ar
Webp - A new image format for the Web [Internet]. Available from: https://developers.google.com/speed/webp
Huang S. Load time optimization of JavaScript web applications. 2019;(May).