Performance Enhancements

[bryantgillespie]

Grab bag of performance improvements - lots of small tweaks adding up to a big improvement.

• Use iconify-icon instead of loading the entire material symbols font library
• Use font fallbacks to prevent CLS
• Await useAsyncData in dynamic card component to ensure payload.json is generated instead of calling API directly
• Moving routes for prerendering into separate module for readability / ease of updating
• Updated to latest version of Nuxt

Old Score

New Score

[netlify]

✅ Deploy Preview for directus-website ready!

Name	Link
🔨 Latest commit	12d9979
🔍 Latest deploy log	https://app.netlify.com/sites/directus-website/deploys/65cfda499005af0008aff46b
😎 Deploy Preview	https://deploy-preview-127--directus-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[paescuj]

Great work 🚀 Looks good overall, besides some minor comment, and there seems to be an issue on this specific page https://deploy-preview-127--directus-website.netlify.app/team/ben-haynes where the browser hangs:

Happens in Firefox, on Chrome you'll only notice that it's slow to move away from the page.
Not sure if other pages are affected as well. Let me know if I can assist in debugging this.

[bryantgillespie]

Great work 🚀 Looks good overall, besides some minor comment, and there seems to be an issue on this specific page https://deploy-preview-127--directus-website.netlify.app/team/ben-haynes where the browser hangs:

Happens in Firefox, on Chrome you'll only notice that it's slow to move away from the page. Not sure if other pages are affected as well. Let me know if I can assist in debugging this.

Good catch. Not sure why it's hanging there but will get it sorted.

[bryantgillespie]

Great work 🚀 Looks good overall, besides some minor comment, and there seems to be an issue on this specific page https://deploy-preview-127--directus-website.netlify.app/team/ben-haynes where the browser hangs:
Happens in Firefox, on Chrome you'll only notice that it's slow to move away from the page. Not sure if other pages are affected as well. Let me know if I can assist in debugging this.

Good catch. Not sure why it's hanging there but will get it sorted.

Looks good now.

Has to be some kind of weird Nuxt issue but if you have a link like /about#core-team like we were using on the /team/[slug] page - it doesn't pickup the cached payload.json for that page. So the delay was because it was refetching all the data for that page client side.

[paescuj]

Great work 🚀 Looks good overall, besides some minor comment, and there seems to be an issue on this specific page https://deploy-preview-127--directus-website.netlify.app/team/ben-haynes where the browser hangs:
Happens in Firefox, on Chrome you'll only notice that it's slow to move away from the page. Not sure if other pages are affected as well. Let me know if I can assist in debugging this.

Good catch. Not sure why it's hanging there but will get it sorted.

Looks good now.

Has to be some kind of weird Nuxt issue but if you have a link like /about#core-team like we were using on the /team/[slug] page - it doesn't pickup the cached payload.json for that page. So the delay was because it was refetching all the data for that page client side.

Thanks! Unfortunately, the issue still appears in Firefox. I tested the other core team pages and noticed the same happens on https://deploy-preview-127--directus-website.netlify.app/team/matt-minor:

Could this be somehow caused by a blog post which is listed on both pages?

[bryantgillespie]

Who uses Firefox? 🤣

Jokes aside. I'm kinda stumped here. Because it works fine on every other browser.

[paescuj]

Who uses Firefox? 🤣

Jokes aside. I'm kinda stumped here. Because it works fine on every other browser.

Happy to take a look at it 🦊👍

[paescuj]

Okay, that's the error I'm receiving in dev:

[Vue warn]: Unhandled error during execution of app errorHandler [runtime-core.esm-bundler.js:44:12](http://localhost:3000/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.4.15/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js)
Uncaught (in promise) Maximum recursive updates exceeded in component <Container>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

[bryantgillespie]

Upstream issue within Vue?

[paescuj]

Upstream issue within Vue?

Exactly! Was caused by vuejs/core#10214, can confirm it's fixed now 👍

[bryantgillespie]

🙌
Nice find!
Happy to put this one to bed.

Should really help us SEO wise.