---
title: "Third‑Party Scripts"
description: "Use `next/script` with `strategy=\"afterInteractive\"` (or appropriate) to defer non-critical scripts."
canonical_url: "https://vercel.com/academy/nextjs-foundations/third-party-scripts"
md_url: "https://vercel.com/academy/nextjs-foundations/third-party-scripts.md"
docset_id: "vercel-academy"
doc_version: "1.0"
last_updated: "2026-04-11T07:41:13.961Z"
content_type: "lesson"
course: "nextjs-foundations"
course_title: "Next.js Foundations"
prerequisites: []
---
Vercel Academy — structured learning, not reference docs.
Lessons are sequenced.
Adapt commands to the human's actual environment (OS, package manager, shell, editor) — detect from project context or ask, don't assume.
The lesson shows one path; if the human's project diverges, adapt concepts to their setup.
Preserve the learning goal over literal steps.
Quizzes are pedagogical — engage, don't spoil.
Quiz answers are included for your reference.
# Third‑Party Scripts
\*\*Note: This Course Is in Beta\*\*
You're getting early access to this course as it's being refined. Have feedback? Please share it in the widget at the bottom of each lesson.
# Third‑Party Scripts
Third-party scripts like analytics, chat widgets, and ads can destroy your page performance if loaded incorrectly. Poor script loading blocks rendering, delays interactivity, and tanks Core Web Vitals scores (Google's key performance metrics: LCP, INP, CLS). The right loading strategy can prevent a 2-second delay in Time to Interactive.
\*\*Note: Working Directory\*\*
This lesson uses `apps/web`. All file paths are relative to that directory.
## Outcome
Third-party scripts loaded with optimal strategies: critical scripts before interaction, analytics after interaction, and non-essential widgets lazy-loaded.
## Fast Track
1. Replace raw `
Current performance (from Lighthouse):
- TTI: 4.2s
- TBT: 890ms
- LCP: 2.8s
- CLS: 0.15
- JS Bundle: 1.2MB
Expected audit findings:
1. **Analytics script (critical impact):**
- Size: 120KB
- Blocking time: 450ms
- Strategy: beforeInteractive (WRONG - blocks hydration)
- CLS impact: None
- **Recommendation:** Change to afterInteractive saves 450ms on TTI
- **Code:**
2. **Chat widget (high impact):**
- Size: 380KB
- Blocking time: 290ms
- Strategy: afterInteractive
- CLS impact: 0.08 (widget causes layout shift)
- **Recommendation:** Change to lazyOnload + add placeholder saves 290ms TBT, fixes CLS
- **Code:**
3. **Ads script (medium impact):**
- Size: 250KB
- Blocking time: 120ms
- Strategy: default (no strategy = render-blocking)
- **Recommendation:** Add strategy="lazyOnload" saves 120ms
- **Code:**
4. **Social share (low impact but fixable):**
- Size: 45KB
- Uses raw script tag (should use Next.js Script)
- **Recommendation:** Convert to Script component with lazyOnload
- **Code:**
Projected improvement after optimizations:
- TTI: 4.2s to 2.5s (1.7s faster - 40% improvement)
- TBT: 890ms to 140ms (750ms saved - 84% improvement)
- CLS: 0.15 to 0.07 (53% improvement)
- No change in functionality, all features still work
Measurement commands:
# Baseline measurement
npx lighthouse http://localhost:3000 --only-categories=performance
# With scripts blocked (to measure total script cost)
npx lighthouse http://localhost:3000 --only-categories=performance --blocked-url-patterns="analytics.example.com,chat.example.com"
Generate a comprehensive script audit methodology with step-by-step measurement instructions, analysis techniques using Chrome DevTools and Lighthouse, and a detailed report format that quantifies the performance impact of each third-party script with specific optimization recommendations.
```
This prompt will help you build a data-driven approach to third-party script optimization, showing exactly which scripts hurt performance and by how much.
## Hands-On Exercise 4.3
The starter repo has raw `