Experiment: f9dcced
rad experiment show f9dcced28ed3ce0d9829557690bac9e80d5ff210
by ee@did:key:z6MkvsiybCuk1WDZhh2aXDx7NTiZejKgWZygMNsUuXDMNvVQ · Apr 11 21:57 2026
split content.ts eager glob into content.server.ts
Measurements
MetricBaselineThe benchmark measurement of the unmodified codeCandidateThe code with the proposed optimization appliedDeltaThe performance change from baseline to candidate
page_load_ms (ms) primary60.230 ms (n=1)63.300 ms (n=1)+5.09% REGRESSED
guide_ms (ms) secondary94.100 ms (n=1)97.800 ms (n=1)+3.93% REGRESSED
home_ms (ms) secondary44.200 ms (n=1)46.400 ms (n=1)+4.97% REGRESSED
learn_ms (ms) secondary43.000 ms (n=1)43.500 ms (n=1)+1.16% REGRESSED
Annotations
hypothesissplit eager-glob functions from content.ts into content.server.ts so universal +page.ts files (blog/[slug], releases/[slug]) stop dragging all blog+release markdown into a shared client chunk
next_action_hinttarget what actually blocks loadEventEnd on localhost: (a) the 3 render-blocking <link rel=stylesheet> tags (global.css, colors.css, typography.css) - inline them or combine; (b) the 150KB HTML for /guides/user (Shiki inline token styles are ~12KB and per-<pre> background vars are ~8KB, extractable to CSS); (c) reduce hydration work in +layout.svelte.
rollback_reasonbench runs against localhost vite preview where JS payload bytes are essentially free; loadEventEnd on localhost is dominated by HTML parse + render-blocking CSS + hydration CPU cost, not download size. The correct architectural fix does not move the chosen metric.
what_happenedbuild confirms the shared 253KB client chunk DNaIt-lF.js disappeared; new largest preloaded chunk on /guides/user is 32KB. But page_load_ms median went 60.23 -> 63.3 (within noise; sample 1 outlier 80.27ms from cold-start of fresh worktree build).
Base CommitThe starting commit before the optimization was applied02ff0feb90241b5bb161c809ab4f45560c7ad4a8
Candidate CommitThe code with the proposed optimization applied90967a2af280be5d0e66b3ca2fceba9c0be2471d
Configoptimize.yaml
Diff
+ src/lib/content.server.ts
@@ -1,34 +1,11 @@
1-import type { Component } from "svelte"; 1+import type { 2+ Post, 3+ PostMetadata, 4+ Release, 5+ ReleaseMetadata, 6+ RecentUpdate, 7+} from "./content"; 8 3-// Types for content metadata 4-export interface PostMetadata { 5- title: string; 6- subtitle?: string; 7- author: string; 8- date: string; 9- slug: string; 10-} 11- 12-export interface ReleaseMetadata { 13- title: string; 14- subtitle?: string; 15- version: string; 16- image?: string; 17- date: string; 18- slug: string; 19-} 20- 21-export interface Post { 22- metadata: PostMetadata; 23- default: Component; 24-} 25- 26-export interface Release { 27- metadata: ReleaseMetadata; 28- default: Component; 29-} 30- 31-// Load all blog posts 9 export async function getPosts(): Promise<Post[]> { 10 const posts: Post[] = []; 11
@@ -47,14 +24,12 @@ export async function getPosts(): Promise<Post[]> {
24 } 25 } 26 50- // Sort by date descending 27 return posts.sort( 28 (a, b) => 29 new Date(b.metadata.date).getTime() - new Date(a.metadata.date).getTime(), 30 ); 31 } 32 57-// Load all releases 33 export async function getReleases(): Promise<Release[]> { 34 const releases: Release[] = []; 35
@@ -73,54 +48,17 @@ export async function getReleases(): Promise<Release[]> {
48 } 49 } 50 76- // Sort by date descending 51 return releases.sort( 52 (a, b) => 53 new Date(b.metadata.date).getTime() - new Date(a.metadata.date).getTime(), 54 ); 55 } 56 83-// Load a single post by slug 84-export async function getPost(slug: string): Promise<Post | null> { 85- try { 86- const post = (await import(`../content/blog/${slug}.md`)) as Post; 87- return { 88- ...post, 89- metadata: { ...post.metadata, slug }, 90- }; 91- } catch { 92- return null; 93- } 94-} 95- 96-// Load a single release by slug 97-export async function getRelease(slug: string): Promise<Release | null> { 98- try { 99- const release = (await import(`../content/releases/${slug}.md`)) as Release; 100- return { 101- ...release, 102- metadata: { ...release.metadata, slug }, 103- }; 104- } catch { 105- return null; 106- } 107-} 108- 109-// Get the latest release version (releases are already sorted by date descending) 57 export async function getLatestVersion(): Promise<string> { 58 const releases = await getReleases(); 59 return releases[0]?.metadata.version ?? "0.0.0"; 60 } 61 115-// Combined update type for recent updates 116-export interface RecentUpdate { 117- title: string; 118- date: string; 119- slug: string; 120- type: "blog" | "release"; 121-} 122- 123-// Get recent updates combining blog posts and releases 62 export async function getRecentUpdates( 63 limit: number = 5, 64 ): Promise<RecentUpdate[]> {
@@ -141,7 +79,6 @@ export async function getRecentUpdates(
79 })), 80 ]; 81 144- // Sort by date descending and take the first `limit` items 82 return updates 83 .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()) 84 .slice(0, limit);
~ src/lib/content.ts
@@ -1,6 +1,5 @@
1 import type { Component } from "svelte"; 2 3-// Types for content metadata 3 export interface PostMetadata { 4 title: string; 5 subtitle?: string;
@@ -28,59 +27,13 @@ export interface Release {
27 default: Component; 28 } 29 31-// Load all blog posts 32-export async function getPosts(): Promise<Post[]> { 33- const posts: Post[] = []; 34- 35- const paths = import.meta.glob("/src/content/blog/*.md", { eager: true }); 36- 37- for (const path in paths) { 38- const file = paths[path] as Post; 39- const slug = path.split("/").pop()?.replace(".md", "") ?? ""; 40- 41- if (file && typeof file === "object" && "metadata" in file) { 42- const metadata = file.metadata as Omit<PostMetadata, "slug">; 43- posts.push({ 44- ...file, 45- metadata: { ...metadata, slug }, 46- }); 47- } 48- } 49- 50- // Sort by date descending 51- return posts.sort( 52- (a, b) => 53- new Date(b.metadata.date).getTime() - new Date(a.metadata.date).getTime(), 54- ); 55-} 56- 57-// Load all releases 58-export async function getReleases(): Promise<Release[]> { 59- const releases: Release[] = []; 60- 61- const paths = import.meta.glob("/src/content/releases/*.md", { eager: true }); 62- 63- for (const path in paths) { 64- const file = paths[path] as Release; 65- const slug = path.split("/").pop()?.replace(".md", "") ?? ""; 66- 67- if (file && typeof file === "object" && "metadata" in file) { 68- const metadata = file.metadata as Omit<ReleaseMetadata, "slug">; 69- releases.push({ 70- ...file, 71- metadata: { ...metadata, slug }, 72- }); 73- } 74- } 75- 76- // Sort by date descending 77- return releases.sort( 78- (a, b) => 79- new Date(b.metadata.date).getTime() - new Date(a.metadata.date).getTime(), 80- ); 30+export interface RecentUpdate { 31+ title: string; 32+ date: string; 33+ slug: string; 34+ type: "blog" | "release"; 35 } 36 83-// Load a single post by slug 37 export async function getPost(slug: string): Promise<Post | null> { 38 try { 39 const post = (await import(`../content/blog/${slug}.md`)) as Post;
@@ -93,7 +46,6 @@ export async function getPost(slug: string): Promise<Post | null> {
46 } 47 } 48 96-// Load a single release by slug 49 export async function getRelease(slug: string): Promise<Release | null> { 50 try { 51 const release = (await import(`../content/releases/${slug}.md`)) as Release;
@@ -105,44 +57,3 @@ export async function getRelease(slug: string): Promise<Release | null> {
57 return null; 58 } 59 } 108- 109-// Get the latest release version (releases are already sorted by date descending) 110-export async function getLatestVersion(): Promise<string> { 111- const releases = await getReleases(); 112- return releases[0]?.metadata.version ?? "0.0.0"; 113-} 114- 115-// Combined update type for recent updates 116-export interface RecentUpdate { 117- title: string; 118- date: string; 119- slug: string; 120- type: "blog" | "release"; 121-} 122- 123-// Get recent updates combining blog posts and releases 124-export async function getRecentUpdates( 125- limit: number = 5, 126-): Promise<RecentUpdate[]> { 127- const [posts, releases] = await Promise.all([getPosts(), getReleases()]); 128- 129- const updates: RecentUpdate[] = [ 130- ...posts.map(p => ({ 131- title: p.metadata.title, 132- date: p.metadata.date, 133- slug: p.metadata.slug, 134- type: "blog" as const, 135- })), 136- ...releases.map(r => ({ 137- title: r.metadata.title, 138- date: r.metadata.date, 139- slug: r.metadata.slug, 140- type: "release" as const, 141- })), 142- ]; 143- 144- // Sort by date descending and take the first `limit` items 145- return updates 146- .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()) 147- .slice(0, limit); 148-}
~ src/routes/+layout.server.ts
@@ -1,4 +1,4 @@
1-import { getLatestVersion } from "$lib/content"; 1+import { getLatestVersion } from "$lib/content.server"; 2 3 export async function load() { 4 const latestVersion = await getLatestVersion();
~ src/routes/+page.server.ts
@@ -1,4 +1,4 @@
1-import { getRecentUpdates } from "$lib/content"; 1+import { getRecentUpdates } from "$lib/content.server"; 2 import { renderRepoAvatar } from "$lib/avatar.server"; 3 4 const SEED_API = "https://julien-test2.staging.radicle.garden/api/v1";
~ src/routes/blog/+page.server.ts
@@ -1,4 +1,4 @@
1-import { getPosts } from "$lib/content"; 1+import { getPosts } from "$lib/content.server"; 2 3 export async function load() { 4 const posts = await getPosts();
~ src/routes/releases/+page.server.ts
@@ -1,4 +1,4 @@
1-import { getReleases } from "$lib/content"; 1+import { getReleases } from "$lib/content.server"; 2 3 export async function load() { 4 const releases = await getReleases();
Environment
Buildtrue
Teststrue
Archaarch64
OSDarwin 14.6.1
CPUApple M2
Agentpi-autoresearch / pi
Filessrc/lib/content.server.ts, src/lib/content.ts, src/routes/+layout.server.ts, src/routes/+page.server.ts, src/routes/blog/+page.server.ts, src/routes/releases/+page.server.ts