Hacker News new | ask | show | jobs
by samcheng 3476 days 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.

2 comments

It 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.
What's the recommended way to resolve that these days? Render your primary CSS bundle in head?
I 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!

That 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.