Defer Non-Critical Third-Party Libraries
Install this skill
npx skills add vercel-labs/agent-skillsWorks across Claude Code, Cursor, Codex, Copilot & Antigravity
Initial page load speed suffers when non-essential third-party scripts execute alongside core UI components. By isolating analytics, error tracking, and logging services, you prevent these secondary dependencies from competing for main-thread resources during hydration. This skill instructs the agent to wrap non-critical client-side libraries in dynamic imports, ensuring they initialize only after the browser completes the initial render. By shifting these modules into a separate asynchronous chunk, the browser prioritizes rendering the primary document structure. This approach improves Core Web Vitals, specifically Largest Contentful Paint and Interaction to Next Paint, by offloading execution overhead from the critical path. The agent automates the refactoring of static imports into lazy-loaded patterns, maintaining full functionality while keeping the primary bundle weight as low as possible for early users.
When to Use This Skill
- •Integrating tracking pixels or analytics dashboards like Vercel Analytics or Google Analytics
- •Loading heavy third-party feedback widgets or chat support bubbles
- •Implementing logging services that run only in the client browser
- •Managing performance monitoring tools that do not require server-side initialization
How to Invoke This Skill
Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:
- “Optimize my bundle by lazy loading the analytics component
- “Move my third-party tracking scripts to load after hydration
- “Fix my LCP scores by deferring non-critical imports
- “Refactor these imports to use dynamic loading in Next.js
- “Stop my analytics library from blocking initial page rendering
What this skill does
- •Identifies static imports of non-essential third-party libraries
- •Wraps components in dynamic import wrappers with server-side rendering disabled
- •Optimizes main-thread availability during initial page load
- •Reduces total bundle size transmitted during the critical rendering path
- •Maintains standard component event tracking after lazy loading completes
When not to use it
- ✕Critical UI components required for layout stability
- ✕Libraries that perform essential data fetching needed for the initial view
Example workflow
- Scan the root layout or specific component files for third-party scripts
- Identify modules that do not affect the initial visual render
- Replace standard import statements with dynamic function calls
- Configure the dynamic import settings to disable server-side rendering
- Verify with performance tooling that the library loads after the main bundle
Prerequisites
- –Next.js framework
- –Access to component source code
Pitfalls & limitations
- !Potential for tracking loss if users navigate away before the script loads
- !Risk of visual layout shift if the deferred component has unexpected side effects on styles
- !Incompatibility with libraries that require immediate execution on the server
FAQ
How it compares
While manual implementation requires manually updating import syntax and testing SSR compatibility, this agent-driven approach automates dependency identification and ensures consistent configuration across the codebase.
📄 Full skill instructions — original source: vercel-labs/agent-skills
Analytics, logging, and error tracking don't block user interaction. Load them after hydration.
**Incorrect (blocks initial bundle):**
import { Analytics } from '@vercel/analytics/react'
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Analytics />
</body>
</html>
)
}**Correct (loads after hydration):**
import dynamic from 'next/dynamic'
const Analytics = dynamic(
() => import('@vercel/analytics/react').then(m => m.Analytics),
{ ssr: false }
)
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Analytics />
</body>
</html>
)
}How to Use This Skill Unit
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/skills/bundle-defer-third-party/ - Save the file as
SKILL.md - The agent will automatically discover the skill based on its description.
Option B: Global Installation (All Agents)
Save the file to these locations to make it available across all projects:
- Claude Code:
~/.claude/skills/vercel-labs/agent-skills/bundle-defer-third-party/SKILL.md - Cursor:
~/.cursor/skills/vercel-labs/agent-skills/bundle-defer-third-party/SKILL.md - Antigravity:
~/.gemini/antigravity/skills/vercel-labs/agent-skills/bundle-defer-third-party/SKILL.md
🚀 Install with CLI:npx skills add vercel-labs/agent-skills