fix(ui): reduce cls to 0 on package page (#1304)

Author: danielroe

.lighthouserc.cjs

@@ -35,14 +35,18 @@ module.exports = {
       chromePath: findChrome(),
       puppeteerScript: './lighthouse-setup.cjs',
       settings: {
-        onlyCategories: ['accessibility'],
+        onlyCategories: process.env.LH_PERF ? ['performance'] : ['accessibility'],
         skipAudits: ['valid-source-maps'],
       },
     },
     assert: {
-      assertions: {
-        'categories:accessibility': ['error', { minScore: 1 }],
-      },
+      assertions: process.env.LH_PERF
+        ? {
+            'cumulative-layout-shift': ['error', { maxNumericValue: 0 }],
+          }
+        : {
+            'categories:accessibility': ['error', { minScore: 1 }],
+          },
     },
     upload: {
       target: 'temporary-public-storage',

CONTRIBUTING.md

@@ -54,6 +54,7 @@ This focus helps guide our project decisions as a community and what we choose t
   - [Unit tests](#unit-tests)
   - [Component accessibility tests](#component-accessibility-tests)
   - [Lighthouse accessibility tests](#lighthouse-accessibility-tests)
+  - [Lighthouse performance tests](#lighthouse-performance-tests)
   - [End to end tests](#end-to-end-tests)
   - [Test fixtures (mocking external APIs)](#test-fixtures-mocking-external-apis)
 - [Submitting changes](#submitting-changes)
@@ -114,6 +115,7 @@ pnpm test:unit        # Unit tests only
 pnpm test:nuxt        # Nuxt component tests
 pnpm test:browser     # Playwright E2E tests
 pnpm test:a11y        # Lighthouse accessibility audits
+pnpm test:perf        # Lighthouse performance audits (CLS)
 ```
 
 ### Project structure
@@ -641,18 +643,38 @@ pnpm test:a11y:prebuilt
 
 # Or run a single color mode manually
 pnpm build:test
-LIGHTHOUSE_COLOR_MODE=dark ./scripts/lighthouse-a11y.sh
+LIGHTHOUSE_COLOR_MODE=dark ./scripts/lighthouse.sh
 ```
 
 This requires Chrome or Chromium to be installed. The script will auto-detect common installation paths. Results are printed to the terminal and saved in `.lighthouseci/`.
 
 #### Configuration
 
-| File                         | Purpose                                                   |
-| ---------------------------- | --------------------------------------------------------- |
-| `.lighthouserc.cjs`          | Lighthouse CI config (URLs, assertions, Chrome path)      |
-| `lighthouse-setup.cjs`       | Puppeteer script for color mode + client-side API mocking |
-| `scripts/lighthouse-a11y.sh` | Shell wrapper that runs the audit for a given color mode  |
+| File                    | Purpose                                                   |
+| ----------------------- | --------------------------------------------------------- |
+| `.lighthouserc.cjs`     | Lighthouse CI config (URLs, assertions, Chrome path)      |
+| `lighthouse-setup.cjs`  | Puppeteer script for color mode + client-side API mocking |
+| `scripts/lighthouse.sh` | Shell wrapper that runs the audit for a given color mode  |
+
+### Lighthouse performance tests
+
+The project also runs Lighthouse performance audits to enforce zero Cumulative Layout Shift (CLS). These run separately from the accessibility audits and test the same set of URLs.
+
+#### How it works
+
+The same `.lighthouserc.cjs` config is shared between accessibility and performance audits. When the `LH_PERF` environment variable is set, the config switches from the `accessibility` category to the `performance` category and asserts that CLS is exactly 0.
+
+#### Running locally
+
+```bash
+# Build + run performance audit
+pnpm test:perf
+
+# Or against an existing test build
+pnpm test:perf:prebuilt
+```
+
+Unlike the accessibility audits, performance audits do not run in separate light/dark modes.
 
 ### End to end tests
 

app/components/Package/WeeklyDownloadStats.vue

@@ -228,6 +228,7 @@ const config = computed(() => {
         >
           <span class="sr-only">{{ $t('package.downloads.analyze') }}</span>
         </ButtonBase>
+        <span v-else-if="isLoadingWeeklyDownloads" class="min-w-6 min-h-6 -m-1 p-1" />
       </template>
 
       <div class="w-full overflow-hidden">
@@ -240,26 +241,21 @@ const config = computed(() => {
               </template>
             </VueUiSparkline>
             <template #fallback>
-              <!-- Skeleton matching sparkline layout: title row + chart with data label -->
-              <div class="min-h-[75.195px]">
-                <!-- Title row: date range (24px height) -->
+              <!-- Skeleton matching VueUiSparkline layout (title 24px + SVG aspect 500:80) -->
+              <div class="max-w-xs">
+                <!-- Title row: fontSize * 2 = 24px -->
                 <div class="h-6 flex items-center ps-3">
                   <SkeletonInline class="h-3 w-36" />
                 </div>
-                <!-- Chart area: data label left, sparkline right -->
+                <!-- Chart area: matches SVG viewBox 500:80 -->
                 <div class="aspect-[500/80] flex items-center">
-                  <!-- Data label (covers ~42% width) -->
+                  <!-- Data label (covers ~42% width, matching dataLabel.offsetX) -->
                   <div class="w-[42%] flex items-center ps-0.5">
                     <SkeletonInline class="h-7 w-24" />
                   </div>
-                  <!-- Sparkline area (~58% width) -->
-                  <div class="flex-1 flex items-end gap-0.5 h-4/5 pe-3">
-                    <SkeletonInline
-                      v-for="i in 16"
-                      :key="i"
-                      class="flex-1 rounded-sm"
-                      :style="{ height: `${25 + ((i * 7) % 50)}%` }"
-                    />
+                  <!-- Sparkline line placeholder -->
+                  <div class="flex-1 flex items-end pe-3">
+                    <SkeletonInline class="h-px w-full" />
                   </div>
                 </div>
               </div>

app/pages/about.vue

@@ -2,14 +2,6 @@
 const router = useRouter()
 const canGoBack = useCanGoBack()
 
-interface GitHubContributor {
-  login: string
-  id: number
-  avatar_url: string
-  html_url: string
-  contributions: number
-}
-
 useSeoMeta({
   title: () => `${$t('about.title')} - npmx`,
   ogTitle: () => `${$t('about.title')} - npmx`,
@@ -34,12 +26,7 @@ const pmLinks = {
   vlt: 'https://www.vlt.sh/',
 }
 
-const { data: contributors, status: contributorsStatus } = useFetch<GitHubContributor[]>(
-  '/api/contributors',
-  {
-    lazy: true,
-  },
-)
+const { data: contributors, status: contributorsStatus } = useLazyFetch('/api/contributors')
 </script>
 
 <template>