know-it-all
know-it-all copied to clipboard
Improve styles / visuals
I'm opening this issue so we can discuss specifically about style and visual improvements. I'll list the questions I have here as I'm exploring your code.
Questions
- What are the absolute no-gos in terms of css, is there anything we should avoid because of perf issues?
- Would you accept some (small) svgs for some Icons, or is the overhead something you want to avoid?
Thanks for your enthusiasm! My performance decisions are all data-based. So if the App interactive (ms)
in the console doesn't change by a mile then everything is fine.
The focus performance-wise is on the return visitor. For those, 50% will have the entire site cached (Android + Windows support service workers) and the other 50% (iOS doesn't) will just have external assets cached. So external assets are preferred (e.g. svg files used as <img>
s).
Assets are served over HTTP2 so multiple network requests are preferred (e.g. not sprites).
Some small SVGs would be fine if they serve a purpose.
You can put them in /assets
with the other pngs and they should be added to the caching setup. Make sure that once you've done npm run build
and npm start
and loaded the site, that it works and loads all the assets if you don't have network connection (in Chrome you can turn off the network).
Well it's only normal since you are, in my opinion, the one to be thanked for!
I won't be able to iterate super quickly (you know, work...) though I'm excited to dive into this and explore your crazy fine tuned application.
Ok then, I'll try to document as much as I can what works and what doesn't work well in terms of performances.