Title: Critical Path CSS like WP rocket
Last modified: March 4, 2018

---

# Critical Path CSS like WP rocket

 *  Resolved [Rookie](https://wordpress.org/support/users/alriksson/)
 * (@alriksson)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/critical-path-css-like-wp-rocket/)
 * Your plugin is much better than WP rocket but would be amazing if you could fix
   auto-generate of: Critical Path CSS
    I can only generate it once the plugin is
   off and then ../…/ is not optimal for critical path right?
 * Would it be possible to add an automation with absolute urls?

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [Raul P.](https://wordpress.org/support/users/alignak/)
 * (@alignak)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/critical-path-css-like-wp-rocket/#post-10049032)
 * Critical path cannot be auto generated by any plugin, without at least, using
   an external service.
 * You first need to understand what critical path css is, and what it means to 
   use it.
    For example, the critical path may change with every pageview and different
   content types. New content types, may not have a critical path either, so you
   need to generate one, sometimes per page.
 * The technology to generate critical path is not available with wordpress alone.
   
   You need to use a browser or something javascript aware (like nodejs) to generate
   it.
 * Look at gulp and nodejs tutorials online, or hire a developer for this.
 * Thanks
 *  Thread Starter [Rookie](https://wordpress.org/support/users/alriksson/)
 * (@alriksson)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/critical-path-css-like-wp-rocket/#post-10049820)
 * Yes, well aware of what you´re saying above, though it would be a sweet feature
   within the plugin to auto-generate. But maybe in a paid version?
 *  Plugin Author [Raul P.](https://wordpress.org/support/users/alignak/)
 * (@alignak)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/critical-path-css-like-wp-rocket/#post-10062102)
 * It would be possible (with much work), if you have nodejs and all dependencies
   installed, however 99% of the plugin users will certainly have no knowledge of
   nodejs, let alone gulp or grunt tasks.
 * A remote service like the one you’re suggesting, would fail for a few reasons.
   
   First, for most sites, if you try the online tools (even paid) to generate the
   critical path, and even though it shows success, the final code in most cases
   is either incomplete or has a lot of unnecessary code still.
 * There’s no pseudo elements support or mouseover support when you do this automatically
   either. Furthermore, the critical path implementations I know for nodejs, either
   only consider CSS external files and completely ignore inline css, or the opposite.
   
   Good luck trying to automatically concatenate (in order) the necessary critical
   path css… there’s always a manual review, else it won’t pass the prioritize visible
   content on pagespeed insights.
 * Completely agree that it would be very handy, but the current technology simply
   doesn’t allow it to work that way. Sure, I could develop my own but unfortunately,
   I have no time currently to deal with the huge amount of bugs and “doesn’t work
   on my theme” support requests, it would cause.
 * For this kind of advanced development, it’s best to do it manually and hire a
   developer for that work. It’s still not perfect, because wordpress is so dynamic
   and you cannot simply have one critical path css per page type.
 * Obviously, for very simple themes you could get it to work, but most themes are
   not simple. And for the sake of most users, I have to consider compatibility,
   above all else.
 * If any time in the future this becomes possible or easier, I’ll surely add it.
   
   Thanks again.
 *  Thread Starter [Rookie](https://wordpress.org/support/users/alriksson/)
 * (@alriksson)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/critical-path-css-like-wp-rocket/#post-10066442)
 * Many thanks for the detailed answer! I agree with you as well but might be a 
   semi option to add the feature as [https://wordpress.org/plugins/wp-criticalcss/](https://wordpress.org/plugins/wp-criticalcss/)
   which just let you fill out the API from the paid tool. I prefer to limit the
   amount of plugins which is why I want everything in one plugin like critical 
   path css 😉
 * But I understand your concerns. But it might be easy to add as above plugin and
   write communicate it very clear that it’s not bullet proof. But it might be as
   you say including a lot of none critical CSS so it will not help anyway. And 
   yeah agree once again with what you´re saying and thanks for the answer!
 * How about adding some good features such as caching, cdn rewrite and maybe some
   features to remove all wp trash to speed up? Would make the plugin more complete
   and users can strip of other plugins which you need to have to do this.
 * Enjoy!
 *  Plugin Author [Raul P.](https://wordpress.org/support/users/alignak/)
 * (@alignak)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/critical-path-css-like-wp-rocket/#post-10084441)
 * I feel your pain, but unfortunately people still ignore those warnings and then
   come and leave poor reviews, because it doesn’t work on their specific site.
 * I can tell you that I work with hundreds of wordpress sites and themes, and me
   too, I use criticalcss.com to generate the critical path for several sites.
 * Unfortunately, in more than 50% of the cases it fails to correctly generate it
   and requires me to go through the code and delete all the extra garbage or add
   new code that is missing. Frequently, criticalcss.com even shows a “failed” red
   cross after generating the critical path… that’s why, in my opinion this is quite
   useless.
 * It may be great when it works, but if more than the sites I work with fail… I
   cannot trust it enough to add it as a service.
 * What would make more sense perhaps, is to use uncss, instead of the critical 
   path. Again, there are issues with it that are not easily fixed, so I don’t think
   it matured enough to include it.
 * If you really want to include critical path, you could do what I normally do.
   
   Create a directory inside your theme and put all the critical path css code for
   each section (homepage, posts, pages, categories, etc).
 * Then, have a simple hook on your functions.php file, checking for the conditional
   tags, checking if a css file exists, and then inlining it on the header via a
   hook.
    You can even name the css files the same as your permalink and then have
   the code checking first, to see if a more specific css file exists for that url,
   before using a more generic one.
 * Sure, you need some coding skills but it’s fairly basic.
 * This page has a good example, except that you could use other conditional logic
   instead of options. [https://aristath.github.io/css/wordpress/2015/04/05/optimize-inline-css.html](https://aristath.github.io/css/wordpress/2015/04/05/optimize-inline-css.html)

Viewing 5 replies - 1 through 5 (of 5 total)

 The topic ‘Critical Path CSS like WP rocket’ is closed to new replies.

 * ![](https://ps.w.org/fast-velocity-minify/assets/icon-128x128.jpg?rev=1440946)
 * [Fast Velocity Minify](https://wordpress.org/plugins/fast-velocity-minify/)
 * [Support Threads](https://wordpress.org/support/plugin/fast-velocity-minify/)
 * [Active Topics](https://wordpress.org/support/plugin/fast-velocity-minify/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/fast-velocity-minify/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/fast-velocity-minify/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [Raul P.](https://wordpress.org/support/users/alignak/)
 * Last activity: [8 years, 7 months ago](https://wordpress.org/support/topic/critical-path-css-like-wp-rocket/#post-10084441)
 * Status: resolved