Optimize CSS and JavaScript in WordPress

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

WordPress is a powerful blogging program, but its themes and plug-ins often require CSS and JavaScript to implement its functions. Loading more complex themes or more plug-ins causes the site to slow down. Loading related CSS and JavaScript takes a lot of time, especially if many bloggers are using foreign hosts, optimizing CSS and JavaScript can reduce load time to a maximum extent.

CSS and JavaScript merge optimization

1, optimize the plug-in WP minify

WP Minify is the minify engine integrated 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. Generate a form like this to reduce the number of times a browser requests a server page URL.

2, manual why CSS and JavaScript

The method is very simple, that is, such as A.js, B.js, c.js ... The code in is copied in a file and saved as All.js. Will originally call A.js, B.js, c.js ... To replace the reference code:, after the original JS can be deleted

The only drawback to this method is that the merged file is too large to affect the loading speed.

Second, CSS and JavaScript loading location optimization

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.

1. Javascript to Footer Plugin

Install this plugin, can automatically put the head of JavaScript automatically loaded in footer, ensure normal use.

2. Manual adjustment

Using JavaScript to footer causes certain JS that must be loaded in the head to be placed in the footer, and there will be compatibility and display errors, so. We need to selectively load. The functions used are the same as those used by Wp_enqueue_script () and Wp_register_script (). We use Wp_enqueue_script () to do the example below.

function usage

Wp_enqueue_script (

$handle

, $SRC

, $deps

, $ver

, $in _footer

);

Parameter explanation:

$handle: Used to distinguish the JS name, that is, the identity string (string);

$SRC: JS file URL (string);

$deps: Loaded JS dependent on other JS identifier string array (array:string, not required);

$ver: JS version number, leave blank to use the current WP version number (string, not required);

$in _footer: Is loaded (Boolean, not required) at the bottom of the HTML page.

Instance：

function my_enqueue_scripts () {

if (!is_admin) {//foreground loaded script and style sheet

Remove a signed jquery script

Wp_deregister_script (' jquery ');

Registering jquery scripts

Wp_register_script (' jquery ', ' http://code.jquery.com/jquery.min.js ', Array (), ' latest ', false);

Commit to load jquery script

Wp_enqueue_script (' jquery ');

Registering Superfish scripts

Wp_register_script (' Superfish ', Get_template_directory_uri (). '/js/superfish.js ', Array (' jquery '), ' 1.2 ', false);

Submit Load Superfish Script

Wp_enqueue_script (' Superfish ');

Registering and loading custom scripts

Wp_enqueue_script (' Custom ', Get_template_directory_uri (). '/js/custom.js ', Array (' jquery '), ' 3.0 ', true);

else {//background loaded scripts and style sheets

Cancel loading jquery Script

Wp_dequeue_script (' jquery ');

Registering and loading jquery scripts

Wp_enqueue_script (' jquery ', ' http://code.jquery.com/jquery.min.js ', Array (), ' latest ', false);

}

}

Add callback function to init action

Add_action (' init ', ' my_enqueue_scripts ');

?>

It is particularly noted that the default value of $in_footer is false. If left blank or FALSE, the default JS is loaded in the header, and if true, it is displayed in footer.

Running the example above, only customs.js will be loaded in footer. Others are loaded in the head.

Iii. Summary

WordPress template features More and more powerful, we should try to use the many WordPress built-in template function tag, to achieve the theme or plug-ins of various functions. At the same time, we must avoid the possibility of modifying the WP kernel code.