Analisis Performa Rendering Framework Astro JS, Next JS, Nuxt JS dan SvelteKit Menggunakan Google Lighthouse, PageSpeed Insight dan JMeter

Rendering Performance Analysis of Astro JS, Next JS, Nuxt JS, and SvelteKit Frameworks Using Google Lighthouse, PageSpeed Insight, and JMeter

Perkembangan dan popularitas teknologi modern mendorong inovasi dalam pengembangan aplikasi website untuk meningkatkan kecepatan pemuatan dan mempertahankan pengguna. Penelitian ini bertujuan untuk menganalisis performa website yang menggunakan framework Astro JS, Next JS, Nuxt JS, dan SvelteKit menggunakan teknik SSR (Server Side Rendering). Keunggulan teknik SSR adalah dapat meningkatkan performa website, pengoptimalan SEO (Search Engine Optimization), dan pengalaman pengguna. Tools yang digunakan dalam penelitian ini adalah Google Lighthouse, PageSpeed Insight, dan JMeter. Metrik yang diukur pada pengujian Google Lighthouse dan PageSpeed Insight adalah FCP (First Contentful Paint), TBT (Total Blocking Time), SI (Speed Index), LCP (Large Contentful Paint), dan CLS (Cumulative Layout Shift). Sedangkan pengujian JMeter, metrik yang diukur adalah Response Time (Min, Max, Average), Error Rate, dan Throughput. Metode pengembangan yang digunakan adalah metode XP (Extreme Programming). Hasil penelitian ini adalah Astro JS memiliki performa unggul di sebagian besar metrik Web Vitals, diikuti oleh Next JS yang menunjukkan keunggulan di beberapa metrik. Nuxt JS dan SvelteKit masing-masing hanya unggul di satu metrik Web Vitals. Dalam pengujian stabilitas dan keandalan menggunakan JMeter, Nuxt JS menunjukkan performa terbaik dengan unggul di metrik response time, error rate, dan throughput. SvelteKit juga menampilkan hasil baik dengan dominasi di beberapa metrik stabilitas, sementara Astro JS dan Next JS hanya unggul di sebagian kecil metrik tersebut. Penelitian ini dilakukan agar dapat memberikan wawasan bagi pengembang dalam memilih framework yang tepat berdasarkan kebutuhan.

Kata Kunci: Astro JS, Next JS, Nuxt JS, SvelteKit, Server-Side Rendering, Web Vitals, Google Lighthouse, PageSpeed Insight, JMeter

The development and popularity of modern technology encourage innovation in developing web applications to increase loading speed and retain users. This research analyzes the performance of websites that use Astro JS, Next JS, Nuxt JS, and SvelteKit frameworks using the SSR (Server Side Rendering) technique. The advantage of the SSR technique is that it can improve website performance, SEO (Search Engine Optimization) optimization, and user experience. The tools used in this research are Google Lighthouse, PageSpeed Insight, and JMeter. The metrics measured in Google Lighthouse and PageSpeed Insight testing are FCP (First Contentful Paint), TBT (Total Blocking Time), SI (Speed Index), LCP (Large Contentful Paint), and CLS (Cumulative Layout Shift). While JMeter testing, the metrics measured are Response Time (Min, Max, Average), Error Rate, and Throughput. The development method used is the XP (Extreme Programming) method. The results of this study show Astro JS has superior performance in most Web Vitals metrics, followed by Next JS which shows superiority in several metrics. Nuxt JS and SvelteKit each only excelled in one Web Vitals metric. In stability and reliability of the system testing using JMeter, Nuxt JS showed the best performance by excelling in the response time, error rate, and throughput metrics. SvelteKit also performed well with dominance in several stability metrics, while Astro JS and Next JS only excelled in a small number of them. This research was conducted to provide insight for developers in choosing the right framework based on their needs.

Keywords: Astro JS, Next JS, Nuxt JS, SvelteKit, Server-Side Rendering, Web Vitals, Google Lighthouse, PageSpeed Insight, JMeter