perf: fix slow page loads and gate performance in CI

- Ship one hashed Tailwind stylesheet instead of two (one render-blocking)
- Compress responses in-app (brotli/gzip, streaming-safe) and precompress
  the node build so local and CI measurements match production
- Validate the Supabase session once per request
- Render the homepage immediately and stream public stats
- Stream a Pokedex's entries with the page instead of fetching after
  hydration, running the rows and count queries in parallel
- Shrink the avatar and offline placeholder images, fix layout shift,
  contrast, link names and missing meta descriptions
- Add Lighthouse CI (mobile + desktop) with score and metric budgets,
  bundle-size budgets in the build tests, and signed-in speed scenarios
This commit is contained in:
Josh Creek
2026-09-14 20:53:53 +01:00
parent 556f120f16
commit ff29095c47
30 changed files with 4166 additions and 487 deletions
+20 -9
View File
@@ -1,17 +1,28 @@
import { redirect } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';
export type PublicStats = {
pokemonCaught: number;
users: number;
livingDexesCompleted: number;
};
/**
* Server-side load function for the homepage
*
* Fetches public statistics from the database and passes them to the page component.
* Stats are cached for 24 hours to improve performance.
* Signed-in users go straight to their Pokédexes. For everyone else the page renders at once and
* the public statistics stream in afterwards, so a slow stats query never delays the first paint.
*/
export const load: PageServerLoad = async ({ fetch }) => {
// Fetch stats from database
const statsResponse = await fetch('/api/stats');
const statsData = await statsResponse.json();
export const load: PageServerLoad = async ({ fetch, locals }) => {
const { user } = await locals.safeGetSession();
if (user) {
throw redirect(303, '/my-pokedexes');
}
return {
stats: statsData.error ? null : statsData
};
const stats: Promise<PublicStats | null> = fetch('/api/stats')
.then((response) => response.json())
.then((statsData) => (statsData.error ? null : statsData))
.catch(() => null);
return { stats };
};