DEV Community

loading...

Nuxt: Remove icons and fonts?

wick3drose profile image wick3dr0se ・1 min read

I've been doing some metric test with my website and improving the overall quality and speed where I can. I noticed over half of my page size is material design icons trying to be pulled from a CDN. I've installed mdi/font and configured it properly to work along with Nuxt and Vuetify. Is there anyway to rip out mdi and google fonts entirely? I've already downloaded an icon set locally and I'm using those but my page load is almost cut in half by these icons and font CDNs

Discussion (5)

pic
Editor guide
Collapse
fmctaggart profile image
Fraser McTaggart

How are you loading the fonts/icons?
If you load only the icons you're require, this may help.
Also use github.com/Developmint/nuxt-webfon... for Google fonts. It really cut down loading times for me.

Collapse
wick3drose profile image
wick3dr0se Author • Edited

I was initially using them from a CDN and I've been find with that for the past year but I've recently started updating my site again and wanted to improve on speed. I noticed it was taking 300ms to load fonts when I only use 5 fonts. I tried downloading mdi/font with yarn and adding it to nuxt.js.config in the css section and vuetify module. After I did that and pushed it live; I tested again and it actually made it slower. Then I downloaded some icons and manually src them from static and it's still loading mdi from CDN making my site 300ms slower on the initial load. If you're interested in looking I can open my source up. It's a very small site. I am going to switch to that web loader now. Thank you

Collapse
viracoding profile image
viracoding

There is an option to not include the mdi fonts.
vuetify: {
defaultAssets: false,
icons: false // if you are using ur own icons
}
I personally use this library npmjs.com/package/@mdi/js. It's not so practical, because you have to import the fonts, in order to use it, but it helps for the performance.

icons: {
iconfont: 'mdiSvg',
},

It's almost impossible to score good results with vuetify. I hope they're working in a solution.

Thread Thread
wick3drose profile image
wick3dr0se Author

I got a 98% on performance and 99% on structure with GTMetrix and a 92 with Page insights so I'd say Vuetify does very well but I prefer to add cosmetic things like that myself especially when I build my website very minimally and a simple font takes over half of my page size. It literally delays my hero from loading for over 300ms and I'm not even using the fonts anymore.

I'll try to configure that later tonight. My laptop got dropped a little while back and the wifi card has been in and out since. Right now it's out! I'll have to get a new one soon 🤣 I really hope they are though or I'll consider svelte or bootstrap likely

Thread Thread
viracoding profile image
viracoding

That sounds nice. Could you maybe share the source code, I am very interested in how you achieved that performance :D