Speed ​​up jQuery loading in WordPress using CDN and AJAX_jquery

Are you sure you want to put it in the Head section?

In fact, the best situation is that js files should not be loaded in the 93f0f5c25f18dab9d176bd4f6de5d30e section, otherwise it will affect the loading speed of the head section and directly lead to a delay in loading the content (body) of the website. If you are sure that you do not need to load jQuery in the head section, please move the loading code before 36cc49f0c466276486e50c850b7e4956, to be precise, before the first javascript code that will use the jQuery function.

Of course, if you need to load jquery in the head part, please also ensure that all js files, including jquery, are placed after the code that calls the CSS file to achieve synchronous downloading. This is also the official recommendation given by Google. For example, the following loading is not recommended:

<script src=jquery.js></script>

<link href="style.css" .../>

Instead use:

<link href="style.css" .../>

<script src=jquery.js></script>

Are you sure you don’t want to load asynchronously?

Asynchronous loading will not block the loading of web pages, while non-asynchronous loading will briefly block the loading of web pages in the browser before loading the js itself. This may affect your browsing experience.

If your loading code is

<script type="text/javascript" src="jquery.js"></script>

Then you need to know that this is not asynchronous loading, this is a synchronous loading. If you don't need to call the jquery function in time after the page is loaded, you can use asynchronous loading to load jquery before the web page is loaded, which greatly speeds up the loading speed. This code looks like Google Analytics code.

(function(doc){

var j =doc.createElement("script");

j.type = "text/javascript"; j.async = true; j.src = "jquery.js";

var s = doc.getElementsByTagName("script")[0];

s.parentNode.insertBefore(j, s);

})(document);

But from my observation, most of the time we need to load synchronously, especially when you also need to introduce the jQuery plug-in.

Which version of jQuery to use?

Wordpress always comes with the latest jQuery library, and the usage of each version is always slightly different. The newer the jQuery version, the higher the performance improvement. However, some jquery plug-ins may not be compatible with new plug-ins, and they have not released updates themselves. Maybe some of the method functions you use are found to have been changed in the new version, and what used to work no longer works. In this case, the principle should be followed, which is to use the latest jQuery library as possible while ensuring compatibility.

For example, you used to use the 1.6.2 version of jquery, and now you find that some functions of 2. That's good. At this time, you can abandon 1.6.2 and replace the new version of 2.X with the 1.7.2 version of jQuery.

Which jQuery CDN library to use?

jQuery is just too big! If your website is not fast, jquery will definitely affect your page loading speed. Fortunately, Baidu, Sina, Microsoft, Google and other companies have launched public js libraries, which are convenient for website owners to call to shorten download time, and they have ultra-fast CDN servers, which saves download time.

The jquery library provided by Google is currently more commonly used:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Of course, Baidu’s domestic access speed cannot be underestimated:

<script type="text/javascript" src="//libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>

Sina’s CDN is also very fast:

<script type="text/javascript" src="//lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

If you don’t want to follow the trend, you can also choose Microsoft’s jquery CDN:

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>

You can directly change the version number that appears above to select a different version. Which one is the fastest? How to choose?

If your website has many visitors from overseas, it is recommended to choose Google. If the main visitors are from China, it is no problem to choose Baidu. However, Baidu's overseas access speed is not as fast as Google's.

And because most websites choose Google’s CDN, due to caching principles, Google’s CDN may be faster when visiting your website.

If you are not sure that your website download speed is fast, I suggest that it is best to use the above-mentioned public CDN to save loading time and traffic.

Do you really need to use jQuery?

If your website only needs a small function with jquery, why do you need to download such a large file? Why not jquery-free?

For example, you can consider zepto.js, whose design goal is to "maximize jQuery API compatibility with the smallest size". It's only 10KB after gzip compression.

In addition, jQuery has a module design, so you can choose only the modules you need. You can refer to jquery builder.

The correct way to load jQuery

Having said all that, what is the correct way to load jquery?

First choose which CDN, or your own website to host the js file, and determine whether the calling location is in the head or body. Let’s take Google’s jquery library as an example. The normal loading method is

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

However, Google’s services are intermittently interrupted in China, so I can take care of domestic visitors and write this:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

In this way, if jQuery fails to load successfully, Baidu's jquery library will be automatically loaded, making it foolproof.