Comment by Miroslav Foltýn on "I am Harry Roberts. Ask me anything."

CommentI am Harry Roberts. Ask me anything.

Miroslav Foltýn

Oct 20, 2016

On recent project I split up CSS into multiple files in which there were chunks of layout (e. q. base, header, main, footer..), which were loaded asynchronously after each chunk's HTML so that the page loads/displays it's bits before whole page finishes loading while preventing FOUC. Is this considered good practice at the cost of more HTTP requests?

Harry Roberts

Consultant Front-end Architect

Oct 20, 2016

I love this question! We’ve learned recently that the best performance practices of yesteryear are a little more nuanced.

To my mind, the advice ‘Reduce HTTP requests’ should now be given as ‘reduce HTTP requests that will keep the user waiting’. If we can render the page in 3s with 30 requests, or in 2s with 40 requests, it’s clear that the more requests version is the better option.

I’d love to see a writeup or demo of the technique you’re describing, if you can share one…?

Miroslav Foltýn

Oct 26, 2016

It's simple really. In header's <style> I put CSS to hide root elements of each section targeted by separate stylesheets, which are loaded via https://github.com/filamentgroup/loadCSS . Of course one would want to minimalize code repetition in their styles so that the styles are not repeated for no good reason. CSS that is used across all pages such as utilities/objects/other global styles is loaded the standard way. One also has to watch for bloat from style libraries, since usually it is desirable to have access to all mixins, variables and such in all of your separate stylesheet sources.

Not sure if that is enough to create write up or some sort of blog post + I am not that great of a writer so I hope this does the deed.

Search Hashnode