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.

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

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