Tim Benniks 2024 on Nuxt content

Nuxt Studio is awesome...

Speed optimization techniques

Static render, seems faster than server components with ISR due to loading full Nuxt in serverless function
Minimize render-blocking
- HTTP 2.0 with multiplexing is awesome but it doesn’t always help
- Nuxt feature: turn off scripts in Nuxt.
  - It preloaded 25 JS files that came before render-blocking CSS. LCP was bad.
  - When Nuxt scripts are turnt off, manually add back prerendering of other pages by implementing prerendering with "speculationrules" for chromium based browsers.
  - Do some vanilla JS due to nooScripts: True
    - navigation class toggle
    - analytics
    - rum scores
- Nuxt feature: inline all CSS and add it to a single CSS file.
- Turn svg into lazy loading images vs inline SVG. Turns out a lot of rendering work in the main thread happened.
Utilizing web-safe fonts
- Can cause layout shifts, even with font swap, so changed body font.
- Using Daniel Roe's Nuxt/fonts module for Google font. Great optimization with fontaine.
Lazy, eager loading images + fetch priority
- Responsive images

Name		Name	Last commit message	Last commit date
Latest commit History 270 Commits
assets/css		assets/css
components		components
content		content
pages		pages
public		public
scripts		scripts
server		server
.gitignore		.gitignore
.npmrc		.npmrc
.prettierignore		.prettierignore
README.md		README.md
app.config.ts		app.config.ts
app.vue		app.vue
nuxt.config.ts		nuxt.config.ts
nuxt.schema.ts		nuxt.schema.ts
package-lock.json		package-lock.json
package.json		package.json
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
utils.ts		utils.ts
vercel.json		vercel.json