Perbandingan Mekanisme Rendering Untuk Optimasi Website Dengan Studi Kasus Website Penitipan Hewan

Comparison Of Rendering Mechanisms For Website Optimization With A Case Study Of An Animal Care Website

Dalam pengembangan sebuah website, pemilihan metode rendering sangat berpengaruh untuk memastikan performa, aksesibilitas, dan pengalaman pengguna yang optimal. Penelitian ini berfokus pada perbandingan metode rendering Client Side Rendering (CSR), Server Side Rendering (SSR), Progressive Render (LazyLoad) dengan studi kasus website penitipan hewan. Website penitipan hewan sendiri merupakan sebuah website yang membantu sebuah user dalam mencatat segala transaksi mengenai penitipan hewan peliharaan. Website penitipan hewan dibangun dengan menggunakan framework NextJS dari Javascript karena dirasa paling tepat untuk menerapkan ketiga metode rendering yang akan diujikan. Perbandingan metode rendering dalam sebuah website akan memberikan dampak positif dalam proses pengembangannya. Masing-masing metode rendering memiliki kelebihannya tersendiri. Client Side Rendering (CSR) akan merender semua konten pada sisi klien dan memberikan fleksibelitas yang lebih baik saat pemuatan awal namun membutuhkan waktu muat yang lebih lama. Server Side Rendering (SSR) merender konten di sisi server sebelum dikirim di sisi client, hal tersebut dapat mempercepat waktu muat yang lebih cepat namun dapat memakan sumber daya server yang lebih banyak. Progressive render dengan teknologi Lazyload dapat memuat konten secara bertahap sesuai dengan kebutuhan pengguna, hal tersebut dapat mengurangi muat awal dan meningkatkan efisiensi pemuatan halaman karena dirasa lebih ringan. Dengan melakukan pengujian menggunakan GTMetriks, penelitian ini akan mengevaluasi mengenai keefektifan dari masing-masing metode rendering dalam meningkatkan kecepatan dan responsifitas sebuah halaman web. Secara keseluruhan, dengan melakukan perbandingan ini dapat tergambarkan dengan jelas mengenai perbedaan dalam segi performa dari masing-masing metode rendering untuk pengembangan sebuah website terutama pada pemilihan metode rendering yang tepat pada situs website penitipan hewan.

KATA KUNCI – CSR, SSR, Progressive Render, Lazy load, NextJS, GTMetrik

In developing a website, the choice of rendering method is very influential in ensuring optimal performance, accessibility, and user experience. This study focuses on the comparison of Client Side Rendering (CSR), Server Side Rendering (SSR), Progressive Render (LazyLoad) rendering methods with a case study of a pet boarding website. The pet boarding website itself is a website that helps a user record all transactions regarding pet boarding. The pet boarding website is built using the NextJS framework from Javascript because it is considered the most appropriate to apply the three rendering methods that will be tested. Comparison of rendering methods on a website will have a positive impact on its development process. Each rendering method has its own advantages. Client Side Rendering (CSR) will render all content on the client side and provide better flexibility during initial loading but requires a longer loading time. Server Side Rendering (SSR) renders content on the server side before being sent to the client side, this can speed up faster loading times but can consume more server resources. Progressive rendering with Lazyload technology can load content gradually according to user needs, this can reduce initial loading and increase page loading efficiency because it is considered lighter. By conducting testing using GTMetriks, this study will evaluate the effectiveness of each rendering method in increasing the speed and responsiveness of a web page. Overall, by conducting this comparison, it can be clearly described the differences in terms of performance of each rendering method for developing a website, especially in choosing the right rendering method on a pet care website.

KEYWORDS – CSR, SSR, Progressive Render, Lazy load, NextJS, GTMetrik