CWV Stats for Mobile

packages/docs/src/components/CoreWebVitalChart.astro

@@ -1,13 +1,14 @@
 ---
-import { getCWVDesktopStatsChartData } from '../lib/collections'
-import type { CWV } from '../lib/collections'
+import { getCWVStatsChartData } from '../lib/collections'
+import type { CWV, Device } from '../lib/collections'
 import ComparisonBarChart from './ComparisonBarChart.astro'
 
 interface Props {
   cwv: CWV
+  device: Device
 }
 
-const { cwv } = Astro.props
+const { cwv, device } = Astro.props
 
 const cwvTitle: Record<CWV, string> = {
   lcp: 'Good Largest Contentful Paint',
@@ -29,7 +30,7 @@ const cwvDescription: Record<CWV, string> = {
 <ComparisonBarChart
   title={cwvTitle[cwv]}
   description={cwvDescription[cwv]}
-  data={getCWVDesktopStatsChartData(cwv)}
+  data={getCWVStatsChartData(cwv, device)}
   valueFormat="count"
   yAxisLabel="%"
 />

packages/docs/src/components/CoreWebVitalsCharts.astro

@@ -1,20 +1,32 @@
 ---
 import ChartTabs from './ChartTabs.astro'
 import CoreWebVitalChart from './CoreWebVitalChart.astro'
+import type { Device } from '../lib/collections'
+
+interface Props {
+  device: Device
+}
+
+const { device } = Astro.props
+
+const deviceLabel: Record<Device, string> = {
+  desktop: 'Core Web Vitals Desktop',
+  mobile: 'Core Web Vitals Mobile',
+}
 ---
 
 <ChartTabs
-  sectionId="client-side-rendered"
-  label="Core Web Vitals Desktop"
+  sectionId="core-web-vitals"
+  label={deviceLabel[device]}
   tab1Label="LCP"
   tab2Label="CLS"
   tab3Label="FCP"
   tab4Label="TTFB"
   tab5Label="INP"
 >
-  <CoreWebVitalChart slot="panel-1" cwv="lcp" />
-  <CoreWebVitalChart slot="panel-2" cwv="cls" />
-  <CoreWebVitalChart slot="panel-3" cwv="fcp" />
-  <CoreWebVitalChart slot="panel-4" cwv="ttfb" />
-  <CoreWebVitalChart slot="panel-5" cwv="inp" />
+  <CoreWebVitalChart slot="panel-1" cwv="lcp" device={device} />
+  <CoreWebVitalChart slot="panel-2" cwv="cls" device={device} />
+  <CoreWebVitalChart slot="panel-3" cwv="fcp" device={device} />
+  <CoreWebVitalChart slot="panel-4" cwv="ttfb" device={device} />
+  <CoreWebVitalChart slot="panel-5" cwv="inp" device={device} />
 </ChartTabs>

packages/docs/src/components/CoreWebVitalsTable.astro

@@ -2,6 +2,13 @@
 import { cwvStats } from '../lib/collections'
 import { getFrameworkSlug } from '../lib/utils'
 import StatsTable from './StatsTable.astro'
+import type { Device } from '../lib/collections'
+
+interface Props {
+  device: Device
+}
+
+const { device } = Astro.props
 
 const columns = [
   {
@@ -11,12 +18,16 @@ const columns = [
     href: (row: Record<string, unknown>) =>
       `/framework/${getFrameworkSlug(row.id as string)}`,
   },
-  { key: 'lcpDesktopPercent', header: 'LCP%' },
-  { key: 'clsDesktopPercent', header: 'CLS%' },
-  { key: 'fcpDesktopPercent', header: 'FCP%' },
-  { key: 'ttfbDesktopPercent', header: 'TTFB%' },
-  { key: 'inpDesktopPercent', header: 'INP%' },
+  { key: 'lcpPercent', header: 'LCP%' },
+  { key: 'clsPercent', header: 'CLS%' },
+  { key: 'fcpPercent', header: 'FCP%' },
+  { key: 'ttfbPercent', header: 'TTFB%' },
+  { key: 'inpPercent', header: 'INP%' },
 ]
 ---
 
-<StatsTable label="CWV by framework" columns={columns} data={cwvStats} />
+<StatsTable
+  label="CWV by framework"
+  columns={columns}
+  data={cwvStats(device)}
+/>

packages/docs/src/lib/collections.ts

@@ -5,33 +5,31 @@ const devtimeEntries = await getCollection('devtime')
 export const runtimeEntries = await getCollection('runtime')
 const cwvEntries = await getCollection('cwv')
 
-export const cwvStats = cwvEntries
-  .map((entry) => entry.data)
-  .sort((a, b) => b.overall.desktop - a.overall.desktop)
-  .map((stat) => ({
-    id: stat.id,
-    framework: stat.framework,
-    isFocused: true,
-    lcpDesktopPercent: Math.floor(stat.lcp.desktop * 100),
-    lcpMobilePercent: Math.floor(stat.lcp.mobile * 100),
-    clsDesktopPercent: Math.floor(stat.cls.desktop * 100),
-    clsMobilePercent: Math.floor(stat.cls.mobile * 100),
-    fcpDesktopPercent: Math.floor(stat.fcp.desktop * 100),
-    fcpMobilePercent: Math.floor(stat.fcp.mobile * 100),
-    ttfbDesktopPercent: Math.floor(stat.ttfb.desktop * 100),
-    ttfbMobilePercent: Math.floor(stat.ttfb.mobile * 100),
-    inpDesktopPercent: Math.floor(stat.inp.desktop * 100),
-    inpMobilePercent: Math.floor(stat.inp.mobile * 100),
-  }))
+export type Device = 'desktop' | 'mobile'
+
+export const cwvStats = (device: Device) =>
+  cwvEntries
+    .map(({ data }) => ({
+      id: data.id,
+      framework: data.framework,
+      isFocused: true,
+      overallPercent: Math.floor(data.overall[device] * 100),
+      lcpPercent: Math.floor(data.lcp[device] * 100),
+      clsPercent: Math.floor(data.cls[device] * 100),
+      fcpPercent: Math.floor(data.fcp[device] * 100),
+      ttfbPercent: Math.floor(data.ttfb[device] * 100),
+      inpPercent: Math.floor(data.inp[device] * 100),
+    }))
+    .sort((a, b) => b.overallPercent - a.overallPercent)
 
 export type CWV = 'lcp' | 'cls' | 'fcp' | 'ttfb' | 'inp'
 
-export function getCWVDesktopStatsChartData(cwv: CWV) {
-  return cwvStats
-    .sort((a, b) => b[`${cwv}DesktopPercent`] - a[`${cwv}DesktopPercent`])
+export function getCWVStatsChartData(cwv: CWV, device: Device) {
+  return cwvStats(device)
+    .sort((a, b) => b[`${cwv}Percent`] - a[`${cwv}Percent`])
     .map((stat) => ({
       name: stat.framework,
-      value: stat[`${cwv}DesktopPercent`],
+      value: stat[`${cwv}Percent`],
       focused: true,
     }))
 }

packages/docs/src/pages/methodology.astro

@@ -304,19 +304,19 @@ import Layout from '../layouts/Layout.astro'
     </ul>
   </section>
 
-  <section id="core-web-vitals-desktop">
-    <h3>Core Web Vitals Desktop</h3>
+  <section id="core-web-vitals">
+    <h3>Core Web Vitals</h3>
     <ul>
       <li>
-        Core Web Vitals desktop metrics are sourced from <a
+        Core Web Vital metrics are sourced from <a
           href="https://httparchive.org/reports/techreport/tech"
           target="_blank"
           rel="noopener noreferrer">HTTP Archive</a
         > technology reports.
       </li>
       <li>
-        The docs publish framework-level desktop percentages from the latest
-        collected HTTP Archive snapshot in the repository.
+        The docs publish framework-level desktop and mobile percentages from the
+        latest collected HTTP Archive snapshot in the repository.
       </li>
       <li>Metrics refresh monthly when new HTTP Archive data is collected.</li>
     </ul>

packages/docs/src/pages/run-time.astro

@@ -48,11 +48,11 @@ import DetailsLink from '../components/DetailsLink.astro'
   <h3>P90 Latency</h3>
   <SSRLoadP90Charts />
   <SSRLoadStatsTable />
-  <h2 id="core-web-vitals-desktop">Core Web Vitals Desktop</h2>
-  <DetailsLink
-    href="/methodology#core-web-vitals-desktop"
-    label="Core Web Vitals Desktop"
-  />
-  <CoreWebVitalsCharts />
-  <CoreWebVitalsTable />
+  <h3>CWV Desktop</h3>
+  <CoreWebVitalsCharts device="desktop" />
+  <CoreWebVitalsTable device="desktop" />
+  <h3>CWV Mobile</h3>
+  <CoreWebVitalsCharts device="mobile" />
+  <CoreWebVitalsTable device="mobile" />
+  <DetailsLink href="/methodology#core-web-vitals" label="Core Web Vitals" />
 </Layout>