Still loading minifified CSS in header, although Inline CSS is activated

this is normal @c0mpil3r; the CSS is injected with rel=”preload”, meaning it gets loaded in a non-blocking manner after which the onload-event triggers JS to switch the rel to stylesheet;

<link rel="preload" as="style" media="all" href="https://test.aveato.de/wp-content/cache/autoptimize/1/css/autoptimize_3c1b3bc567548e908dd4ed36a107a6c1.css" onload="this.rel='stylesheet'" />

this is based on filamentgroup’s loadcss solution and is currently considered best practice.

if GPSI still complains the full CSS is render-blocking, then that likely is because the critical CSS is insufficient to render the above-the-fold part of the page, so you’ll have to experiment with it (using different tools to generate it and/ or tweaking it manually).

hope this clarifies,
frank

Ok, I will try to generate the necessary critical CSS then. Thank you for the quick answer!

Hi folks

PageSpeed Insights’ analysis does not use real devices. PageSpeed Insights fetches a site with a Blink renderer (the rendering engine that powers Google Chrome) that emulates both mobile device and desktop devices. It is an artificial/synthetic test prone to errors.

PageSpeed Insights’ recommendations should always be compared against real world tests to see what’s really going on and to figure out which of it’s recommendations are actionable and which should be ignored.

Your CSS file does not block rendering on mobiles, c0mpil3r. You’re getting a false positive, as you can see here with Google’s real world performance testing platform Webpagetest (Dulles, VA – iPhone 8 iOS 11 – LTE): https://www.webpagetest.org/result/180103_36_5d11d2397861da8f035183384363fd88/7/details/#waterfall_view_step1

Request #64 is your aggregated Autoptimize CSS. It comes well after the green line that indicates when rendering begins.

Be well,
AJ
Managing Partner
WpFASTER

As always valuable feedback from a very knowledgeable person, thanks AJ! Have a great 2018!

frank

This was very helpful! Thank you!

The truth about PageSpeed Insights will set you free! ??

May we all have less gray hair in 2018.

AJ

Interesting, when I use W3TC to minimize and defer the CSS, PSI is not complaining anymore, even though I have lower to zero percentages of the critical.css coverage.

in that case you’ll probably have a “prioritize visible content”-warning in GSPI and your *real* performance (specifically the rendering) will likely be worse ??