Shulou(Shulou.com)06/03 Report--

This article mainly introduces the plug-ins of JavaScript loading experience in WordPress, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to know about it.

one。 Optimize the WordPress plug-in for JavaScript

I have used WP Minify, Autoptimize, and JavaScript to Footer plug-ins, and their features are described below.

1. WP Minify

This plug-in integrates the Minify engine into WordPress. Once enabled, the plugin can merge and compress your JS and CSS files to improve page loading speed.

WP Minify can grab the JS/CSS file in the generated WordPress page and pass the list of files to the Minify engine. The Minify engine processes and returns an enhanced, condensed, and compressed JavaScript or stylesheet file (CSS), which WP Minify replaces into 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

Can exclude specified JS and CSS files

You can specify the location of the processed JS and CSS files (header or footer, or even somewhere else)

You can add expiration time and so on to the processed JS and CSS files.

When the beta version of WordPress 3.1 came out, I found that WP Minify was not compatible with it, which would cause the website to load incorrectly.

2. Autoptimize

Maybe the incompatibility problem will be resolved after the WP Minify upgrade in the future, but I can't wait. Later, I found Autoptimize, a plug-in with similar functionality, and this plug-in is easier to operate.

Autoptimize consolidates, streamlines and compresses all JS and style sheet (CSS) files, adding cache expiration flags. Then put the stylesheet file at the top of the page (again to improve page loading efficiency) and put the JS file at the end of the page. It can also simplify HTML code and slim down your page. But I don't think it's obvious to slim down HTML pages, as long as your server turns on Gzip compression, there's no need to do so.

By default, Autoptimize optimizes all HTML/CSS/JavaScript as described above.

Personally, I think Autoptimize is a better WordPress optimization plug-in than WP Minify.

3. JavaScript to Footer

This plugin is written very succinctly. I looked at the source code and found that there were only six WordPress functions (see below), or six lines, to complete the task. So how has this plug-in been updated since it was created. From the beginning, I ignored it because I saw that its last change date was still on September 22, 2009.

But it only optimizes the load location of the JavaScript, that is, all the Javascript files correctly declared in the WordPress are moved to the end of the page to load. It doesn't do anything to HTML code or CSS stylesheet files.

According to the source code of JavaScript to Footer, it uses the following six lines of code to do its job:

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, add the following code before the wp_head () function of a specific WordPress template to reverse the above process, that is, 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, it's just about some specific page templates, if it's all pages, you might as well disable the plug-in: d

two。 Usage

I believe that for most WPer, after reading the previous introduction, you will know how to choose the optimization plug-in you need and use it properly. It is nothing more than based on the following three aspects:

Do you use a lot of HTML comments, spaces, blank lines and other tags in your page template? If not, then you don't need to use HTML streamlining for a little bit of bandwidth savings (usually less than 1% when Gzip compression is turned on)

Do you have multiple CSS stylesheet files loaded on your page? If not, you don't need plug-ins to simplify and integrate CSS stylesheets. It's easier and more efficient to manually simplify and integrate CSS stylesheets than to use plug-ins.

Based on the fact that WordPress loads JavaScript in the page header by default, general WordPress sites need to optimize the loading location of JS. 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't do this optimization.

In my opinion, WP Minify is not needed, and the reason has been mentioned earlier. Then the remaining Autoptimize and JavaScript to Footer can be used either or both (if used together, of course, the former's HTML and CSS streamlining / integration features are used, while the latter's JS location control function is used, since the latter is the only one). I just need to control where the JS is loaded, so I chose JavaScript to Footer. Because there are only four or five JS files in my page, and they are loaded at the end of the page, I don't think it is necessary to integrate them.

three。 Special case handling

While loading JavaScript files at the end of the page is helpful for page loading speed, note that the end of a page is called in WordPress's wp_footer () function, which is usually just in front of the page's tag (the end, of course).

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

Such a situation is also very common. For example, I created a separate link page, in which I used the jQuery method to get the favicon of the linked site. Obviously, I only need to use this part of the code on the only page, so it's best to put this code directly in this page template. Here's the problem: this part of the content obviously appeared before the wp_footer, so the code appeared just before the jquery.js file, causing the code snippet to actually not work, because the code snippet that called the jQuery method had to be loaded after the jquery.js file.

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

The difference between wp_enqueue_script () and wp_print_scripts () is that wp_enqueue_script () tells WordPress, "I need to use a JavaScript file on this page, so remember to load it." WordPress is handled in wp_head () by default, while we handle it in wp_footer () instead. Wp_print_scripts () outputs the required JavaScript file directly where you use this method, rather than adding it to the WordPress processing task.

If we use the

Directly output the jquery.js file (usually its compressed version of jquery.min.js), so even if other plug-ins or something uses

When you tell WordPress that you need to load the jquery.js,WordPress and process it in wp_footer (), you will also check to see if it already exists, and if you do, you won't reload it again.

four。 Conclusion

It is best to use the wp_enqueue_script () function to load JavaScript in WordPress to reduce problems and improve efficiency. If you don't have these special cases to deal with, it's obviously better to use Autoptimize, which completes the task fully and is easy to use.

Thank you for reading this article carefully. I hope the article "what are the plug-ins for JavaScript loading experience in WordPress" shared by the editor will be helpful to you. At the same time, I also hope you will support us and follow the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.