From d2d4bd2f6923c5d867b35a759054cdcaac3d32ba Mon Sep 17 00:00:00 2001 From: Vercel Date: Tue, 5 May 2026 15:59:50 +0000 Subject: [PATCH] Install Vercel Speed Insights MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implemented Vercel Speed Insights for github-readme-stats project ## Summary Successfully installed and configured Vercel Speed Insights (@vercel/speed-insights v2.0.0) for this project following the latest official documentation from Vercel. ## Implementation Details ### Project Type Analysis This is a Vercel serverless API project that generates SVG images for GitHub READMEs. It does not have a traditional frontend framework (no Next.js, React app, etc.). The API endpoints serve SVG content, not HTML pages. ### Changes Made 1. **Installed @vercel/speed-insights package** - Added as a dependency in package.json - Updated package-lock.json accordingly - Version: ^2.0.0 2. **Created HTML Landing Page** (`public/index.html`) - Simple informational page about the API service - Lists available endpoints - Includes Speed Insights integration using ESM import from CDN - Uses `injectSpeedInsights()` function as per Vercel documentation 3. **Updated Express.js Server** (`express.js`) - Added static file serving from `public` directory - Imported necessary path utilities for ES modules (__dirname equivalent) - Allows HTML landing page to be served during local development 4. **Created Speed Insights Module** (`src/speed-insights.js`) - Utility module for Speed Insights configuration - Includes documentation about Web Vitals metrics - Provides initialization function for potential future use 5. **Added Documentation** (`SPEED_INSIGHTS.md`) - Comprehensive setup and usage guide - Explains implementation approach for this API project - Details about Web Vitals metrics tracked - Instructions for enabling in Vercel dashboard ## Testing & Verification ✅ All tests pass (npm test) ✅ Linter passes with no errors (npm run lint) ✅ Express server starts successfully ✅ Package dependencies updated correctly ✅ No breaking changes to existing functionality ## Important Notes - This is an API service that primarily serves SVG images, not HTML pages - Speed Insights is most beneficial for HTML pages with user interactions - The root path (/) currently redirects to GitHub (per vercel.json) - To enable Speed Insights in production, activate it in the Vercel dashboard - The HTML landing page is available for local development at http://localhost:9000/ - API endpoints continue to function normally at /api/* ## Files Modified/Created Modified: - express.js - Added static file serving - package.json - Added @vercel/speed-insights dependency - package-lock.json - Updated with new dependency Created: - public/index.html - Landing page with Speed Insights - src/speed-insights.js - Speed Insights utility module - SPEED_INSIGHTS.md - Setup documentation ## Next Steps for Production 1. Enable Speed Insights in your Vercel project dashboard 2. Deploy the changes to Vercel 3. (Optional) Modify vercel.json redirect if you want to serve the HTML landing page at root 4. Access metrics in the Vercel dashboard after deployment All changes preserve existing code structure and maintain backward compatibility with the API functionality. Co-authored-by: Vercel --- SPEED_INSIGHTS.md | 89 +++++++++++++++++++++++++++++++++++++++++++ express.js | 8 ++++ package-lock.json | 63 +++++++++++++++++++++--------- package.json | 1 + public/index.html | 88 ++++++++++++++++++++++++++++++++++++++++++ src/speed-insights.js | 37 ++++++++++++++++++ 6 files changed, 268 insertions(+), 18 deletions(-) create mode 100644 SPEED_INSIGHTS.md create mode 100644 public/index.html create mode 100644 src/speed-insights.js diff --git a/SPEED_INSIGHTS.md b/SPEED_INSIGHTS.md new file mode 100644 index 0000000000000..894b8ef520426 --- /dev/null +++ b/SPEED_INSIGHTS.md @@ -0,0 +1,89 @@ +# Vercel Speed Insights Configuration + +This project has been configured with [Vercel Speed Insights](https://vercel.com/docs/speed-insights) to track Web Vitals and performance metrics. + +## Overview + +Since this is primarily an API service that generates SVG images for GitHub READMEs, the Speed Insights integration is configured for potential HTML endpoints rather than the API endpoints themselves. + +## What's Installed + +- **Package**: `@vercel/speed-insights` (v2.0.0) +- **Location**: Added as a dependency in `package.json` + +## Implementation + +### 1. HTML Landing Page (`public/index.html`) + +A simple HTML landing page has been created that includes Speed Insights tracking. This page: +- Provides information about the API service +- Lists available endpoints +- Includes the Speed Insights script using ESM import from CDN + +```javascript +import { injectSpeedInsights } from 'https://esm.sh/@vercel/speed-insights'; +injectSpeedInsights(); +``` + +### 2. Express.js Server (`express.js`) + +The local development server has been updated to: +- Serve static files from the `public` directory +- Allow access to the HTML landing page when running locally + +### 3. Speed Insights Module (`src/speed-insights.js`) + +A utility module has been created for reference and future extensibility. + +## How to Use + +### Local Development + +1. Start the server: + ```bash + node express.js + ``` + +2. Visit `http://localhost:9000/` to see the landing page with Speed Insights + +3. The API endpoints continue to work at: + - `http://localhost:9000/api` + - `http://localhost:9000/api/pin` + - `http://localhost:9000/api/top-langs` + - etc. + +### Production on Vercel + +1. **Enable Speed Insights in Vercel Dashboard**: + - Go to your project settings on Vercel + - Navigate to the "Speed Insights" tab + - Click "Enable" to activate Speed Insights + +2. **Deploy**: + - Push your changes to the repository + - Vercel will automatically deploy with Speed Insights enabled + +3. **View Metrics**: + - After deployment and user visits, access metrics in the Vercel dashboard under "Speed Insights" + +## Web Vitals Tracked + +Speed Insights automatically tracks the following metrics: + +- **LCP** (Largest Contentful Paint): Loading performance +- **FID** (First Input Delay): Interactivity +- **CLS** (Cumulative Layout Shift): Visual stability +- **FCP** (First Contentful Paint): Initial render +- **TTFB** (Time to First Byte): Server response time +- **INP** (Interaction to Next Paint): Responsiveness + +## Notes + +- The current `vercel.json` configuration redirects the root path (`/`) to the GitHub repository +- If you want to serve the HTML landing page in production, you would need to modify the redirect in `vercel.json` +- Speed Insights is most useful for HTML pages with user interactions, not for API endpoints that serve SVG images +- The API endpoints (`/api/*`) are serverless functions and don't directly benefit from client-side Speed Insights tracking + +## Further Configuration + +For advanced configuration options, refer to the [Vercel Speed Insights documentation](https://vercel.com/docs/speed-insights). diff --git a/express.js b/express.js index 92a7fb1673908..e5eb6febfb97f 100644 --- a/express.js +++ b/express.js @@ -5,10 +5,18 @@ import langCard from "./api/top-langs.js"; import wakatimeCard from "./api/wakatime.js"; import gistCard from "./api/gist.js"; import express from "express"; +import { fileURLToPath } from "url"; +import { dirname, join } from "path"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = dirname(__filename); const app = express(); const router = express.Router(); +// Serve static files from public directory +app.use(express.static(join(__dirname, "public"))); + router.get("/", statsCard); router.get("/pin", repoCard); router.get("/top-langs", langCard); diff --git a/package-lock.json b/package-lock.json index a12246692d8fd..48384bbdcbf6a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "license": "MIT", "dependencies": { + "@vercel/speed-insights": "^2.0.0", "axios": "^1.13.1", "dotenv": "^17.2.3", "emoji-name-map": "^2.0.3", @@ -2173,6 +2174,44 @@ "integrity": "sha512-dCTxxolI6fu28lzNRVwd7CzJV8EbARITFyCbP/JqLHYLfWHY7GJqXHDdk0GbtfXvsZosPCvjOE4dOIMT4XDFZQ==", "dev": true }, + "node_modules/@vercel/speed-insights": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@vercel/speed-insights/-/speed-insights-2.0.0.tgz", + "integrity": "sha512-jwkNcrTeafWxjmWq4AHBaptSqZiJkYU5adLC9QBSqeim0GcqDMgN5Ievh8OG1rJ6W3A4l1oiP7qr9CWxGuzu3w==", + "license": "Apache-2.0", + "peerDependencies": { + "@sveltejs/kit": "^1 || ^2", + "next": ">= 13", + "nuxt": ">= 3", + "react": "^18 || ^19 || ^19.0.0-rc", + "svelte": ">= 4", + "vue": "^3", + "vue-router": "^4" + }, + "peerDependenciesMeta": { + "@sveltejs/kit": { + "optional": true + }, + "next": { + "optional": true + }, + "nuxt": { + "optional": true + }, + "react": { + "optional": true + }, + "svelte": { + "optional": true + }, + "vue": { + "optional": true + }, + "vue-router": { + "optional": true + } + } + }, "node_modules/accepts": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz", @@ -3421,18 +3460,6 @@ "url": "https://opencollective.com/eslint" } }, - "node_modules/eslint/node_modules/@eslint/js": { - "version": "9.39.1", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.1.tgz", - "integrity": "sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==", - "dev": true, - "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" - }, - "funding": { - "url": "https://eslint.org/donate" - } - }, "node_modules/eslint/node_modules/escape-string-regexp": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", @@ -9427,6 +9454,12 @@ "integrity": "sha512-dCTxxolI6fu28lzNRVwd7CzJV8EbARITFyCbP/JqLHYLfWHY7GJqXHDdk0GbtfXvsZosPCvjOE4dOIMT4XDFZQ==", "dev": true }, + "@vercel/speed-insights": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@vercel/speed-insights/-/speed-insights-2.0.0.tgz", + "integrity": "sha512-jwkNcrTeafWxjmWq4AHBaptSqZiJkYU5adLC9QBSqeim0GcqDMgN5Ievh8OG1rJ6W3A4l1oiP7qr9CWxGuzu3w==", + "requires": {} + }, "accepts": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz", @@ -10250,12 +10283,6 @@ "optionator": "^0.9.3" }, "dependencies": { - "@eslint/js": { - "version": "9.39.1", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.1.tgz", - "integrity": "sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==", - "dev": true - }, "escape-string-regexp": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", diff --git a/package.json b/package.json index dac23de7a7852..a4ac901097858 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "prettier": "^3.7.3" }, "dependencies": { + "@vercel/speed-insights": "^2.0.0", "axios": "^1.13.1", "dotenv": "^17.2.3", "emoji-name-map": "^2.0.3", diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000000000..0ac1f55817b77 --- /dev/null +++ b/public/index.html @@ -0,0 +1,88 @@ + + + + + + GitHub Readme Stats - API + + + +

GitHub Readme Stats API

+ +
+

Welcome!

+

+ This is the API service for generating dynamic GitHub stats cards. The + API serves SVG images that can be embedded in your GitHub README files. +

+
+ +
+

Available Endpoints

+
    +
  • /api - GitHub stats card
    • +
  • /api/pin - Repository card
    • +
  • /api/top-langs - Top languages card
    • +
  • /api/wakatime - WakaTime stats card
    • +
  • /api/gist - Gist card
    • +
+
+ +
+

Documentation

+

For complete documentation and usage instructions, please visit:

+

+ github.com/anuraghazra/github-readme-stats +

+
+ + + + + diff --git a/src/speed-insights.js b/src/speed-insights.js new file mode 100644 index 0000000000000..693c60668f8c7 --- /dev/null +++ b/src/speed-insights.js @@ -0,0 +1,37 @@ +// @ts-check + +/** + * Speed Insights configuration and utilities + * + * This module provides Web Vitals tracking for the application. + * Since this is primarily an API service that serves SVG images, + * Speed Insights is configured for potential HTML endpoints. + * + * For production deployment on Vercel, ensure Speed Insights is + * enabled in your Vercel dashboard for the project. + */ + +/** + * Initialize Speed Insights tracking + * This is a placeholder for any backend tracking needs. + * The actual client-side tracking is handled via the HTML page. + */ +export const initSpeedInsights = () => { + // Speed Insights is primarily a client-side tool + // For this API project, tracking is handled in public/index.html + // via the injectSpeedInsights() function from @vercel/speed-insights + + if (process.env.NODE_ENV === "production") { + console.log("Speed Insights: Enabled for client-side tracking"); + } +}; + +/** + * Web Vitals metrics that Speed Insights tracks: + * - LCP (Largest Contentful Paint) + * - FID (First Input Delay) + * - CLS (Cumulative Layout Shift) + * - FCP (First Contentful Paint) + * - TTFB (Time to First Byte) + * - INP (Interaction to Next Paint) + */