2

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

Right now I have a simple link in the head of my document:

<link rel="stylesheet" media="all" href="http://mydomain.we/css/my.css" /> 
 </head>

I have try to place the link line at the bottom of the document. just before the end of the page. 

<link rel="stylesheet" media="all" href="http://mydomain.we/css/my.css" /> 
</body>

Ran Insight again.

There is 2 tabs for Insight result. By placing the css link at the en of the document I score 100% on the mobile tab. However I still get the same message on the computer part as if no mater where I place it is still getting loaded above the floating line. I don't understand because I can see the page being loaded without the css for a fraction of second.

So I'm wondering what would be the best way to load my css?

Should I place a style tag in the header?

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

So whats the best way to load my css?

Thanks.

Mi-Creativity
  • 9,554
  • 10
  • 38
  • 47
MadeInDreams
  • 1,991
  • 5
  • 33
  • 64
  • Possible duplicate of ["Eliminate render-blocking CSS in above-the-fold content"](http://stackoverflow.com/questions/18761251/eliminate-render-blocking-css-in-above-the-fold-content) –  Jan 10 '16 at 05:49

4 Answers4

2

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.

Mi-Creativity
  • 9,554
  • 10
  • 38
  • 47
  • What is considered a small or big css file? my file does 5K so far thats not even compressed yet! – MadeInDreams Jan 10 '16 at 05:16
  • Personally I consider anything more than several CSS rules with couple css properties each is *large*, also for the other advantages of having *external* CSS, like being cached, and the need to only change in one place I'd not include any inline css in the page, rule of thumb, keep it external, minimize it and cache it and you're fine – Mi-Creativity Jan 10 '16 at 05:18
  • This is the best answer imo Thank you il stop asking myself how to deal with that and will accept the 97% from Google Insight. – MadeInDreams Jan 10 '16 at 05:20
1

It may be the media=all causing it because that is used to recognized all media, where as media=screen is for desktops. I would try first using media=screen and if that doesn't work try getting rid of the media tag all together.

  • I have try both and i still get the same result. Now its does raise a question. If i use one link with media=screen and another one with media = all. Will the screen media link get loaded on a mobile device? i would save a bit there i guess. – MadeInDreams Jan 10 '16 at 05:05
1

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.

RPL
  • 3,500
  • 2
  • 21
  • 28
  • Yeah i kinda noticed that most site dont get above 65% score so i guess i will do half and half just like google suggest. Wich is to put the css that render the page in the style tag and all the rest in a link. I guess this way i wont see the page loading without the css and i will minimize loading time of the link. Thank for the reply – MadeInDreams Jan 10 '16 at 05:09
1

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.

Vignesh Sn
  • 110
  • 8