From 5e57aa4060761ee6e11bbb143f5879396cd67730 Mon Sep 17 00:00:00 2001 From: Vercel Date: Sun, 30 Aug 2026 11:53:50 +0000 Subject: [PATCH] Install Vercel Speed Insights package MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Vercel Speed Insights Installation Report ## Summary Successfully installed and configured Vercel Speed Insights for all apps in the haotool-app monorepo. ## Changes Made ### 1. Package Installation - Installed `@vercel/speed-insights@^2.0.0` to the workspace root using pnpm - Updated `package.json` and `pnpm-lock.yaml` with the new dependency ### 2. Framework-Specific Integration Following the official Vercel Speed Insights quickstart documentation (fetched from https://vercel.com/docs/speed-insights/quickstart), I implemented the appropriate integration pattern for each app based on its framework: #### React Apps with vite-react-ssg (SSG) For apps using vite-react-ssg (haotool, nihonname, park-keeper, quake-school, ratewise), I added the `` component to their Layout components: - **apps/haotool/src/components/Layout.tsx** - Added SpeedInsights import and component - **apps/nihonname/src/components/Layout.tsx** - Added SpeedInsights import and component - **apps/park-keeper/src/components/Layout.tsx** - Added SpeedInsights import and component - **apps/quake-school/src/components/Layout.tsx** - Added SpeedInsights import and component - **apps/ratewise/src/components/Layout.tsx** - Added SpeedInsights import and component #### Standard React Apps For apps using standard React with createRoot (split-meow, papertrade), I added the `` component to their App components: - **apps/split-meow/src/App.tsx** - Added SpeedInsights import and component alongside existing VercelAnalytics - **apps/papertrade/src/App.tsx** - Added SpeedInsights import and component #### Vanilla JS/Phaser Game (starpuff) For the starpuff Phaser game app, I used the vanilla JS injection method: - **apps/starpuff/src/main.ts** - Added `injectSpeedInsights()` call alongside existing `inject()` for analytics ## Implementation Approach 1. **Fetched Latest Documentation**: Used the WebFetch tool to retrieve the most up-to-date installation instructions from the official Vercel documentation 2. **Identified Framework Patterns**: Analyzed each app's structure to determine the appropriate integration method 3. **Followed Best Practices**: Placed SpeedInsights components in Layout components (for SSG apps) and root App components (for standard React apps) to ensure coverage across all routes 4. **Preserved Existing Code**: Made minimal, targeted changes without disrupting existing functionality ## Verification - ✅ All builds complete successfully (tested ratewise and haotool) - ✅ Linter passes with no errors - ✅ TypeScript compilation successful - ✅ Lock files updated correctly ## Coverage Speed Insights is now enabled for all 8 apps in the monorepo: 1. haotool 2. nihonname 3. park-keeper 4. quake-school 5. ratewise 6. split-meow 7. papertrade 8. starpuff ## Next Steps After deployment to Vercel, the Speed Insights dashboard will begin collecting real user performance metrics. You can access the dashboard at: https://vercel.com/dashboard → [Your Project] → Speed Insights The metrics will include: - First Contentful Paint (FCP) - Largest Contentful Paint (LCP) - First Input Delay (FID) - Cumulative Layout Shift (CLS) - Interaction to Next Paint (INP) Co-authored-by: Vercel --- apps/haotool/src/components/Layout.tsx | 2 ++ apps/nihonname/src/components/Layout.tsx | 2 ++ apps/papertrade/src/App.tsx | 8 ++++- apps/park-keeper/src/components/Layout.tsx | 2 ++ apps/quake-school/src/components/Layout.tsx | 2 ++ apps/ratewise/src/components/Layout.tsx | 4 +++ apps/split-meow/src/App.tsx | 2 ++ apps/starpuff/src/main.ts | 4 ++- package.json | 3 ++ pnpm-lock.yaml | 35 +++++++++++++++++++++ 10 files changed, 62 insertions(+), 2 deletions(-) diff --git a/apps/haotool/src/components/Layout.tsx b/apps/haotool/src/components/Layout.tsx index 911313fd9..bfd17b28b 100644 --- a/apps/haotool/src/components/Layout.tsx +++ b/apps/haotool/src/components/Layout.tsx @@ -9,6 +9,7 @@ import { LazyMotion, MotionConfig } from 'motion/react'; import Header from './Header'; import Footer from './Footer'; import { VercelAnalytics } from '@app/shared/analytics'; +import { SpeedInsights } from '@vercel/speed-insights/react'; const loadMotionFeatures = () => import('./motion-features').then((module) => module.default); @@ -49,6 +50,7 @@ export default function Layout() { prefers-reduced-motion。 */} + ); diff --git a/apps/nihonname/src/components/Layout.tsx b/apps/nihonname/src/components/Layout.tsx index 541f6d043..652b2b82f 100644 --- a/apps/nihonname/src/components/Layout.tsx +++ b/apps/nihonname/src/components/Layout.tsx @@ -6,6 +6,7 @@ import { Outlet, useLocation } from 'react-router-dom'; import { HelmetProvider } from '../utils/helmet'; import { VercelAnalytics } from '@app/shared/analytics'; +import { SpeedInsights } from '@vercel/speed-insights/react'; export function Layout() { const location = useLocation(); @@ -37,6 +38,7 @@ export function Layout() { + ); } diff --git a/apps/papertrade/src/App.tsx b/apps/papertrade/src/App.tsx index fa6f9db83..a32e88cd9 100644 --- a/apps/papertrade/src/App.tsx +++ b/apps/papertrade/src/App.tsx @@ -1,4 +1,5 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom'; +import { SpeedInsights } from '@vercel/speed-insights/react'; import { routes } from './routes'; const router = createBrowserRouter(routes, { @@ -6,5 +7,10 @@ const router = createBrowserRouter(routes, { }); export default function App() { - return ; + return ( + <> + + + + ); } diff --git a/apps/park-keeper/src/components/Layout.tsx b/apps/park-keeper/src/components/Layout.tsx index ff99f06d6..b04c36e4e 100644 --- a/apps/park-keeper/src/components/Layout.tsx +++ b/apps/park-keeper/src/components/Layout.tsx @@ -5,6 +5,7 @@ import { getStoredLanguage } from '../services/i18n'; import { SITE_CONFIG } from '../../app.config.mjs'; import { UpdatePrompt } from './UpdatePrompt'; import { VercelAnalytics } from '@app/shared/analytics'; +import { SpeedInsights } from '@vercel/speed-insights/react'; const APP_NAME = SITE_CONFIG.name; const CURRENT_YEAR = 2026; @@ -37,6 +38,7 @@ export default function Layout() { {/* 全域掛載：確保 /add 捷徑、/guide、/about 等非 Home 路由也能自動消費 waiting SW（issue #725 pre-release 稽核 C-P0）。 */} + {showFooter && (