How to use Nuxt.js and Chrome
summary
Chrome's Aurora team documents concrete wins: focus on LCP drives practical fixes — nuxt/image and nuxt-picture add preload, srcset/sizes and WebP/AVIF handling; use native attributes like preload, fetchpriority and loading=lazy; prefer picture tag or CDN negotiation; self‑host fonts with download: true and set display: swap. Data cited: 79% of LCPs are images, only 22% use preload, 7% WebP, 26% use srcset, and Nuxt origins seeing a 106% increase in good LCPs after adoption.
AI-written summary · about
chapters (6)
- 0:00Introduction
- 0:52What is Chrome Aurora?
- 4:00Performance focus areas
- 5:46Performance focus area: Images
- 23:15Performance focus area: Web fonts
- 29:38Nuxt performance roadmap link info
related talks
21mNuxt Performances
22mImage Optimization Best Practices with Angular
30mVueConf US 2021 | Looking through the VueFinder Henri Helvetica
10mOptimizing Third-Parties - Nuxt and Chrome Aurora
38mVue/Nuxt SEO Essentials
24mNuxt Image
20mImage Optimization - Quick Win for Improving Performance in Vue & Nuxt Apps
43mChallenging Assumptions About LCP Best Practices