Optimize CSS and JavaScript in WordPress

 

WordPress is a powerful blog program, but its themes and plug-ins usually require some CSS and Javascript to implement its functions. Loading more complex themes or more plug-ins slows down the website. Loading related CSS and Javascript takes a lot of time, especially when many bloggers use foreign hosts. Optimizing CSS and Javascript can minimize the loading time.

I. CSS and Javascript merge optimization

1. optimized the WP Minify plug-in.

Wp Minify integrates the Minify engine into WordPress. Once enabled, this plug-in can merge and compress your JS and CSS files to speed up page loading. Generate a file similar to that of the original js file. After the file is generated, delete the original js file.

The only drawback of this method is that the merged file is too large, which affects the loading speed.

Ii. Optimization of CSS and Javascript Loading Locations

To maximize compatibility and avoid Javascript invalidation, Javascript files are usually loaded in the page header. However, according to the suggestions of the Yahoo Developer Forum, loading Javascript should try to increase the page display (response and rendering) speed at the end of the page.

1. Javascript to Footer plug-in

Install this plug-in to automatically load Javascript in the header to footer to ensure normal use.

2. manual adjustment

When Javascript to Footer is used, some Javascript codes that must be loaded in the header are put together in footer, which may cause compatibility and display errors. We need to perform loading selectively. The wp_enqueue_script () and wp_register_script () functions use the same structure. The following uses wp_enqueue_script () as an example.

Function usage

Wp_enqueue_script (

$ Handle

, $ Src

, $ Deps

, $ Ver

, $ In_footer

);

Parameter description:

$ Handle: used to differentiate the JS name, that is, the identifier string (string );

$ Src: JS File URL (string );

$ Deps: Other js id strings dependent on the loaded JS (array: string, optional );

$ Ver: JS version number. If it is left empty, the current WP version number is used (string, not required );

$ In_footer: whether to place it at the bottom of the HTML page for loading (boolean, not required ).

Instance:

　　

Function my_enqueue_scripts (){

If (! Is_admin) {// scripts and style sheets loaded on the foreground

// Remove registered jquery scripts

Wp_deregister_script ('jquery ');

// Register the jquery script

Wp_register_script ('jquery ', 'HTTP: // code.jquery.com/jquery.min.js', array (), 'lastest', false );

// Submit the jquery script for loading.

Wp_enqueue_script ('jquery ');

// Register the superfish script

Wp_register_script ('superfish ', get_template_directory_uri ().'/js/superfish. js', array ('jquery '), '1. 2', false );

// Submit the superfish script.

Wp_enqueue_script ('superfish ');

// Register and load the custom Script

Wp_enqueue_script ('custom', get_template_directory_uri (). '/js/customm. js', array ('jquery'), '3. 0', true );

} Else {// scripts and style sheets loaded in the background

// Cancel jquery Script Loading

Wp_dequeue_script ('jquery ');

// Register and load the jquery script

Wp_enqueue_script ('jquery ', 'HTTP: // code.jquery.com/jquery.min.js', array (), 'lastest', false );

}

}

// Add the callback function to the init action

Add_action ('init ', 'My _ enqueue_scripts ');

?>

Note that the default value of $ in_footer is false. If it is left blank or false, js is loaded in the header by default. If it is true, it is displayed in footer.

Run the preceding example. Only customs. js will be loaded in footer. All others are loaded in the header.

Iii. Summary

WordPress templates are becoming more and more powerful. We should try to use the many built-in template function labels of WordPress to implement various functions of themes or plug-ins. At the same time, we must avoid the possibility of modifying the WP kernel code.