Archived topic
Critical css above fold
8 replies · Started by Howard on March 9, 2018
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
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.
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
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
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.
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
No problem! Keep tabs on it - I find if you keep things simple, the speed difference will hardly be noticeable at all.
Thanks Tom👌
No problem!
