Current location - Health Preservation Learning Network - Healthy weight loss - With fullpage plug-in, how to deal with the head and tail?
With fullpage plug-in, how to deal with the head and tail?
WordPress itself, as well as themes and plug-ins, usually need to load some JavaScript to realize some special functions. In order to ensure compatibility to the greatest extent and avoid JavaScript failure, JavaScript files are usually loaded at the page header. However, according to the suggestion of Yahoo Developer Forum, JavaScript should be loaded at the end of the page as much as possible to improve the display (response and rendering) speed of the page. According to the author's experience, this paper introduces several related plug-ins and explains how to load JavaScript in the header of some special pages. This paper briefly introduces several WordPress plug-ins that optimize JavaScript and their features, and then demonstrates how to deal with some special situations. 1. WordPress plug-ins that optimize JavaScript. I have used three plug-ins, WP Minify, Autoptimize, JavaScript to Footer. The following introduces their characteristics one by one. 1.WP Minify is a plug-in that integrates the Minify engine into WordPress. When enabled, the plug-in can merge and compress your JS and CSS files to improve the loading speed of the page. WP Minify can grab the JS/CSS files in the generated WordPress page and pass the file list to the Minify engine. After processing, the Minify engine returns an enhanced, simplified and compressed JavaScript or style sheet file (CSS) and replaces it with WP Minify in the WordPress header. Its main features are: easy to use; Effective for JavaScript, CSS and HTML; Provide debugging tools; Able to handle external JS and CSS files; Be able to exclude the specified JS and CSS files; Be able to specify the location (header or footer, or even other places) of JS and CSS files to be processed; You can add expiration time for processed JS and CSS files. When the beta version of WordPress 3. 1 came out, I found that WP Minify was not compatible, which would cause the website to load incorrectly. 2.Autoptimize may solve the incompatibility problem after upgrading WP Minify in the future, but I can't wait. Later, I found a plug-in Autoptimize with similar functions, and the operation of this plug-in is simpler. Autoptimize integrates, streamlines and compresses all JS and CSS files, and adds cache expiration flags. Then put the style sheet file in the header (also to improve the efficiency of page loading) and the JS file in the footer. It can also simplify the HTML code and make your page slim. However, I think the effect of slimming HTML pages is not obvious. As long as your server has the Gzip compression feature turned on, there is no need to do so. By default, automatic optimization optimizes all HTML/CSS/JavaScript, as described above. Personally, Autoptimize is a better WordPress optimization plug-in than WP Minify. 3.JavaScript to Footer is a very concise plug-in. I checked the source code, and the code to complete the task is only six WordPress functions (see the figure below), which is six lines. So this plug-in has been updated since it was created. I ignored it from the beginning, because the last time I saw it was on September 22, 2009. But it just optimizes the loading position of Javascript, that is, all JavaScript files correctly declared in WordPress are moved to the end of the page for loading. It does not handle HTML code and CSS style sheet files. According to the source code of JavaScript to Footer, it uses the following six lines of code to complete the work: 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, you can add the following code before the wp_head () function of a specific WordPress template to reverse the above process, even if it is invalid, and restore to the original loading position: 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 page templates. If they are all pages, disable the plug-in directly: D. How to use it. I believe that for most WPer, after reading the previous introduction, you will know how to choose the optimized plug-in you need and use it reasonably. It is 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 in order to save a little bandwidth (usually less than 1% when Gzip compression is turned on), you don't need to use the HTML reduction function; Do you have multiple CSS style sheet files loaded in your page? If not, there is no need to streamline and integrate CSS style sheets through plug-ins. Manually streamlining and integrating CSS style sheets is simpler and more effective than using plug-ins. Based on WordPress, JavaScript will be loaded in the header by default, and general WordPress websites need to optimize the loading position of JS. But if most of your pages still need to load JS at the page header to ensure that JS will not fail, then you can't do such optimization. In my opinion, WP Minify is unnecessary for the above reasons. Then the rest of Autoptimize and JavaScript to Footer can be used together (if they are used together, of course, the former uses HTML and CSS to simplify/integrate functions, and the latter uses JS position control functions, because the latter has only one function). I only need to control the loading position of JS, 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. 3. Handling special cases Although loading all JavaScript files at the end of the page is very helpful for the page loading speed, please note that the so-called end of the page refers to being called in the wp_footer () function of WordPress, which is usually located in