Inline and defer CSS doesn't defer

what is the URL of your site Marcin, so I can have a quick look?

frank

Url of my site is https://www.blackballoon.pl.

based on your HTML, I see the following

1. in head: inlined critical CSS
2. in head: noscript-block containing normal link tag
3. in footer: script-block with deferred loading

this is as it should be really; the 2nd item is there as fallback (for users without JS) but will not load CSS under normal circumstances.

now off course; if the inlined critical CSS is not enough to render the above-the-fold content, then Google may still wait for the deferred CSS to load and will consider that deferred CSS as render blocking.

hope this clarifies,
frank

Unfortunately it seems that the whole required, critical CSS is inlined in head, still giving the same error. I have generated critical CSS using free online tool, as well as I have verified if everything is there and it seems as it should be. Is there any possibility that error is somewhere else? Or maybe do you know any tool that simplifies the process of generating critical CSS?

Is there any possibility that error is somewhere else?

I’m afraid I don’t see another possiblity really.

Or maybe do you know any tool that simplifies the process of generating critical CSS?

https://criticalcss.com/ is great, but that’s a commercial offering.

frank

It seems, that the tool you suggested does not solve the problem. I still have the same error in page speed insights. Any other suggestions?

Your page has 1 blocking CSS resources. This causes a delay in rendering your page.

Approximately 12% 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:

https://www.blackballoon.pl/…ize_0ad28e697bf5121cd3bc1b1635ca6c0a.css

based on this the “above the fold”-css is still not enough. you could try e.g. this bookmarklet (chrome only)?

but the weird thing; when I disable all but the inlined critical CSS in firefox style editor, I do see your above the fold with most of the style applied. so I’m not 100% sure that the problem in reality is not with GPSI, as there clearly is a lot more then 12% of the above the fold part of the page styled … could be a GPSI fluke.

frank

Hi Frank, mkaszuba,

This is a PSI ‘bug’. It doesn’t always recognize when CSS is deferred. You can clearly see in any of these real world test runs that the deferred file is fired at domContentLoaded: https://www.webpagetest.org/result/160217_NW_YSX/

You do have some bizarre Start Render Time anomalies though, mkaszuba.

Be well,
AJ

Ok, so I’ll leave it as it is.

Concerning Start Render Time, I think that the reason is loading of multiple images which are placed in background of the site. Do you see any other reason of that or maybe have any suggestion to solve it?

It appears to be Chrome-specific, mkaszuba, as it doesn’t occur in Firefox: https://www.webpagetest.org/result/160217_NV_ZVP/

What seems to be happening is that since https://www.blackballoon.pl/wp-content/uploads/2016/01/bb_head_main.jpg

and

https://www.blackballoon.pl/wp-content/uploads/2016/01/bb_main_testimonials.jpg

are fired by the aggregated .JS file, Chrome is sometimes getting confused about when its okay to begin rendering. Short of unpacking the JavaScript associated with those two images (probably not the best idea) you’re sort of buggered, there.

Be well,
AJ