search

commaai / flash

https://flash.comma.ai
5 stars 14 forks source link

Improve page performance with server-side rendering #50

Open trentrand opened 1 month ago

trentrand commented 1 month ago

Closes #42

These changes propose not replacing React to improve performance. With a combination of Server-Side Rendering and client code modifications, we can get the site to feel as performant as the Leaderboard.

Disable cache and give it a few refreshes.

Uses Vike to render the application at build-time. This reduces the amount of Javascript that must be fetched and executed before the page is displayed.

I also made some modifications to the client code to eliminate the visible INITIALIZING to READY state transition, allowing users to interact with the page immediately after load.

The manifest is now fetched silently in the background, typically taking only 10-30ms. If a user interacts before the fetch completes, the system waits for readiness before proceeding.

These changes eliminate all flashing that occurs on page load.

Metrics before change: metrics-before

Metrics after change: metrics-after

trentrand commented 1 month ago

https://github.com/user-attachments/assets/2a90a46e-da37-46f3-8084-c9d30e99f24c

trentrand commented 1 month ago

This might require some changes to .github/workflows/deploy.yml.

Let me know if you'd like me to address that.