Use Microsoft Ajax Content Delivery Network (CDN) to optimize WordPress loading speed

Recently, we have been paying more attention to performance optimization. I had nothing to worry about last night. I just wanted to practice the performance optimization methods I learned in the last time.

Using Google Chrome's developer tool (this tool is very powerful, coupled with the pagespeed plug-in, the page performance optimization is very powerful), observed the loading speed of "Sweet Potato. Surprised to find that the loading time of the jquery class library is about 5 seconds. Why is it so high?

High-performance javascript: "Most browsers use a single process to process multiple tasks, such as UI updates and JavaScript running. At the same time, only one task can be executed. How long does JavaScript run? How long is the waiting time before the browser is idle and responds to user input. Basically speaking, this means that the appearance of the <SCRIPT> tag makes the entire page wait for parsing and running the script. No matter whether the actual JavaScript code is inline or contained in an unrelated external file, the page download and parsing process must be stopped. Wait until the script completes the processing before continuing ." After opening my website, it will take five seconds to continue. Such user experience is very poor.

Many studies have shown that the most satisfactory time for users to open a webpage is less than 2 seconds. The longest waiting period that the user can endure, in the range of 6 ~ Between 8 seconds. That is to say, 8 seconds is a critical value. If your website is opened for more than 8 seconds, most visitors will eventually leave you.

According to some sample surveys, visitors tend to think that websites with faster access speed are of higher quality, more credible, and more interesting. Correspondingly, the slower the webpage is to open, the stronger the psychological frustration of visitors, and the doubt on the credibility and quality of the website. (Refer to the psychology of webpage opening speed)

If such a poor performance problem occurs, it seems necessary to optimize it. The Optimization for Javascript is nothing more than using tools to compress the source code and enable gzip compression on the server. These have been done: the mini version of jquery used by WordPress by default; the gzip compression of the server has been enabled.

In addition, another effective optimization method is to use the CDN service. But ......

Here, the knowledge about CDN is briefly popularized:

CDN stands for content delivery network (CDN. The basic idea is to avoid bottlenecks and links on the Internet that may affect data transmission speed and stability, so that content transmission can be faster and more stable. A layer of smart virtual network formed by placing node servers in various parts of the network on the basis of the existing Internet, the CDN system can redirect users' requests to the nearest service node in real time based on the network traffic and connection, load status, distance to the user and response time of each node.. The aim is to allow users to obtain the desired content nearby, solve the problem of Internet congestion, and improve the response speed when users access the website. (Refer to content delivery network)

However, you cannot create a CDN service for your personal blog website. Therefore, you can only find some free CDN services.

As a matter of fact, Google has long known that Google has provided jquery and other popular JavaScript libraries through the Google Ajax library API (GALA. However, after testing, this service is as unstable as Google search. Cannot even open the home page. (The specific reason is not mentioned. Everyone knows .) It seems that we can only "make another plan. Then I searched and found that Microsoft actually provided the free jquery CDN service (for details, see Microsoft Ajax content delivery network ).

Then, I wrote a test to test the loading speed. The source code is as follows:

Help

123456789101112131415161718192021

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11">     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />     <title> Test Microsoft's CDN service </title>           <script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js'></script>       <script type='text/javascript'>         $(document).ready(function(){             $ ("# Iscompeleted"). Text ("loaded ");        });     </script>   </head> <body>     <a href="http://www.diguage.com/" target="_blank" id="isCompeleted"> Loading not completed </a> </body> </html>

 

It is found that the loading speed is about 500 milliseconds, which is about ten times faster than using the jquery library on my own website. Why is it easy ?!

Next, find out where the jquery library is loaded in WordPress.

In Wordpress, when a template or plug-in uses a class library, the wp_enqueue_script function is used to call the required class library. WordPress registers all the class libraries under the % wp_home %/WP-nodes des/JS directory. Therefore, you only need to modify the registration path to the jquery link provided by the Microsoft CDN service during registration. The registration of JavaScript libraries in WordPress is done in % wp_home %/WP-uplodes/script-loader.php. Therefore, make the following changes in line 120 (WordPress 3.4.1) of this file:

Help

123	// $ Scripts-> Add ('jquery ','/WP-nodes des/JS/jquery. js', false, '1. 7.1 '); // comment out the original one and make a backup.$scripts->add( 'jquery', 'http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js', false, null );

 

I see the source code of the site, loaded is the jquery-1.7.2.min.js. Therefore, select this version. In addition, if the last parameter is set to '1. 7.2 ', the URL in the <SCRIPT> tag on the page becomes ". js? Ver = 1.7.2 ". This parameter is not included when Javascript is used. In addition, if someone visits a website that also uses Microsoft's CDN service before accessing my website, if the previous website does not have this competition, and my website has, the jquery class library loads one side again to increase the user waiting time. It is unfavorable for improving user experience. (No example is written for testing. Is my guess .) Therefore, after my test, when null is passed, no "? Ver = 1.7.2 ", then null is passed.

After that, the webpage loading speed is increased by about 2-3 seconds. (The loading time of Microsoft's CDN service is not very stable. After many tests, the loading time is generally within 1 second .) I hope you can try it to increase the loading speed of our webpage.

References:

Use jquery of Google Ajax library API to replace WordPress's built-in jquery

WordPress optimization replaces WordPress native with jquery. js provided by SAE

Use the Google Ajax libraries API to replace the built-in JS library of WordPress