bbb2f41591
- Created `openspec-ff-change` skill for fast-forward artifact creation. - Introduced `openspec-new-change` skill for structured change creation. - Developed `openspec-onboard` skill for guided onboarding through OpenSpec workflow. - Added `openspec-sync-specs` skill for syncing delta specs to main specs. - Implemented `openspec-verify-change` skill for verifying implementation against change artifacts. - Updated `.gitignore` to exclude OpenSpec generated files. - Added `skills-lock.json` to manage skill dependencies.
50 lines
920 B
Markdown
50 lines
920 B
Markdown
---
|
|
title: Defer Non-Critical Third-Party Libraries
|
|
impact: MEDIUM
|
|
impactDescription: loads after hydration
|
|
tags: bundle, third-party, analytics, defer
|
|
---
|
|
|
|
## Defer Non-Critical Third-Party Libraries
|
|
|
|
Analytics, logging, and error tracking don't block user interaction. Load them after hydration.
|
|
|
|
**Incorrect (blocks initial bundle):**
|
|
|
|
```tsx
|
|
import { Analytics } from '@vercel/analytics/react'
|
|
|
|
export default function RootLayout({ children }) {
|
|
return (
|
|
<html>
|
|
<body>
|
|
{children}
|
|
<Analytics />
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|
|
```
|
|
|
|
**Correct (loads after hydration):**
|
|
|
|
```tsx
|
|
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>
|
|
)
|
|
}
|
|
```
|