We know, using
wp_footer() all the scripts and styles are enqueued using
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:
Optimize the order of styles and scripts – Google PageSpeed
- Fatal error: Call to undefined function wp_enqueue_media()
- Enqueue WordPress jQuery after it's been deregistered by a plugin
- force enqueue script to be first in order of prominence
- WooCommerce with thousands of products - site is very slow - optimize db queries?
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.
$deps does not really define priority, it only provides dependency context. You can actually define priority in the action hook using the
$priority parameter. There is nothing wrong with using multiple
wp_enqueue_scripts with different
$in_footerfor your actions
Example of inspecting frame loading in developer tools, mousing over these details provides more call stack info.