skills.rest
quanngynx
quanngynxCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

third-party

Optimize third-party script loading with async, defer, and resource hints.

Updated Mar 27, 2026
Search Tags:#caching#performance optimization#lazy loading#core web vitals#resource hints#third-party scripts#nextjs script
One-click install
npx skills add https://github.com/quanngynx/GDGO-2026.Servexa-Warranty-AI --skill third-party-quanngynx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: third-party
Source: https://github.com/quanngynx/GDGO-2026.Servexa-Warranty-AI/tree/main/servexa-warranty-ai/.agents/skills/third-party
Command: npx skills add https://github.com/quanngynx/GDGO-2026.Servexa-Warranty-AI --skill third-party-quanngynx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Third-party scripts can significantly slow down your website and worsen Core Web Vitals by blocking rendering, increasing JavaScript execution time, and adding costly network round trips to external domains.

Core Features & Use Cases

  • Async/defer loading for non-critical scripts: Reduce main-thread blocking by delaying analytics, tag managers, and other non-critical third-party JavaScript.
  • Resource hints for critical third-party origins: Improve performance by using preconnect and dns-prefetch to reduce DNS and connection setup latency.
  • Lazy-loading and facades for embeds: Cut initial load cost for offscreen YouTube, maps, ads, and social embeds using IntersectionObserver, iframe lazy-loading, or lightweight placeholders.
  • Self-hosting and caching control: Gain better HTTP caching behavior and reduce dependency on third-party caching strategies by self-hosting where appropriate and using service workers when scripts change frequently.
  • Framework-level script optimization: Apply Next.js Script strategies (beforeInteractive, afterInteractive, lazyOnload) to load third-party code in the right lifecycle.

Quick Start

Ask the AI to produce an implementation plan to optimize your Next.js page that loads analytics, a map embed, and a chat widget so it improves Core Web Vitals without breaking functionality.

Frequently Asked Questions about third-party

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize third-party scripts to improve Core Web Vitals?▼

To optimize third-party scripts and improve Core Web Vitals, apply async or defer loading for non-critical JavaScript, use resource hints like preconnect, and implement lazy-loading for embeds to reduce main-thread blocking and network payloads.

Can I lazy-load YouTube embeds and map widgets without breaking functionality?▼

Yes, you can lazy-load YouTube embeds and map widgets using IntersectionObserver, iframe lazy-loading attributes, or lightweight facades to cut initial load costs while preserving their full functionality upon user interaction.

What is the best way to manage third-party script loading in Next.js?▼

The best way to manage third-party script loading in Next.js is applying Script component strategies like beforeInteractive, afterInteractive, and lazyOnload to load external code at the correct lifecycle stage and minimize rendering impact.

Does self-hosting third-party scripts improve HTTP caching behavior?▼

Self-hosting third-party scripts improves HTTP caching behavior by giving you direct control over cache headers and reducing dependency on external domain caching strategies, which stabilizes resource loading.

Why does my analytics script block rendering and how do I fix it?▼

Analytics scripts block rendering by executing heavy JavaScript on the main thread; fix this by applying async or defer loading decisions and using resource hints like dns-prefetch to reduce connection setup latency.

How do resource hints like preconnect reduce third-party loading latency?▼

Resource hints like preconnect reduce third-party loading latency by proactively performing DNS lookups and establishing TCP connections to external origins before the actual resource requests are made.

Related Skills

Explore More Software Engineering Skills→
deomiarndeomiarn

performance-audit

Audit website performance with Lighthouse against Core Web Vitals targets.

Community
Intermediate
statick88statick88
1

core-web-vitals

Optimize Core Web Vitals LCP, INP, and CLS with checklists and debugging techniques.

Community
Advanced
secondskysecondsky
204

progressive-web-app

Implement service workers, web manifest, and install prompts for offline-capable web apps.

Community
Advanced
coastdigitalgroupcoastdigitalgroup
2

third-party-embed-optimization

Replace third-party embeds with facade previews and lazy-load on interaction.

Official
Advanced