Inline and Defer CSS

by adding “above the fold CSS” insecttrojan, see the AO FAQ for more info.

so it have Prioritize of css ? thats why i have the delay i dont understand i have enable the Inline “above the fold CSS” of the autoptimize thats i have the delay .

I don’t understand what you’re saying, can you rephrase?

i have enable the Inline “above the fold CSS” option of autoptimize but when my sites load it shows up whithout css for 1 second and later loads the css so i want to show it up with some basic css and later to load fully css.

well, when ticking “inline & defer CSS” you’ll see a textarea in which you need to paste the “above the fold CSS” (= your “basic css”), this is something you will have to generate elsewhere, see the FAQ for links to tools that do that.

ok i paste the css on the jonassebastianohlsson i create a CRITICAL PATH CSS and past it in autoptimize thats right ?

yes, that’s right!

Hello, can You provide direct url to this tool to generate this css
I spend hour review whole FAQ And I cannot find – I am blind or something ??

Ok I go to https://jonassebastianohlsson.com/criticalpathcssgenerator/ this is this tool?

And I enter my URL then I have 2 windows on the left is this

/*Insert your CSS here*/
body {
  color: #202020;
}
.someNonCriticalSelectorForThisUrl {
  color: red;
}

And on the right window is this

body{color:#202020}

I should copy and paste this from the left window???

• This reply was modified 4 years, 10 months ago by mediaex.

I should copy and paste this from the left window???

no, you’ll first have to provide a URL and the full CSS of your site mediaex

Ok How about this scenario ??

#1 I go to criticalcss.com
#2 generate critical css for my home page
#3 Paste generated css to Inline and Deffer CCS window on my wordpress
…mydomain/wp-admin/options-general.php?page=autoptimize
#4 save

…….?

Then I do a page speed test and is similar like before nothing improved

• This reply was modified 4 years, 10 months ago by mediaex.

I you have a subscription there; asolutely! The resulting CCSS will be better there ??

Yes I paid on criticalcss.com ??
after that is still no difference ??

so I am lost – this is no difference in the speed at all and sometimes is slower mobile before 48 and now 22 wth?

what do I need to paste in this window on this page?
…mydomain/wp-admin/options-general.php?page=autoptimize

The code generated on criticalcss.com for my front page?

• This reply was modified 4 years, 10 months ago by mediaex.

well; “inline & defer” has but one direct goal: making sure the CSS is not render-blocking. if that is the case, and you have no render-blocking JS either (which is a different thing), then your “first paint” times can improve significantly, which in turn can improve your overall pagespeed score.

re. “what do I need to paste in this window on this page?”; if you measure the pagespeed on the homepage, then indeed generate the CCSS for that page, but do take into account that that might not apply to other pages for 100%, so you could see some “flash of unstyled (or wrongly styled) content” on other pages.