Loading CSS in my page eficiently

Question

Here is my issue.

I am analyzing my page with Google Page Speed Insights. An it\'s telling me to remove my css link in the head (above floating line) because its blocki

Answer 1

IMHO, Insight will always consider loading external CSS file as less efficient, because, from Google Developers - OptimizeCSSDelivery

Optimize CSS Delivery
This rule triggers when PageSpeed Insights detects that a page includes render blocking external stylesheets, which delay the time to first render.

This might be true for small CSS code, but for large ones this is not true, another disadvantage of doing this is if you decided to change something in your CSS, then you'll need to go to every single page and do the change instead of changing it one time.

Beside, external CSS files could be cached unlike inline code, also considering the webpage size will increase or each page because you included it inline in every page.

Should i add a style tag on the elements? <-- I would rather not

Never!, this will give you hard time in maintaining and generalizing your CSS, and will have the top priority so you'd bang your head against the wall wondering why changing the CSS in external file or in the head section is not taking effect.