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 ?
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 6 years, 4 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 6 years, 4 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 6 years, 4 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.
