Re: [pagespeed-insights-discuss] Optimized CSS delivery still appears as blocking resources

[Joshua Marantz]

Changing them from being loaded in a 'link' tag specified early in HTML to being loaded late by a link tag or by JS does not help.  You need to inline the critical parts of the CSS file into the head, and delay-load the non-critical CSS after the paint is done.

Doing this manually takes time, but will benefit your users. You can also try automated tools like mod_pagespeed, which can do this for you:https://developers.google.com/speed/pagespeed/module/filter-prioritize-critical-css.  If you want to know how it works, the code is here:

https://github.com/pagespeed/mod_pagespeed/blob/master/net/instaweb/rewriter/critical_css_loader.js

in particular, it uses RequestAnimationFrame and setTimeout to defer loading of non-critical CSS till after the browser has painted the screen.  The critical CSS has to be inlined in the head to (a) avoid a Flash Of Unstyled Content and (b) avoid blocking refresh on an external fetch.

/**

* Sets up the CSS style lazyloader to run at the appropriate event. Runs at

* requestAnimationFrame if it is available, since that will ensure the page has

* rendered before loading the CSS. Otherwise, wait until onload.

* @export

*/

pagespeed.CriticalCssLoader.Run = function() {

var raf = pagespeedutils.getRequestAnimationFrame();

if (raf) {

raf(function() {

window.setTimeout(pagespeed.CriticalCssLoader.addAllStyles, 0);

});

} else {

pagespeedutils.addHandler(

window, 'load', pagespeed.CriticalCssLoader.addAllStyles);

}

On Sun, Dec 6, 2015 at 11:54 AM, Alejandro Galindo <alej...@facomunicacion.es> wrote:

Hi,

Following pageSpeed advices, I moved a couple of CSS references to the bottom of the page, just before </body>.
You can see that at at http://www.facomunicacion.com/noticias/cetraa-el-taller-no-conectado-tiene-fecha-de-caducidad.html
But pageSpeeds tells me those 2 references (responsiveslides.css and css/lightbox.css) are still considered as blocking resources.

Can you please help me? Thanks you very much in advance.

Alex

--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/bd8b7776-391a-4ed1-86d3-170bbbf69a23%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.