Several plug-ins to optimize the JavaScript loading experience in WordPress introduction _php Tips

WordPress itself as well as themes and plug-ins usually need to load some JavaScript to implement some special features. JavaScript files are typically loaded on the page header in order to maximize compatibility and avoid JavaScript failure. But according to the Yahoo Developer Forum's recommendations, loading JavaScript should be at the end of the page to improve the display (response, rendering) speed of the page. This article introduces several related plug-ins based on the experience of the author, and explains how to load JavaScript on some special pages still in the header.

Here's a brief introduction to some of the relevant WordPress Plug-ins and features to optimize JavaScript, and then show how to deal with some special situations.

A. Optimize JavaScript wordpress Plugin
I have used WP minify, autoptimize, JavaScript to footer these three plug-ins, the following describes its characteristics.

1. WP minify
This plugin integrates the Minify engine into WordPress. Once enabled, the plugin will be able to merge and compress your JS and CSS files to increase the loading speed of the page.

WP Minify can crawl the generated WordPress page of the Js/css file, the file list passed to the Minify engine. The Minify engine is processed to return a strengthened, streamlined, and compressed JavaScript or stylesheet file (CSS) that is replaced by WP minify in the WordPress header.

Its main features are:

• easy to use;
• Valid for JavaScript, CSS, and HTML;
• Debugging tools are provided;
• Ability to handle external JS and CSS files;
• Ability to exclude specified JS and CSS files;
• Ability to specify the location of the processed JS and CSS files (header or footer, or even elsewhere);
• You can add expiration time to the processed JS and CSS files.

When the WordPress 3.1 beta came out, I found that WP minify incompatible with it, will cause the Web site can not load properly.

2. Autoptimize
Perhaps the future WP Minify upgrade will solve the incompatibility problem, but I can't wait. Later, we found Autoptimize, a plug-in with similar functionality, and the plug-in was simpler to operate.

Autoptimize consolidates, streamlines, and compresses all JS and style sheet (CSS) files, adding cache expiration flags. Then put the stylesheet file on the page header (again to improve the page load efficiency), and put the JS file to the end of the page. It also streamlines the HTML code and gives your page a thin body. But I don't think it's very obvious to thin HTML pages, as long as your server turns on Gzip compression, there's no need to do that.

By default, Autoptimize optimizes all html/css/javascript in the way described above.

I personally feel that autoptimize is more than WP minify better use of WordPress optimization plug-ins.

3. JavaScript to Footer
This plugin is very simple to write. I looked at the source code, the completion of the task of the code only 6 WordPress functions (see below), that is, 6 lines. So this plugin has been updated since it was created. I started because I saw it. The last change date is still on September 22, 2009, so ignore it.

But it simply optimizes the placement of JavaScript, by moving all JavaScript files that are correctly declared in WordPress to the end of the page to load. It does not have any processing for HTML code and CSS style sheet files.

According to the JavaScript to Footer source code, it uses the following 6 lines of code to complete the work:

Remove_action (' Wp_head ', ' wp_print_scripts ');
Remove_action (' Wp_head ', ' wp_print_head_scripts ', 9);
Remove_action (' Wp_head ', ' wp_enqueue_scripts ', 1);
Add_action (' Wp_footer ', ' wp_print_scripts ', 5);
Add_action (' Wp_footer ', ' wp_enqueue_scripts ', 5);
Add_action (' Wp_footer ', ' wp_print_head_scripts ', 5);

If necessary, you can add the following code to the Wp_head () function of a particular WordPress template to reverse the process, that is, to invalidate it and restore it to its original loading location:

Remove_action (' Wp_footer ', ' wp_print_scripts ', 5);
Remove_action (' Wp_footer ', ' wp_enqueue_scripts ', 5);
Remove_action (' Wp_footer ', ' wp_print_head_scripts ', 5);
Add_action (' Wp_head ', ' wp_print_scripts ');
Add_action (' Wp_head ', ' wp_print_head_scripts ', 9);
Add_action (' Wp_head ', ' wp_enqueue_scripts ', 1);

Of course just say some specific page template, if it is all pages, then simply disable the plugin well:D

Two. How to use
I believe for most wper, read the previous introduction to know how to choose the optimization of their needs and reasonable use of plug-ins. It is based on the following three considerations:

Do you use a lot of HTML annotations, spaces, blank lines, and so on in your page template? If not, then you do not need to use HTML streamlining for a little bit of bandwidth savings (when Gzip compression is typically below 1%);
Do you have multiple CSS style sheet files loaded in your page? If not, you do not need to use plug-ins to streamline and consolidate CSS style sheets, manual streamlining and integration of CSS style sheets is simpler and more efficient than using Plug-ins;
Based on WordPress default will be loaded in the header of JavaScript, the general WordPress site needs to the JS loading location optimization. But if most of your pages also need to load JS in the page header to ensure that there is no JS failure, then you can not do this optimization.
In my opinion, WP minify will not need, the reason has been said before. Then the rest of the autoptimize and JavaScript to Footer can be used either together or both (if used in conjunction, of course using the former HTML and CSS streamlining/integration features, while using the latter's JS position control function, because the latter on this function). I just need to control the loading location of JS, so I chose JavaScript to Footer. Because my page is also four or five JS files, is put to the end of the page loading, I do not feel the need for integration.

Three. Special case handling
while it is helpful to load a JavaScript file at the end of the page, note that the so-called end of the page refers to the Wp_footer () function in WordPress, which is usually just on the page's </body > The front of the label (at the end of course).

Sometimes we may need to use some JavaScript, such as jquery.js files, before the Wp_footer function appears.

Such a situation is also very common. For example, I created a separate link page where I used the JQuery method to get the favicon of a linked site. Obviously, I just need to use this part of the code on this single page, so it's best to put this code directly in the page template. The problem: This part of the content is obviously before wp_footer, so this code appears before the Jquery.js file, causing the code snippet to actually work because the code snippet that calls the JQuery method must be loaded later than the Jquery.js file.

So how do you deal with this particular situation? It's actually very simple. Taking the above scenario as an example, since we need to call the Jquery.js file first, we'll just output the required jquery.js file directly before the code snippet, instead of using the Wp_enqueue_script () function, rather than the wp_print_scripts () function.

The difference between wp_enqueue_script () and Wp_print_scripts () is: Wp_enqueue_script () is to tell WordPress "I need to use a JavaScript file on this page, you can remember to load ah". WordPress defaults to Wp_head () and we process it in Wp_footer () instead. Wp_print_scripts () simply outputs the JavaScript files you need in the location where you use this method, rather than adding to WordPress's processing tasks.

If we use it in the middle of the page,

 <?php wp_print_scripts (' jquery ');?>

The Jquery.js file is directly exported (usually its compressed version jquery.min.js), so even if other plug-ins or something is used,

 <?php wp_enqueue_script (' jquery ');?>

Tell WordPress need to load jquery.js,wordpress in Wp_footer () when the processing will also check the front is not already there, if there is no reload again.

Four. Conclusion
loading JavaScript in WordPress best uses the Wp_enqueue_script () function to reduce problems and improve efficiency. If you don't have these special cases to deal with, it's obviously better to use autoptimize, it's completely complete and easy to use.

But if the theme itself is simple enough, JavaScript to Footer is simpler and more efficient and better.