Install and configure Vercel Speed Insights

[vercel]

Vercel Speed Insights Integration

Successfully implemented Vercel Speed Insights for the connectedhomeip documentation site.

Overview

This project is a Sphinx-based documentation site for the Matter (formerly Project CHIP) IoT framework. The site already had Vercel Web Analytics integrated, and this implementation adds Vercel Speed Insights to monitor real-time performance metrics.

Implementation Approach

Since this is a Sphinx documentation site (Python-based static site generator) without a Node.js framework or package.json, I used the vanilla JavaScript approach as specified in the Vercel Speed Insights documentation for non-framework projects.

Changes Made

1. Created Speed Insights JavaScript Integration

File: docs/_static/js/vercel-speed-insights.js

• Created a custom JavaScript file that loads the Vercel Speed Insights script
• Follows the same pattern as the existing vercel-analytics.js file
• Implements graceful degradation for local development environments
• Loads the script from /_vercel/speed-insights/script.js as per Vercel documentation

2. Updated Sphinx Configuration

File: docs/conf.py

• Added js/vercel-speed-insights.js to the html_js_files configuration array
• This ensures the Speed Insights script is included in all generated HTML pages
• Updated the section comment to reflect both Analytics and Speed Insights

3. Created Documentation

File: docs/VERCEL_SPEED_INSIGHTS.md

• Comprehensive documentation explaining what Speed Insights is and how it works
• Step-by-step instructions for enabling Speed Insights in the Vercel dashboard
• Verification steps for confirming the integration works
• Information about the performance metrics being tracked (FCP, LCP, CLS, FID, TTFB)
• Clarification about the relationship between Web Analytics and Speed Insights

Technical Details

The implementation follows the Vercel documentation's recommendation for vanilla HTML/JavaScript projects:

1. The script is loaded with defer attribute for optimal page performance
2. Error handling ensures the site works in local development without Vercel
3. The script will only function when deployed on Vercel with Speed Insights enabled

How to Enable

After deployment to Vercel:

1. Go to the Vercel project dashboard
2. Navigate to the "Speed Insights" tab
3. Click "Enable"
4. The next deployment will start collecting performance metrics

What Gets Tracked

Once enabled, Speed Insights will monitor:

• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• Cumulative Layout Shift (CLS)
• First Input Delay (FID)
• Time to First Byte (TTFB)

These Core Web Vitals provide insight into real user performance and help identify optimization opportunities.

Validation

• ✅ Configuration file syntax validated with python3 -m py_compile
• ✅ JavaScript files created in proper location (docs/_static/js/)
• ✅ Configuration properly references the new script file
• ✅ Documentation follows existing project patterns
• ✅ Implementation matches official Vercel Speed Insights quickstart guide

No Package Dependencies

Since this is a Sphinx/Python documentation site without a Node.js framework:

• No npm/yarn/pnpm packages were needed
• No package.json modifications
• No lockfile updates required
• Pure JavaScript integration using Vercel's CDN-hosted script

Compatibility

This implementation is compatible with:

• The existing Vercel Web Analytics integration
• The Sphinx documentation build system
• All browsers that support modern JavaScript
• Both local development and production deployment environments

---

View Project · Speed Insights

Created by mrkingswingdaddy-2420 with Vercel Agent

[Sum1cares]

awesome

[Sum1cares]

awesome

[Copilot]

Pull request overview

Note

Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a copilot-code-review.yml file specifying one with the runs-on attribute. See the docs for more details.

Adds client-side Vercel Speed Insights (and Web Analytics) scripts to the Sphinx docs site, along with documentation and various repo maintenance updates (deps, workflows, submodules).

Changes:

• Add Vercel Speed Insights + Web Analytics JS injection via Sphinx html_js_files, plus docs describing setup/verification.
• Update several dependencies (docs and Docker image requirements) and bump multiple submodule SHAs.
• Add repo meta/docs (Makefile, changelog, project config, syntax report) and adjust CI/workflows.

Reviewed changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
third_party/simw-top-mini/repo	Bumps submodule commit SHA.
third_party/openthread/repo	Bumps submodule commit SHA.
third_party/libdatachannel/repo	Bumps submodule commit SHA.
third_party/cirque/repo	Bumps submodule commit SHA.
integrations/docker/run.sh	Improves help text for docker runner.
integrations/docker/images/stage-2/chip-build-cirque/requirements_nogrpc.txt	Updates Flask pin for Cirque Docker image requirements.
integrations/docker/images/base/chip-build/version	Bumps Docker image version metadata for the Flask update.
docs/requirements.txt	Updates doc build dependencies (myst-parser, breathe).
docs/conf.py	Injects analytics + speed insights JS into Sphinx output.
docs/_static/js/vercel-speed-insights.js	Adds Speed Insights loader script.
docs/_static/js/vercel-analytics.js	Adds Web Analytics loader script.
docs/VERCEL_SPEED_INSIGHTS.md	Documents Speed Insights usage and enablement steps.
docs/VERCEL_ANALYTICS.md	Documents Web Analytics usage and enablement steps.
config/project.yaml	Adds fork-level project configuration metadata.
SYNTAX_CHECK_REPORT.md	Adds a repository syntax-check report doc.
README.md	Adds changelog link.
Makefile	Adds convenience developer targets (build/test/lint/etc.).
CHANGELOG.md	Adds an initial changelog entry for the fork.
.github/workflows/kotlin-style.yaml	Bumps detekt action version.
.github/workflows/docker-image.yml	Adds a Docker build workflow.
.github/workflows/check-data-model-directory-updates.yaml	Adjusts Python build flags; adds a 1.5.1 data_model check.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Fixed in the latest commit — branch filters now include both "main" and "master" for both push and pull_request triggers.

[Copilot]

Fixed in the latest commit — changed to globals().get("html_js_files", []) + [...] so existing entries are preserved rather than overwritten.