Optimizing Third-Party Loading in Next.js
summary
Data from 160,000 Next.js sites shows over 94% load at least one third party, 67% load five or more, and 2% load >50 third-party resources (~3,000 sites), and more third parties correlate with worse LCP and INP. Local tests add 10 popular scripts and spike total blocking time 65×. A concrete result is the new package @next/third-parties that wraps Next.js Script, ships a Google Tag Manager component with an event API, a light YouTube embed and lazy Google Maps; it’s live but early.
AI-written summary · about
chapters (9)
- 0:00Optimizing third-party loading
- 1:31Third-party resources impact
- 3:39Third parties and performance
- 6:07Testing third-party impact
- 7:32Developer challenges with third parties
- 9:39Third-party limitations and solutions
- 10:22Next.js Script Component evolution
- 11:24Next.js third-party libraries
- 13:11Future plans and feedback
related talks
10mOptimizing Third-Parties - Nuxt and Chrome Aurora
50mOptimizing third parties in frameworks with DX
22mOptimally using third-party services with Next.js
46mDeep dive into third-party performance
02m@nuxt/scripts: a better way to handle third-parties
52mIt’s My (Third) Party, and I’ll Cry if I Want To
46mChaperones and curfews: minimising 3rd party impact
47mIt’s My (Third) Party, and I’ll Cry if I Want To