We know, using wp_head() and wp_footer() all the scripts and styles are enqueued using wp_enqueue_styles and wp_enqueue_scripts hook. What we do is to enqueue our stylesheets and scripts using functions.php. And similarly WordPress plugins also enqueue their stylesheets and scripts using the same method.
So, in the end there are many enqueued styles and scripts in header or footer. What Google PageSpeed recommends is:
We know, wp_enqueue_script() and wp_enqueue_style() offer a $deps parameter, where we can define the depth or priority of the script or stylesheet. But that affects only within scripts and styles, not in both. So, with a combined load of scripts and stylesheets from the theme, and/or child theme, and/or plugins, and/or third party API etc. how can we let the WordPress to enqueue them all in a way so that site speed improves with a sound website’s quality?
Or, are they bulletproof to echo styles first, than scripts?
I will try to answer this as best as possible given that there is no bulletproof method.
It’s up to the developer to really plan out how the DOM is painted, WordPress cannot guess as to what a theme/plugin/user is going to be doing, it can simply provide some guidance and basic tools. The problem of course is when many plugins are added to a site, you can have a mess on your hands. This is what separates a well crafted site structure from one hastily clicked into place.
The
$depsdoes not really define priority, it only provides dependency context. You can actually define priority in the action hook using the$priorityparameter. There is nothing wrong with using multiplewp_enqueue_scriptswith different$prioritysettings.Some pointers.
down, analyze it using Developer Tools, Firebug, etc, to inspect how the page
is painted.
wp_enqueue_scriptsaction forwp_enqueue_style$priorityand$in_footerfor your actionsExample of inspecting frame loading in developer tools, mousing over these details provides more call stack info.
