Eliminate render-blocking JavaScript and CSS in above-the-fold content

Hello,

Whe I run this site through Google PageSpeed
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.thinkinsure.ca&tab=mobile

I get the following error for my mobile only

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Your page has 4 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Optimize CSS Delivery of the following:


Its recommendation is to use inline css, which to me sounds like Google has lost its mind

Can anyone please clarify
LVL 1
jblayneyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kyle HamiltonData ScientistCommented:
if your above the fold content relies on those css files, then the only thing you can really do is combine those files into one to avoid blocking http requests. Otherwise you can try to load the files asynchronously, but then you risk FOUC ("flash of unstyled content")

the bottom line is the warning you are getting is no big deal. you should combine your CSS files anyway.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
COBOLdinosaurCommented:
Without seeing the page ican only guess, but I would bet that you have a lot of junk bloat from using third party trash, and you have used bootstrap to make it even worse.  Combining CSS file will reduce the HTTP calls, but if they are so bloatd that they are creating a render block, you will still have a technically unhealthy page.

If you post a link we might be able to help you optimize it.

BTW Google is not nuts with the inlining nonsense, they are just promoting Chrome.  The HTML parser in Chrome is slightly faster with inline styles than FF, but both of them are faster if there is no inline styling.  However by moving the inefficiency from the head to the body it eliminates the slowest part which is the http calls.  So crazy? No. screwing with best practices for its own purposes... most definitely.

Cd&
0
jblayneyAuthor Commented:
Hello,

This is the page, i didn't know I used bootstrap, is that part of my skeleton layout?

http://www.thinkinsure.ca
0
Powerful Yet Easy-to-Use Network Monitoring

Identify excessive bandwidth utilization or unexpected application traffic with SolarWinds Bandwidth Analyzer Pack.

COBOLdinosaurCommented:
I don't know what Google is talking about.  What they describe and what I see are very different, there is not a lot of bloat and no bootstrap.  There is no blocking from those css files, and the load time is excellent.  There are some validation errors you should clean up:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.thinkinsure.ca%2Findex.php&charset=%28detect+automatically%29&doctype=Inline&group=0

But as far as performance I would ignore the terrible advice you are getting from Google. I think the 'bot they used for that has stripped the gears or something.

Cd&
0
Kyle HamiltonData ScientistCommented:
as per my earlier statement:

the bottom line is the warning you are getting is no big deal
0
COBOLdinosaurCommented:
It is not just no big deal, in this case it is giving really bad advice.

Cd&
0
Kyle HamiltonData ScientistCommented:
true
0
Kyle HamiltonData ScientistCommented:
actually, i woulndt even call it bad advice. it's just irrelevant
0
Kyle HamiltonData ScientistCommented:
actually....

irrelevant isn't even quite right.

it's kind of impractical and stupid. but so are robots.

so yes, the suggestion kind of makes sense in theory. you have some limited content above the fold, and you style it inline. then you load the rest of the style sheets. In reality, that would would make your site a real bitch to maintain, and wouldn't give you any perceivable performance benefit.

always engage brain. period.
0
Kyle HamiltonData ScientistCommented:
so what I meant to say in my original post was, ignore it. I should have explained. sorry.

anyway, apologies for spamming you'all's emails with multiple posts. I'm done now :)

cheers.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.