Per Søderlind

Juliette Reinders Folmer

We all know that when we’re add a script or style to WordPress, we should use <code>wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer )</code> and <code>wp_enqueue_style( $handle, $src, $deps, $ver, $media )</code> as in:
<pre><code>function themeslug_enqueue_style() {
 wp_enqueue_style( 'core', 'style.css', array('twentytwelve-style') );
}

function themeslug_enqueue_script() {
 wp_enqueue_script( 'my-js', 'filename.js', array('jquery') );
}

add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' )
</code></pre>
$deps (dependencies), the handle name and an optional parameter, lets you control when/where your script or style should be added. If $deps is <code>array('jquery')</code>, your script will be loaded after jquery is loaded.
The problem is, which one exists and in which order are they loaded ?
Debug Bar List Script & Style Dependencies, an add-on to <a href="https://wordpress.org/plugins/debug-bar/" rel="ugc">Debug Bar</a>, will list the dependencies.
<h4>Use</h4>
To view the loaded scripts and styles
<ul>
<li>Front-end: Go to the front-end, and on the admin bar choose Debug and view Script & Style Dependencies</li>
<li>Back-end: Go to the back-end, on the admin bar choose Debug and view Script & Style Dependencies</li>
</ul>
Note, the front-end and back-end loads different scripts and styles. Also, different pages on the front-end and back-end can load different scripts and styles.

Debug Bar List Script & Style Dependencies

Style very useful (even if it has not been updated since two years) ! Thanks !



useful !

Debug Bar List Script & Style Dependencies is an add-on to WordPress Debug Bar

nigro.simone

This small plugin (5 Kb) loads the stylesheets asynchronously and improve page load times.
The recommended use of this plugin is to load your vital stylesheets synchronously and non-vital CSS files asynchronously. 
Non-vital CSS-files can be for example: fonts, icons, before the fold template-specific CSS, etc.
You can choose which files to load synchronously with a filter in your function.php, eg.:
<pre><code>// exclude main and child stylesheets from delivery optimization
function exclude_from_delivery_optimization($handle){
 return in_array($handle, array('main-stylesheet', 'child-stylesheet'));
}
add_filter('speed-up-optimize-css-delivery', 'exclude_from_delivery_optimization');
</code></pre>
Note: this only works if your other plugins and theme add the CSS correctly.

Speed Up – Optimize CSS Delivery

This plugin load the stylesheets asynchronously and improve page load times.

Debug Bar List Script & Style Dependencies vs Speed Up – Optimize CSS Delivery