Updated name

packages/docs/src/components/LighthouseClientSideRenderedCharts.astro

@@ -0,0 +1,9 @@
+---
+import LighthouseClientSideRenderedFPChart from './LighthouseClientSideRenderedFPChart.astro'
+import LighthouseClientSideRenderedFCPChart from './LighthouseClientSideRenderedFCPChart.astro'
+import LighthouseRenderedInteractionCharts from './LighthouseRenderedInteractionCharts.astro'
+---
+
+<LighthouseClientSideRenderedFPChart />
+<LighthouseClientSideRenderedFCPChart />
+<LighthouseRenderedInteractionCharts testsKey="clientSideRenderedTests" />

packages/docs/src/components/ServerSideRenderedFCPChart.astro → packages/docs/src/components/LighthouseClientSideRenderedFCPChart.astro

@@ -1,9 +1,9 @@
 ---
 import { ssrRequestThroughputStats } from '../lib/prepare-chart'
-import { prepareServerSideRenderedTestsFcpMsComparison } from '../lib/prepare-chart'
+import { prepareLighthouseClientSideRenderedTestsFcpMsComparison } from '../lib/prepare-chart'
 import ComparisonBarChart from './ComparisonBarChart.astro'
 
-const chart = prepareServerSideRenderedTestsFcpMsComparison(
+const chart = prepareLighthouseClientSideRenderedTestsFcpMsComparison(
   ssrRequestThroughputStats,
 )
 ---

packages/docs/src/components/ClientSideRenderedFPChart.astro → packages/docs/src/components/LighthouseClientSideRenderedFPChart.astro

@@ -1,9 +1,9 @@
 ---
 import { ssrRequestThroughputStats } from '../lib/prepare-chart'
-import { prepareClientSideRenderedTestsFirstPaintMsComparison } from '../lib/prepare-chart'
+import { prepareLighthouseClientSideRenderedTestsFirstPaintMsComparison } from '../lib/prepare-chart'
 import ComparisonBarChart from './ComparisonBarChart.astro'
 
-const chart = prepareClientSideRenderedTestsFirstPaintMsComparison(
+const chart = prepareLighthouseClientSideRenderedTestsFirstPaintMsComparison(
   ssrRequestThroughputStats,
 )
 ---

packages/docs/src/components/ClientSideRenderedStatsTable.astro → packages/docs/src/components/LighthouseClientSideRenderedStatsTable.astro

@@ -23,7 +23,7 @@ const columns = [
 ---
 
 <StatsTable
-  label="Client side rendered performance by framework"
+  label="Client side rendered performance by framework (Lighthouse)"
   columns={columns}
   data={clientSideRenderedStats}
 />

packages/docs/src/components/LighthouseFrameworkClientRenderedVersionCharts.astro

@@ -0,0 +1,34 @@
+---
+import type { ChartMeasurement } from '../lib/types'
+import {
+  prepareLighthouseClientSideRenderedTestsFcpMsHistory,
+  prepareLighthouseClientSideRenderedTestsFirstPaintMsHistory,
+  prepareLighthouseClientSideRenderedTestsInteractionHistory,
+} from '../lib/prepare-chart'
+import VersionLineChart from './VersionLineChart.astro'
+import InteractionHistoryChart from './InteractionHistoryChart.astro'
+
+interface Props {
+  versions: ChartMeasurement[]
+}
+
+const { versions } = Astro.props
+
+const interactionData =
+  prepareLighthouseClientSideRenderedTestsInteractionHistory(versions)
+---
+
+<VersionLineChart
+  {...prepareLighthouseClientSideRenderedTestsFirstPaintMsHistory(versions)}
+/>
+<VersionLineChart
+  {...prepareLighthouseClientSideRenderedTestsFcpMsHistory(versions)}
+/>
+{
+  interactionData.length > 0 ? (
+    <InteractionHistoryChart
+      title="Client Interaction Breakdown by Version (Lighthouse)"
+      data={interactionData}
+    />
+  ) : null
+}

packages/docs/src/components/LighthouseFrameworkServerRenderedVersionCharts.astro

@@ -0,0 +1,34 @@
+---
+import type { ChartMeasurement } from '../lib/types'
+import {
+  prepareLighthouseServerSideRenderedTestsFcpMsHistory,
+  prepareLighthouseServerSideRenderedTestsFirstPaintMsHistory,
+  prepareLighthouseServerSideRenderedTestsInteractionHistory,
+} from '../lib/prepare-chart'
+import VersionLineChart from './VersionLineChart.astro'
+import InteractionHistoryChart from './InteractionHistoryChart.astro'
+
+interface Props {
+  versions: ChartMeasurement[]
+}
+
+const { versions } = Astro.props
+
+const interactionData =
+  prepareLighthouseServerSideRenderedTestsInteractionHistory(versions)
+---
+
+<VersionLineChart
+  {...prepareLighthouseServerSideRenderedTestsFirstPaintMsHistory(versions)}
+/>
+<VersionLineChart
+  {...prepareLighthouseServerSideRenderedTestsFcpMsHistory(versions)}
+/>
+{
+  interactionData.length > 0 ? (
+    <InteractionHistoryChart
+      title="Server Interaction Breakdown by Version (Lighthouse)"
+      data={interactionData}
+    />
+  ) : null
+}

packages/docs/src/components/RenderedInteractionCharts.astro → packages/docs/src/components/LighthouseRenderedInteractionCharts.astro

@@ -16,6 +16,9 @@ const data = getRenderedInteractionBreakdownData(testsKey).sort(
 
 {
   data.length > 0 ? (
-    <InteractionBreakdownChart title="Interaction Breakdown" data={data} />
+    <InteractionBreakdownChart
+      title="Interaction Breakdown (Lighthouse)"
+      data={data}
+    />
   ) : null
 }

packages/docs/src/components/LighthouseServerSideRenderedCharts.astro

@@ -0,0 +1,9 @@
+---
+import LighthouseServerSideRenderedFPChart from './LighthouseServerSideRenderedFPChart.astro'
+import LighthouseServerSideRenderedFCPChart from './LighthouseServerSideRenderedFCPChart.astro'
+import LighthouseRenderedInteractionCharts from './LighthouseRenderedInteractionCharts.astro'
+---
+
+<LighthouseServerSideRenderedFPChart />
+<LighthouseServerSideRenderedFCPChart />
+<LighthouseRenderedInteractionCharts testsKey="serverSideRenderedTests" />

packages/docs/src/components/ClientSideRenderedFCPChart.astro → packages/docs/src/components/LighthouseServerSideRenderedFCPChart.astro

@@ -1,9 +1,9 @@
 ---
 import { ssrRequestThroughputStats } from '../lib/prepare-chart'
-import { prepareClientSideRenderedTestsFcpMsComparison } from '../lib/prepare-chart'
+import { prepareLighthouseServerSideRenderedTestsFcpMsComparison } from '../lib/prepare-chart'
 import ComparisonBarChart from './ComparisonBarChart.astro'
 
-const chart = prepareClientSideRenderedTestsFcpMsComparison(
+const chart = prepareLighthouseServerSideRenderedTestsFcpMsComparison(
   ssrRequestThroughputStats,
 )
 ---

packages/docs/src/components/ServerSideRenderedFPChart.astro → packages/docs/src/components/LighthouseServerSideRenderedFPChart.astro

@@ -1,9 +1,9 @@
 ---
 import { ssrRequestThroughputStats } from '../lib/prepare-chart'
-import { prepareServerSideRenderedTestsFirstPaintMsComparison } from '../lib/prepare-chart'
+import { prepareLighthouseServerSideRenderedTestsFirstPaintMsComparison } from '../lib/prepare-chart'
 import ComparisonBarChart from './ComparisonBarChart.astro'
 
-const chart = prepareServerSideRenderedTestsFirstPaintMsComparison(
+const chart = prepareLighthouseServerSideRenderedTestsFirstPaintMsComparison(
   ssrRequestThroughputStats,
 )
 ---

packages/docs/src/components/ServerSideRenderedStatsTable.astro → packages/docs/src/components/LighthouseServerSideRenderedStatsTable.astro

@@ -23,7 +23,7 @@ const columns = [
 ---
 
 <StatsTable
-  label="Server side rendered performance by framework"
+  label="Server side rendered performance by framework (Lighthouse)"
   columns={columns}
   data={serverSideRenderedStats}
 />

packages/docs/src/components/benchmarks/lighthouse-client-side-rendered-tests/Compare.astro

@@ -0,0 +1,10 @@
+---
+import { Content as Description } from './Description.mdx'
+import LighthouseClientSideRenderedStatsTable from '../../LighthouseClientSideRenderedStatsTable.astro'
+import LighthouseClientSideRenderedCharts from '../../LighthouseClientSideRenderedCharts.astro'
+---
+
+<Description />
+
+<LighthouseClientSideRenderedStatsTable />
+<LighthouseClientSideRenderedCharts />

packages/docs/src/components/benchmarks/lighthouse-client-side-rendered-tests/Description.mdx

@@ -0,0 +1,6 @@
+These CSR browser performance tests use Lighthouse to measure paint timings and a controlled navigation interaction.
+
+Methodology: [Client Side Rendered Tests (Lighthouse)](/methodology/#client-side-rendered-tests-lighthouse).
+
+Some frameworks have been moved off their golden path to make client side tests
+fair when comparing. See the methodology link above for the full details.

packages/docs/src/components/benchmarks/server-side-rendered-tests/Details.astro → packages/docs/src/components/benchmarks/lighthouse-client-side-rendered-tests/Details.astro

@@ -1,7 +1,7 @@
 ---
 import type { ComponentProps } from 'astro/types'
 import { Content as Description } from './Description.mdx'
-import Charts from '../../FrameworkServerRenderedVersionCharts.astro'
+import Charts from '../../LighthouseFrameworkClientRenderedVersionCharts.astro'
 
 type Props = ComponentProps<typeof Charts>
 ---

packages/docs/src/components/benchmarks/lighthouse-server-side-rendered-tests/Compare.astro

@@ -0,0 +1,10 @@
+---
+import { Content as Description } from './Description.mdx'
+import LighthouseServerSideRenderedStatsTable from '../../LighthouseServerSideRenderedStatsTable.astro'
+import LighthouseServerSideRenderedCharts from '../../LighthouseServerSideRenderedCharts.astro'
+---
+
+<Description />
+
+<LighthouseServerSideRenderedStatsTable />
+<LighthouseServerSideRenderedCharts />

packages/docs/src/components/benchmarks/lighthouse-server-side-rendered-tests/Description.mdx

@@ -0,0 +1,3 @@
+These SSR browser performance tests use Lighthouse to measure paint timings and a controlled navigation interaction.
+
+Methodology: [Server Side Rendered Tests (Lighthouse)](/methodology/#server-side-rendered-tests-lighthouse).

packages/docs/src/components/benchmarks/client-side-rendered-tests/Details.astro → packages/docs/src/components/benchmarks/lighthouse-server-side-rendered-tests/Details.astro

@@ -1,7 +1,7 @@
 ---
 import type { ComponentProps } from 'astro/types'
 import { Content as Description } from './Description.mdx'
-import Charts from '../../FrameworkClientRenderedVersionCharts.astro'
+import Charts from '../../LighthouseFrameworkServerRenderedVersionCharts.astro'
 
 type Props = ComponentProps<typeof Charts>
 ---

packages/docs/src/content/docs/all-frameworks.mdx

@@ -17,8 +17,8 @@ import DevServerStartupCompare from '../../components/benchmarks/dev-server-star
 import CoreJsCompare from '../../components/benchmarks/core-js-polyfills/Compare.astro'
 import BrowserBaselineCompare from '../../components/benchmarks/browser-baseline/Compare.astro'
 import MinimumNodeVersionCompare from '../../components/benchmarks/minimum-node-version/Compare.astro'
-import ClientSideRenderedCompare from '../../components/benchmarks/client-side-rendered-tests/Compare.astro'
-import ServerSideRenderedCompare from '../../components/benchmarks/server-side-rendered-tests/Compare.astro'
+import LighthouseClientSideRenderedCompare from '../../components/benchmarks/lighthouse-client-side-rendered-tests/Compare.astro'
+import LighthouseServerSideRenderedCompare from '../../components/benchmarks/lighthouse-server-side-rendered-tests/Compare.astro'
 import SSRThroughputCompare from '../../components/benchmarks/server-side-throughput-tests/Compare.astro'
 import SSRLoadStatsTable from '../../components/SSRLoadStatsTable.astro'
 import SSRLoadP99Charts from '../../components/SSRLoadP99Charts.astro'
@@ -83,13 +83,13 @@ import CoreWebVitalsResults from '../../components/benchmarks/core-web-vitals/Re
 
 <RunTimeSetup />
 
-### Client Side Rendered Tests
+### Client Side Rendered Tests (Lighthouse)
 
-<ClientSideRenderedCompare />
+<LighthouseClientSideRenderedCompare />
 
-### Server Side Rendered Tests
+### Server Side Rendered Tests (Lighthouse)
 
-<ServerSideRenderedCompare />
+<LighthouseServerSideRenderedCompare />
 
 ### Server Side Throughput Tests
 

packages/docs/src/content/docs/framework/astro.mdx

@@ -11,8 +11,8 @@ import BuildInstallDetails from '../../../components/benchmarks/build-and-instal
 import DevServerStartupDetails from '../../../components/benchmarks/dev-server-startup/Details.astro'
 import CoreJsDetails from '../../../components/benchmarks/core-js-polyfills/Details.astro'
 import BrowserBaselineDetails from '../../../components/benchmarks/browser-baseline/Details.astro'
-import ClientSideRenderedDetails from '../../../components/benchmarks/client-side-rendered-tests/Details.astro'
-import ServerSideRenderedDetails from '../../../components/benchmarks/server-side-rendered-tests/Details.astro'
+import LighthouseClientSideRenderedDetails from '../../../components/benchmarks/lighthouse-client-side-rendered-tests/Details.astro'
+import LighthouseServerSideRenderedDetails from '../../../components/benchmarks/lighthouse-server-side-rendered-tests/Details.astro'
 import SSRThroughputDetails from '../../../components/benchmarks/server-side-throughput-tests/Details.astro'
 import SSRLoadDetails from '../../../components/benchmarks/ssr-load-test/Details.astro'
 
@@ -60,13 +60,13 @@ export const astroRuntimeVersions = getRuntimeVersionStats('app-astro')
 
 <RunTimeSetup />
 
-### Client Side Rendered Tests
+### Client Side Rendered Tests (Lighthouse)
 
-<ClientSideRenderedDetails versions={astroRuntimeVersions} />
+<LighthouseClientSideRenderedDetails versions={astroRuntimeVersions} />
 
-### Server Side Rendered Tests
+### Server Side Rendered Tests (Lighthouse)
 
-<ServerSideRenderedDetails versions={astroRuntimeVersions} />
+<LighthouseServerSideRenderedDetails versions={astroRuntimeVersions} />
 
 ### Server Side Throughput Tests