[Resolved] Critical css above fold

[Howard]

Hi guys:
I have extracted my full css and minified it with 2 programs. I use what I think is a better plugin than Autoptimize
Where would I insert this critical css in my GP blog ? I know it goes somewhere between >header tags < but I also know content must be moved to bottom of “ body” ??
Where are these (style sheets ?) or codes found on my website? Also , do I use the critical css for the whole site as I extracted above or should I have extracted each page critical css from each page separately?
Howard

[Tom]

Hi there,

I’m not too sure what you mean. Does the plugin you’re using not add the critical CSS? I suppose you could try putting it in the wp_head hook inside <style></style> tags?

All of our scripts are enqueued using wp_enqueue_scripts: https://github.com/tomusborne/generatepress/blob/2.0.2/inc/general.php#L12-L60

It may be worth using a plugin that does this automatically for you, as removing scripts manually will take a decent amount of custom coding.

[Howard]

Hi Tom:
Indeed: I used this plugin to extract full css (https://wordpress.org/plugins/above-the-fold-optimization/ )
But ONLY to get the CSS extracted, nothing more. I then used “critical path css” to extract critical CSS and then minimized it accordingly

I do use this (https://wordpress.org/plugins/fast-velocity-minify/) INSTEAD of Autoptimize as I feel it works better for my site overall. However, as you mentioned, it does NOT insert the minified critical css into the GP stylesheeet!

So now, again you’re right. I am not knowledgeable enough to put the css into my GP site PROPERLY
Can I hire you personally??? (private job)
Howard

[Howard]

PS I just questiond myself as to whether or not I extracted the FULL CSS ( which is what the first plugin LINK does, and which I followed) or whether I took just a page .. I totally presume the plugin tab said “Extract FULL CSS),,,of website
Now where to go from here??
Howard

[Tom]

Unfortunately I don’t do private work currently, but you can always try a site like codeable.io.

Do you find it makes a massive performance difference having critical CSS vs keeping things default? In my tests it makes very little difference, unless you’re adding tons of custom CSS.

[Howard]

Yea well you got me there! Only as I add more posts to the blog; hence things could build up unfortunately as I go along
I’ve used codeable before and they are excellent
I will think what you said over
Thanks for advice
Howard

[Tom]

No problem! Keep tabs on it – I find if you keep things simple, the speed difference will hardly be noticeable at all.

[Howard]

Thanks Tom👌

[Tom]

No problem!

[Author]

Posts