A performance comparison between different frontend architectures in modern web frameworks

A study of differences in performance and environmental impact across three different rendering strategies.

The project test and evaluate, performance and dataload using Google Lighthouse metrics for:

• React set up as a single page application with full client side rendering
• Astro(SSG) + Svelte(island-style) integration setup as a islands style (Javascript in client-view hydration only)
• Astro(SSG) + Svelte(full load) integration set as full load of all Javascript of every site tested.

Collected data as raw-JSON in /lighthouse/performanceData.json

How to run and set up locally

Clone

git clone https://github.com/KenZan00/web-performance-comparison-react-astro.svelte.git

Setup

For each frontend and backend API

npm install

Build & start applications

For each frontend

npm run build

npm run preview -- --port ****

*Note - Map the ports to lighhouse ports if you want to run the full test-suite. The following ports are used by the lighthouse set up:

• React: 4173
• Islands: 4200
• Load: 4300

Backend api

npm run dev

Run

node lighthouse/runTests.js

Collect data

Data is stored in /lighthouse/performanceData.json