Tags: Dargon789/uniswap.app
Tags
Add Vercel Speed Insights to Next.js (#94) # Vercel Speed Insights Implementation Report ## Summary Successfully installed and configured Vercel Speed Insights for the Uniswap web application. ## Important Note This project is a **React application using Create React App**, not a Next.js application. The implementation uses the React variant of Vercel Speed Insights (`@vercel/speed-insights/react`) as per the official documentation for non-Next.js React applications. ## Changes Made ### 1. Package Installation - **File Modified**: `apps/web/package.json` - **Action**: Added `@vercel/speed-insights` version 1.3.1 as a dependency - **Command Used**: `yarn workspace @uniswap/interface add @vercel/speed-insights` ### 2. SpeedInsights Component Integration - **File Modified**: `apps/web/src/index.tsx` - **Changes**: - Added import statement: `import { SpeedInsights } from '@vercel/speed-insights/react'` - Added `<SpeedInsights />` component to the render tree, placed after the `<App />` component and before the closing `</PortalProvider>` tag - This placement ensures Speed Insights tracks all routes and pages in the application ### 3. Lock File Update - **File Modified**: `yarn.lock` - **Action**: Updated with new dependency resolution for `@vercel/[email protected]` ## Implementation Details The SpeedInsights component was added to the main application entry point (`apps/web/src/index.tsx`) within the component tree hierarchy: ``` <PortalProvider> <ThemedGlobalStyle /> <App /> <SpeedInsights /> // ← Added here </PortalProvider> ``` This placement ensures that: 1. Speed Insights is initialized once when the app loads 2. It can track all route changes and page views throughout the application 3. It's rendered within the React tree but doesn't interfere with the main application logic ## Verification The implementation follows the official Vercel Speed Insights documentation for React applications: - Uses `@vercel/speed-insights/react` import path (correct for non-Next.js React apps) - Component is added to the root-level render tree - No additional configuration is required for basic functionality ## Next Steps When deployed to Vercel: 1. Speed Insights will automatically start collecting performance metrics 2. Data will be visible in the Vercel Dashboard under the Speed Insights tab 3. Real User Monitoring (RUM) data will provide insights into actual user experience 4. Core Web Vitals (LCP, FID, CLS) will be tracked automatically ## Files Modified - `apps/web/package.json` - Added dependency - `apps/web/src/index.tsx` - Imported and rendered SpeedInsights component - `yarn.lock` - Updated dependency lockfile Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
PreviousNext