Title: Optimizing script loading, implementation Author: Andrew Ozz Published: January 15, 2009 --- [ ](https://profiles.wordpress.org/azaozz/) [Andrew Ozz](https://profiles.wordpress.org/azaozz/) 3:07 am _on_ January 15, 2009 Tags: [optimization ( 7 )](https://make.wordpress.org/core/tag/optimization/) # Optimizing script loading, implementation The “first run” of the script loading optimization is in trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision.. It uses both methods: splits the scripts queue in head and footer parts, then concatenates and compresses them before sending them to the browser. Most CSSCSS Cascading Style Sheets. is also concatenated and compressed. There are two new constants that disable concatenating and compression: `CONCATENATE_SCRIPTS` and `COMPRESS_SCRIPTS`. Setting the first to false would disable both concatenating and compression, the second disables compression only. There is also a simple AJAX method to test if compressing from PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher works as expected on the server. It is run only once and the result is saved as an option. It will run again if that option is deleted. For pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress. org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party. authors there are two new actions in the adminadmin (and super admin) footer: `do_action('admin_print_footer_scripts');` and `do_action("admin_footer-$hook_suffix");`. The order of execution is: 1. `"admin_footer"` can be used to print scripts before the default footer scripts 2. `"admin_print_footer_scripts"` used to print the default scripts followed by any external scripts that were queued for the footer 3. `"admin_footer-$hook_suffix"` can be used to print scripts that should appear on a specific admin page only The preferable way for plugins to add scripts to admin pages would be either to enqueue them properly (which is a must if the script depends on a default script) or to use the `$hook_suffix` hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. to add them only where needed. New hook(s) may also be needed in the functions dealing with splitting or concatenating the script queue. Suggestions are welcome either here as comments or on tracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. as enhancements tickets. Update: added `do_action('admin_enqueue_scripts', $hook_suffix);` allowing plugins to easily queue scripts on the exact pages. To find out the value for `$hook_suffix` on a specific page, echo it from your function and visit the page. Queueing a script for the footer follows the same syntax as in script loader: ```notranslate $scripts->add( 'handle', 'full/url/to/file.js', array( 'dependency' ), 'version' ); $scripts->add_data( 'handle', 'group', 1 ); ``` Group 1 means queue for the footer, group 0 (zero) is the default. [#optimization](https://make.wordpress.org/core/tag/optimization/) ### Share this: * [ Threads ](https://make.wordpress.org/core/2009/01/15/optimizing-script-loading-implementation/?share=threads) * [ Mastodon ](https://make.wordpress.org/core/2009/01/15/optimizing-script-loading-implementation/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/core/2009/01/15/optimizing-script-loading-implementation/?share=bluesky) * [ X ](https://make.wordpress.org/core/2009/01/15/optimizing-script-loading-implementation/?share=x) * [ Facebook ](https://make.wordpress.org/core/2009/01/15/optimizing-script-loading-implementation/?share=facebook) * [ LinkedIn ](https://make.wordpress.org/core/2009/01/15/optimizing-script-loading-implementation/?share=linkedin) 1. ![](https://secure.gravatar.com/avatar/e04a2a5a55fe8c1287bc241b164dbcdb044740a5b52a773fd846102060c1c08b? s=32&d=mm&r=g) 2. [GaMerZ](http://lesterchan.net) 8:09 am _on_ January 15, 2009 3. Hmm, any idea how do I queue script for the footer? 4. ![](https://secure.gravatar.com/avatar/40432e83f7cab75f4fff5f7d51043a678713f8072c4343b0cb0f9d2baff1c47d? s=32&d=mm&r=g) 5. [Andrew Ozz](http://azaozz.wordpress.com/) 9:00 am _on_ January 15, 2009 6. Just updated the post with an example. 7. ![](https://secure.gravatar.com/avatar/e04a2a5a55fe8c1287bc241b164dbcdb044740a5b52a773fd846102060c1c08b? s=32&d=mm&r=g) 8. [GaMerZ](http://lesterchan.net) 9:09 am _on_ January 15, 2009 9. Thanks =D What about the footer for the normal pages? 10. perhaps modify wp_enqueue_script to accept 1 more argument which is group? 11. So that one can do this `wp_enqueue_script('wp-postratings', plugins_url('wp- postratings/postratings-js.js'), array('jquery'), '1.50', 1);` 12. ![](https://secure.gravatar.com/avatar/e04a2a5a55fe8c1287bc241b164dbcdb044740a5b52a773fd846102060c1c08b? s=32&d=mm&r=g) 13. [GaMerZ](http://lesterchan.net) 9:37 am _on_ January 15, 2009 14. I managed to enqueue stylesheets to specific pages in WP-Adminadmin (and super admin) with the following code: 15. ```notranslate ### Function: Enqueue Ratings Stylesheet In WP-Admin add_action('admin_enqueue_scripts', 'ratings_stylesheets_admin'); function ratings_stylesheets_admin($hook_suffix) { $postratings_admin_pages = array('wp-postratings/postratings-manager.php', 'wp-postratings/postratings-options.php', 'wp-postratings/postratings-templates.php', 'wp-postratings/postratings-uninstall.php'); if(in_array($hook_suffix, $postratings_admin_pages)) { wp_enqueue_style('wp-postratings-admin', plugins_url('wp-postratings/postratings-admin-css.css'), false, '1.50', 'all'); } } ``` 16. As stylesheet will always be in the head, this will work beautifully. 17. Most people register JavaScripts via wp_enqueue_script() or a combination of wp_register_script() and wp_print_scripts(). Accessing $wp_scripts and setting the group via add_data() is a little bit weird at least from a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party. author point of view. 18. If we can get wp_enqueue_script() to have a “group” argument. The script loader will know whether when the JavaScriptJavaScript JavaScript or JS is an object- oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. [https://www.javascript.com](https://www.javascript.com/) will be loaded at the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. or footer and load it accordingly while still hooking onto “wp_print_styles” or even “init”. 19. In order to print JavaScript onto a normal page (outside WP-Admin), currently I have to hooked onto “wp_footer”, calling wp_register_script() and then calling wp_print_scripts(). 20. ![](https://secure.gravatar.com/avatar/40432e83f7cab75f4fff5f7d51043a678713f8072c4343b0cb0f9d2baff1c47d? s=32&d=mm&r=g) 21. [Andrew Ozz](http://azaozz.wordpress.com/) 10:44 am _on_ January 15, 2009 22. Agreed, will add the extra param to wp_enqueue_script() and wp_register_script(). 23. The front-side problem is a harder one. Many themes don’t seem to have the “wp_footer” call. The “get_footer” action can be used instead but that makes printing scripts there less effective as it runs too early, before the footer HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.. Even seen a few themes that don’t have a consistent footer and don’t use “get_footer”. 24. ![](https://secure.gravatar.com/avatar/0fa321f6c73e14c16d4aea0276673ce1e5d001e49062e32f3b8dc91f0ed10c1e? s=32&d=mm&r=g) 25. [Frank](http://bueltge.de/) 11:13 am _on_ January 15, 2009 26. Thanks, i wait so long for this function. 27. ![](https://secure.gravatar.com/avatar/e04a2a5a55fe8c1287bc241b164dbcdb044740a5b52a773fd846102060c1c08b? s=32&d=mm&r=g) 28. [GaMerZ](http://lesterchan.net) 1:33 pm _on_ January 15, 2009 29. @Andrew: Yea, some themes does not even have wp_head() in their header.php as well. The only way around this is to bring awareness I think. 30. ![](https://secure.gravatar.com/avatar/0fa321f6c73e14c16d4aea0276673ce1e5d001e49062e32f3b8dc91f0ed10c1e? s=32&d=mm&r=g) 31. [Frank](http://bueltge.de/) 6:33 pm _on_ January 15, 2009 32. Hello Andrew, i hope you write over the new paramters for hook in the footer of frontend. This is very nice for better perfromance and control the js in footer. I like the wp_enqueue_* functions and i hope more themes-developer use thsi for intecrate the js-libraries. I see so much themes with a lot of plugins and many plugins load the sam js-library in the head and the site is slow and the user can not read the content. T think, wp_enqueue* is a very nice function for control js and css in the site. Very good for backend in plugins and also for hook in frontend. *sorry for my bad english 33. Pingback: [WordPress News: WordPress Resolutions, Tattoos, LiveJournal, Converters, Security, Plugins, and More « Lorelle on WordPress](http://lorelle.wordpress.com/2009/01/18/wordpress-news-wordpress-resolutions-tattoos-livejournal-converters-security-plugins-and-more/) 34. Pingback: [WordPress News: WordPress.tv, WordCamp Whistler, WordPress Logo, City Saves Money, and More | The Blog Herald](http://www.blogherald.com/2009/01/23/wordpress-news-wordpresstv-wordcamp-whistler-wordpress-logo-city-saves-money-and-more/) 35. Pingback: [WordPress News Summary: WordCamps, WordPress Meetups, WordPress PowerPoint, FeedBurner and Flash Warnings « Lorelle on WordPress](http://lorelle.wordpress.com/2009/02/26/wordpress-news-summary-wordcamps-wordpress-meetups-wordpress-powerpoint-feedburner-and-flash-warnings/) 36. Pingback: [WordPress News Report: iPhone, Widgets API, WordCamps in Hong Kong and China, International WordPress.tv « Lorelle on WordPress](http://lorelle.wordpress.com/2009/03/19/wordpress-news-report-iphone-widgets-api-wordcamps-in-hong-kong-and-china-international-wordpresstv/) 37. Pingback: [WordPress Plugins News: Coffee2Code Plugin Marathon, Plugin Podcast, Plugin Developer Center, Plugin Checklist « Lorelle on WordPress](http://lorelle.wordpress.com/2009/04/05/wordpress-plugins-news-coffee2code-plugin-marathon-plugin-podcast-plugin-developer-center-plugin-checklist/) 38. ![](https://secure.gravatar.com/avatar/a79b1564b55aab696793affc1eb6f0700748c83f61f4d002ff1c4a17e8d202c4? s=32&d=mm&r=g) 39. [bttv](http://www.bttv-kreis-hassberge.de/) 3:43 pm _on_ May 9, 2009 40. I hope this optimization work without errors in version 2.8. 41. ![](https://secure.gravatar.com/avatar/e8d3aa3d7b96c4f972f0c5662b88df918c0d3633b49d72514820728ac087a19c? s=32&d=mm&r=g) 42. [Kim](http://www.wenskaartenshop.be) 6:03 pm _on_ February 17, 2010 43. Super duper writeup on how to use the built-in wp_scripts and wp_styles hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.… Also I learned about the JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. footer thing 😉 44. Thanks again! 45. ![](https://secure.gravatar.com/avatar/458a80d11ea32ff869fcaded1e15002e130b73ec519666eca45179fbf79fb233? s=32&d=mm&r=g) 46. [Tsafi](http://www.ivy-art.com) 10:51 am _on_ March 9, 2010 47. Thanks Andrew you realy save me alot of time with this post. Comments are closed. # Post navigation [← Optimizing script loading, part II](https://make.wordpress.org/core/2009/01/07/optimizing-script-loading-part-2/) [Some nice comments here – http://wphacks … →](https://make.wordpress.org/core/2009/01/31/some-nice-comments-here-httpwphacks/)