To not block the rendering process on my small responsive site I should move my external stylesheet, a lot of which are css bootstrap overrides, into the head section. In the future I will move what ‘above the fold’ content I can inline.
Is there anything important I need to know about in terms of changing the rendering process by moving it into the head? Thx.
It’s inefficient. It means the same code has to be downloaded again and again, for each page view, instead of being cached on the first page view. It’s also potentially harder to update the code, depending on how it’s included on each page.
This is the wrong way to go.
Ok thanks, I understand that. Everything’s sure got a trade off with optimizing for mobile. I was just following the recs on GooglePageSpeed insights. My site’s probably not even slow. I guess a second opinion would be nice too.
If the sheet you are in-ining is dependent on the main bootstrap files then wouldn’t in-lining it give you no benefit as the elements can’t display properly until the other dependecies have loaded?
As I understood it you would want all the styles for the elements above the fold to be inline so that this section displays quickly. It won’t have any benefit if the rules are dependent on other css files that are not loaded yet.
I’m not sure this type of optimisation is worthwhile for small sites that are not ‘speed critical’ as it just makes things more awkward. In most cases just getting rid of 1 or 2 images can give you better results than hours of fiddling with the code.