You can read full blog posts on the topic in the posts above.

Summary of points

• Browsers parse and render HTML content as the document is streamed.
• Stylesheets are render blocking
  • Consider a seperate theming/branding stylesheet before your main one.
• HTTP1/1 has a maximum of simultaneous connections
  • Consider upgrading to H2 or H3
• The smaller your scripts are, the sooner they can act
• Large bundles means any change in the bundle invalidates the whole thing.
• Synchronous module imports all need to be resolved before the module can act.
  • They're like one large bundle, but with more server round trips.
  • Except:
    • The individual modules can be preloaded
    • The individual modules can be cached indepedendantly.
• You can preload resources with headers
  • Possibly more convenient than modifying the document.
  • eg. headers can be applied with nginx and the like.
• If you're using ESM modules - beware of the cache invalidation cascade!
  • You can solve it with importmaps
  • Also, consider if it really matters.

Browser features

Browser features and their documentation links

Feature	Can I use	MDN
Link header	caniuse	MDN
Module preload	caniuse	MDN
Import map	caniuse	MDN

Preload scanning

Preload scanning

HTTP1/1 Max Connections

Stack Overflow

Vite and Rollup motivations

https://rollupjs.org/introduction/#the-why

https://vite.dev/guide/why.html

Vite issues re: cache invalidation cascades

Questions? Comments? Criticisms? Get in the comments! 👇