Initial load

.github/workflows/generate-stats.yml

@@ -71,6 +71,7 @@ jobs:
       deps-matrix: ${{ steps.set-matrix.outputs.deps }}
       client-side-rendered-matrix: ${{ steps.set-matrix.outputs.client-side-rendered }}
       server-side-rendered-matrix: ${{ steps.set-matrix.outputs.server-side-rendered }}
+      initial-load-matrix: ${{ steps.set-matrix.outputs.initial-load }}
     steps:
       - name: Checkout code
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
@@ -102,6 +103,7 @@ jobs:
           echo "deps=$(echo "$FRAMEWORKS" | jq -c '[.[] | select(.starter) | select(.starter.measurements | contains(["dependencies"])) | {name, displayName, package: .starter.package}]')" >> $GITHUB_OUTPUT
           echo "client-side-rendered=$(echo "$FRAMEWORKS" | jq -c '[.[] | select(.app) | select(.app.measurements | contains(["clientSideRendered"])) | {name, displayName, package: .app.package, buildScript: .app.buildScript, buildOutputDir: .app.buildOutputDir, measurements: .app.measurements}]')" >> $GITHUB_OUTPUT
           echo "server-side-rendered=$(echo "$FRAMEWORKS" | jq -c '[.[] | select(.app) | select(.app.measurements | contains(["serverSideRendered"])) | {name, displayName, package: .app.package, buildScript: .app.buildScript, buildOutputDir: .app.buildOutputDir, measurements: .app.measurements}]')" >> $GITHUB_OUTPUT
+          echo "initial-load=$(echo "$FRAMEWORKS" | jq -c '[.[] | select(.app) | select(.app.measurements | contains(["initialLoad"])) | {name, displayName, package: .app.package, buildScript: .app.buildScript, buildOutputDir: .app.buildOutputDir, measurements: .app.measurements}]')" >> $GITHUB_OUTPUT
 
   measure:
     name: Run
@@ -117,6 +119,7 @@ jobs:
       deps-matrix: ${{ needs.setup.outputs.deps-matrix }}
       client-side-rendered-matrix: ${{ needs.setup.outputs.client-side-rendered-matrix }}
       server-side-rendered-matrix: ${{ needs.setup.outputs.server-side-rendered-matrix }}
+      initial-load-matrix: ${{ needs.setup.outputs.initial-load-matrix }}
 
   validate:
     name: Validate results

.github/workflows/measure-framework.yml

@@ -48,6 +48,11 @@ on:
         type: string
         required: false
         default: '[]'
+      initial-load-matrix:
+        description: 'JSON array of frameworks to measure initial page resource downloads'
+        type: string
+        required: false
+        default: '[]'
 
 jobs:
   measure-install:
@@ -470,3 +475,49 @@ jobs:
           path: packages/${{ matrix.framework.package }}/ci-stats.json
           retention-days: 1
           if-no-files-found: error
+
+  measure-initial-load:
+    name: ${{ matrix.framework.displayName }} · Initial load
+    if: inputs.initial-load-matrix != '[]'
+    runs-on: depot-ubuntu-24.04
+    strategy:
+      fail-fast: false
+      matrix:
+        framework: ${{ fromJson(inputs.initial-load-matrix) }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@8912a9102ac27614460f54aedde9e1e7f9aec20d # v6.0.5
+
+      - name: Setup Node.js
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+
+      - name: Install workspace dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install package dependencies
+        working-directory: ./packages/${{ matrix.framework.package }}
+        run: pnpm install --frozen-lockfile
+
+      - name: Build app
+        working-directory: ./packages/${{ matrix.framework.package }}
+        run: pnpm build
+
+      - name: Verify runner Chrome
+        run: google-chrome --version
+
+      - name: Run initial load benchmark
+        run: pnpm --filter @framework-tracker/stats-generator run:initial-load ${{ matrix.framework.package }}
+
+      - name: Upload initial load stats
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: initial-load-stats-${{ matrix.framework.name }}
+          path: packages/${{ matrix.framework.package }}/ci-stats.json
+          retention-days: 1
+          if-no-files-found: error

.github/workflows/preview-stats.yml

@@ -16,6 +16,7 @@ jobs:
       ssr-request-throughput-matrix: ${{ steps.detect.outputs.ssr-request-throughput }}
       ssr-load-matrix: ${{ steps.detect.outputs.ssr-load }}
       ssr-router-link-load-matrix: ${{ steps.detect.outputs.ssr-router-link-load }}
+      initial-load-matrix: ${{ steps.detect.outputs.initial-load }}
       deps-matrix: ${{ steps.detect.outputs.deps }}
       framework-names: ${{ steps.detect.outputs.framework-names }}
       has-changes: ${{ steps.detect.outputs.has-changes }}
@@ -66,6 +67,7 @@ jobs:
             echo "ssr-request-throughput=[]" >> $GITHUB_OUTPUT
             echo "ssr-load=[]" >> $GITHUB_OUTPUT
             echo "ssr-router-link-load=[]" >> $GITHUB_OUTPUT
+            echo "initial-load=[]" >> $GITHUB_OUTPUT
             echo "deps=[]" >> $GITHUB_OUTPUT
             exit 0
           fi
@@ -92,6 +94,7 @@ jobs:
           echo "ssr-request-throughput=$(echo "$FRAMEWORKS" | jq -c --argjson names "$NAMES_JSON" '[.[] | select(.name as $n | $names | contains([$n])) | select(.app) | select(.app.measurements | contains(["ssrRequestThroughput"])) | {name, displayName, package: .app.package, buildScript: .app.buildScript, buildOutputDir: .app.buildOutputDir, measurements: .app.measurements}]')" >> $GITHUB_OUTPUT
           echo "ssr-load=$(echo "$FRAMEWORKS" | jq -c --argjson names "$NAMES_JSON" '[.[] | select(.name as $n | $names | contains([$n])) | select(.app) | select(.app.measurements | contains(["ssrLoad"])) | {name, displayName, package: .app.package, buildScript: .app.buildScript, buildOutputDir: .app.buildOutputDir, measurements: .app.measurements}]')" >> $GITHUB_OUTPUT
           echo "ssr-router-link-load=$(echo "$FRAMEWORKS" | jq -c --argjson names "$NAMES_JSON" '[.[] | select(.name as $n | $names | contains([$n])) | select(.app) | select(.app.measurements | contains(["ssrRouterLinkLoad"])) | {name, displayName, package: .app.package, buildScript: .app.buildScript, buildOutputDir: .app.buildOutputDir, measurements: .app.measurements}]')" >> $GITHUB_OUTPUT
+          echo "initial-load=$(echo "$FRAMEWORKS" | jq -c --argjson names "$NAMES_JSON" '[.[] | select(.name as $n | $names | contains([$n])) | select(.app) | select(.app.measurements | contains(["initialLoad"])) | {name, displayName, package: .app.package, buildScript: .app.buildScript, buildOutputDir: .app.buildOutputDir, measurements: .app.measurements}]')" >> $GITHUB_OUTPUT
           echo "deps=$(echo "$FRAMEWORKS" | jq -c --argjson names "$NAMES_JSON" '[.[] | select(.name as $n | $names | contains([$n])) | select(.starter) | select(.starter.measurements | contains(["dependencies"])) | {name, displayName, package: .starter.package}]')" >> $GITHUB_OUTPUT
 
   measure:
@@ -106,6 +109,7 @@ jobs:
       ssr-request-throughput-matrix: ${{ needs.setup.outputs.ssr-request-throughput-matrix }}
       ssr-load-matrix: ${{ needs.setup.outputs.ssr-load-matrix }}
       ssr-router-link-load-matrix: ${{ needs.setup.outputs.ssr-router-link-load-matrix }}
+      initial-load-matrix: ${{ needs.setup.outputs.initial-load-matrix }}
       deps-matrix: ${{ needs.setup.outputs.deps-matrix }}
 
   preview-comment:

packages/app-astro/src/pages/initial-load.astro

@@ -0,0 +1,55 @@
+---
+import '../../../testdata/src/initial-load.css'
+
+export const prerender = false
+---
+
+<html lang="en">
+  <head
+    ><meta charset="utf-8" /><meta
+      name="viewport"
+      content="width=device-width"
+    /><title>Ecosystem Performance</title></head
+  ><body
+    ><main class="performance-page">
+      <div class="performance-content">
+        <p class="performance-eyebrow">Ecosystem Performance</p><h1>
+          Small steps. Faster experiences.
+        </h1><p class="performance-intro">
+          A healthier JavaScript ecosystem starts with the essentials. Explore
+          three ways to make your projects lighter, faster, and easier to
+          maintain.
+        </p><ul class="performance-cards">
+          <li class="performance-card">
+            <span class="performance-number" aria-hidden="true">01</span><h2>
+              Cleanup
+            </h2><p>
+              Remove unnecessary dependencies and simplify your code to build a
+              leaner foundation.
+            </p><a href="https://e18e.dev/learn/cleanup.html"
+              >Explore Cleanup<span aria-hidden="true">↗</span></a
+            >
+          </li><li class="performance-card">
+            <span class="performance-number" aria-hidden="true">02</span><h2>
+              Speedup
+            </h2><p>
+              Find performance bottlenecks and make the tools you use every day
+              run faster.
+            </p><a href="https://e18e.dev/learn/speedup.html"
+              >Explore Speedup<span aria-hidden="true">↗</span></a
+            >
+          </li><li class="performance-card">
+            <span class="performance-number" aria-hidden="true">03</span><h2>
+              Levelup
+            </h2><p>
+              Improve your tooling and adopt better practices for a healthier
+              JavaScript ecosystem.
+            </p><a href="https://e18e.dev/learn/levelup.html"
+              >Explore Levelup<span aria-hidden="true">↗</span></a
+            >
+          </li>
+        </ul>
+      </div>
+    </main></body
+  >
+</html>

packages/app-next-js/app/initial-load/page.tsx

@@ -0,0 +1,72 @@
+import { Suspense } from 'react'
+import { connection } from 'next/server'
+import '../../../testdata/src/initial-load.css'
+
+export default function InitialLoad() {
+  return (
+    <Suspense fallback={null}>
+      <RequestContent />
+    </Suspense>
+  )
+}
+
+async function RequestContent() {
+  await connection()
+
+  return (
+    <>
+      <main className="performance-page">
+        <div className="performance-content">
+          <p className="performance-eyebrow">Ecosystem Performance</p>
+          <h1>Small steps. Faster experiences.</h1>
+          <p className="performance-intro">
+            A healthier JavaScript ecosystem starts with the essentials. Explore
+            three ways to make your projects lighter, faster, and easier to
+            maintain.
+          </p>
+          <ul className="performance-cards">
+            <li className="performance-card">
+              <span className="performance-number" aria-hidden="true">
+                01
+              </span>
+              <h2>Cleanup</h2>
+              <p>
+                Remove unnecessary dependencies and simplify your code to build
+                a leaner foundation.
+              </p>
+              <a href="https://e18e.dev/learn/cleanup.html">
+                Explore Cleanup<span aria-hidden="true">↗</span>
+              </a>
+            </li>
+            <li className="performance-card">
+              <span className="performance-number" aria-hidden="true">
+                02
+              </span>
+              <h2>Speedup</h2>
+              <p>
+                Find performance bottlenecks and make the tools you use every
+                day run faster.
+              </p>
+              <a href="https://e18e.dev/learn/speedup.html">
+                Explore Speedup<span aria-hidden="true">↗</span>
+              </a>
+            </li>
+            <li className="performance-card">
+              <span className="performance-number" aria-hidden="true">
+                03
+              </span>
+              <h2>Levelup</h2>
+              <p>
+                Improve your tooling and adopt better practices for a healthier
+                JavaScript ecosystem.
+              </p>
+              <a href="https://e18e.dev/learn/levelup.html">
+                Explore Levelup<span aria-hidden="true">↗</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </main>
+    </>
+  )
+}

packages/app-nuxt/app/pages/initial-load.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import '../../../testdata/src/initial-load.css'
+</script>
+
+<template>
+  <main class="performance-page">
+    <div class="performance-content">
+      <p class="performance-eyebrow">Ecosystem Performance</p>
+      <h1>Small steps. Faster experiences.</h1>
+      <p class="performance-intro">
+        A healthier JavaScript ecosystem starts with the essentials. Explore
+        three ways to make your projects lighter, faster, and easier to
+        maintain.
+      </p>
+      <ul class="performance-cards">
+        <li class="performance-card">
+          <span class="performance-number" aria-hidden="true">01</span>
+          <h2>Cleanup</h2>
+          <p>
+            Remove unnecessary dependencies and simplify your code to build a
+            leaner foundation.
+          </p>
+          <a href="https://e18e.dev/learn/cleanup.html"
+            >Explore Cleanup<span aria-hidden="true">↗</span></a
+          >
+        </li>
+        <li class="performance-card">
+          <span class="performance-number" aria-hidden="true">02</span>
+          <h2>Speedup</h2>
+          <p>
+            Find performance bottlenecks and make the tools you use every day
+            run faster.
+          </p>
+          <a href="https://e18e.dev/learn/speedup.html"
+            >Explore Speedup<span aria-hidden="true">↗</span></a
+          >
+        </li>
+        <li class="performance-card">
+          <span class="performance-number" aria-hidden="true">03</span>
+          <h2>Levelup</h2>
+          <p>
+            Improve your tooling and adopt better practices for a healthier
+            JavaScript ecosystem.
+          </p>
+          <a href="https://e18e.dev/learn/levelup.html"
+            >Explore Levelup<span aria-hidden="true">↗</span></a
+          >
+        </li>
+      </ul>
+    </div>
+  </main>
+</template>

packages/app-pracht/src/routes.ts

@@ -2,6 +2,10 @@ import { defineApp, route } from '@pracht/core'
 
 export const app = defineApp({
   routes: [
+    route('/initial-load', './routes/initial-load.tsx', {
+      id: 'initial-load',
+      render: 'ssr',
+    }),
     route('/', './routes/home.tsx', { id: 'home', render: 'ssr' }),
     route('/server-side-rendered', './routes/server-side-rendered.tsx', {
       id: 'server-side-rendered',

packages/app-pracht/src/routes/initial-load.tsx

@@ -0,0 +1,60 @@
+import '../../../testdata/src/initial-load.css'
+
+export function Component() {
+  return (
+    <>
+      <main className="performance-page">
+        <div className="performance-content">
+          <p className="performance-eyebrow">Ecosystem Performance</p>
+          <h1>Small steps. Faster experiences.</h1>
+          <p className="performance-intro">
+            A healthier JavaScript ecosystem starts with the essentials. Explore
+            three ways to make your projects lighter, faster, and easier to
+            maintain.
+          </p>
+          <ul className="performance-cards">
+            <li className="performance-card">
+              <span className="performance-number" aria-hidden="true">
+                01
+              </span>
+              <h2>Cleanup</h2>
+              <p>
+                Remove unnecessary dependencies and simplify your code to build
+                a leaner foundation.
+              </p>
+              <a href="https://e18e.dev/learn/cleanup.html">
+                Explore Cleanup<span aria-hidden="true">↗</span>
+              </a>
+            </li>
+            <li className="performance-card">
+              <span className="performance-number" aria-hidden="true">
+                02
+              </span>
+              <h2>Speedup</h2>
+              <p>
+                Find performance bottlenecks and make the tools you use every
+                day run faster.
+              </p>
+              <a href="https://e18e.dev/learn/speedup.html">
+                Explore Speedup<span aria-hidden="true">↗</span>
+              </a>
+            </li>
+            <li className="performance-card">
+              <span className="performance-number" aria-hidden="true">
+                03
+              </span>
+              <h2>Levelup</h2>
+              <p>
+                Improve your tooling and adopt better practices for a healthier
+                JavaScript ecosystem.
+              </p>
+              <a href="https://e18e.dev/learn/levelup.html">
+                Explore Levelup<span aria-hidden="true">↗</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </main>
+    </>
+  )
+}

packages/app-react-router/app/routes.ts

@@ -2,6 +2,7 @@ import { type RouteConfig, index, route } from '@react-router/dev/routes'
 
 export default [
   index('routes/home.tsx'),
+  route('/initial-load', 'routes/initial-load.tsx'),
   route('/client-side-rendered', 'routes/client-side-rendered.tsx'),
   route('/client-side-rendered/:id', 'routes/client-side-rendered.detail.tsx'),
   route('/server-side-rendered', 'routes/server-side-rendered.tsx'),