Loading Css In My Page Eficiently

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 blocking my page l

Solution 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.

Solution 2:

Possible duplicate: "Eliminate render-blocking CSS in above-the-fold content"

You should be fine keeping your CSS as it is. I've never seen it suggested to link a CSS file anywhere besides the head. Google Page Insights standards doesn't mean it's the best and most optimal way, every website is different.

The fastest way would be to use <style>...</style> or even inline CSS. But that does not mean it's the best practice. If it's just a few lines of CSS, you could opt for the <style> method, but I wouldn't go out of your way if it's not appropriate just to get a perfect Google Page Insights score.

Solution 3:

The solution for this would be first identify and separate the CSS that is used for initial page display and move it to separate file.

Load this initial css file in the head section and move the remaining css to the bottom of the page.