Third Party

If third-party scripts are tanking your Core Web Vitals, this skill walks you through proven mitigation strategies. You'll learn when to use async versus defer attributes, how to set up early connections with preconnect and dns-prefetch, and how to lazy-load resource-heavy embeds like YouTube videos or social widgets using IntersectionObserver. It covers both the assessment side (using Lighthouse audits and WebPageTest waterfalls to identify blocking scripts) and the optimization side (self-hosting critical resources, using Next.js Script component strategies). The guidance comes from patterns.dev and focuses on keeping essential third-party functionality while minimizing the performance hit on analytics, ads, and chat widgets.

skills.sh installs: 1.6K
GitHub stars: 258
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add patternsdev/skills --skill third-party --agent claude-code

Installs into .claude/skills of the current project.

Files

When to Use

Use this when third-party scripts (analytics, ads, chat widgets, social embeds) are slowing down your site
This is helpful for optimizing Core Web Vitals while retaining essential third-party functionality

Instructions

Use async or defer attributes for non-critical third-party scripts
Establish early connections with preconnect and dns-prefetch resource hints
Lazy-load below-the-fold embeds (YouTube, maps, social media) using IntersectionObserver or facades
Consider self-hosting critical third-party scripts for better caching control
Use the Next.js Script component with appropriate strategy values for framework-level optimization