3 ms·
This page had an ugly flicker as the page loaded, with the unstyled left-side navigation displayed before the CSS rules were loaded. It's not a huge deal, and
by samcheng 10y ago
This page had an ugly flicker as the page loaded, with the unstyled left-side navigation displayed before the CSS rules were loaded.
It's not a huge deal, and honestly I have built some sites like that as well, but when you're pitching front-end frameworks, stuff like that matters. I don't want anyone to think that that kind of flicker is inherent to Vue.
- bpicolo 10y agoWhat's the recommended way to resolve that these days? Render your primary CSS bundle in head?
- samcheng 10y agoI believe best practice is to sort out which of your CSS is needed to render above-the-fold content, separate that out into a smaller file, and serve that higher in the page or even inline it. The rest of the CSS can be served at the bottom, with the JavaScript. If anyone has a better plan, I'm all ears!
- zeroskillz 10y agoThat is correct. It can just be a pain to do intuitively as all sites are different. Vuetify Documentation runs off of the vuetify webpack-ssr vue cli template which I recently removed that functionality.
- zeroskillz 10y agoIt has to do with lazily loading assets, but not actually having the critical styles inlined. It's something that I had before launch, but ultimately did not like how it was done so I removed it. It's also not a product of the framework, just where I choose to load assets in the docs for pagespeed. They can easily be moved into the head and all of that is resolved.