Eliminate external render-blocking

css pagespeed
Manolo picture Manolo · Aug 2, 2013 · Viewed 56.5k times · Source

PageSpeed Insights suggests me to:

"Eliminate external render-blocking Javascript and CSS in above-the-fold content. Your page has 1 blocking CSS resources. This causes a delay in rendering your page. Optimize CSS delivery for the following resources: http://itransformer.es/css/c0f9425.css"

The css file c0f9425.css is the combined file with jquery-ui.css file and custom one.

I don't really understand this point. How should I follow this suggestion?

Answer

roka picture roka · Aug 2, 2013

Google suggests you to put the initially needed (above-the-fold) CSS inline and load the rest of the CSS when the page load is ready. See here.

Same goes for the javascript. Include the "must have code" inline and load the "nice to have code" on page load as suggested here

Idea is to load what the user sees first as fast as possible.

Personally I find it hard to follow as it would split the code and makes maintaining it harder. Makes sense for large projects though…

Related questions

"Eliminate render-blocking CSS in above-the-fold content"

I've been using Google PageSpeed insights to try and improve my site's performance, and so far it's proven extremely successful. Things like deferring scripts worked beautifully, since I already had an in-house version of jQuery's .ready() to defer scripts until …

Read More
Do Images Load Faster in HTML or CSS?

If I load an image using this html on my sidebar Would it load any faster/slower than if I instead put on the sidebar where my style.css (which is called in the header) has .image { width: 200px; height: 200…

Read More
Pagespeed caching css, annoying to develop

I'm working on a site which I havent coded from scratch and in firebug the css files are being displayed as: style.css.pagespeed.ce.5d2Z68nynm.css with the pagespeed extension. Can anyone tell me what's doing this …

Read More