How to Change Priority & Embed W3 Total Cache (W3TC) Minify CSS & JS at Different Position
One of the main feature of W3 Total Cache to improve the performance and increase the speed of WordPress-powered websites is by minifying the JS (JavaScripts) and CSS (Cascading Style Sheets) files. In addition to remove unnecessary or redundant data and characters such as white space, new line, comments, formatting and other characters not required for execution from the source code, W3TC also combines CSS and JS files together to reduce the call requests required and amount of render-blocking JS and CSS resources.
When W3TC minifies and combines JS and CSS files, it inserts the combined JS and CSS with different priority than the original JS or CSS. The sequence of which the JavaScript files and especially the Cascading Style Sheets are called and loaded in the HTML is important as in the case of JavaScript, some functions may be inter-dependent, while in the case of CSS, the later styles may override the previous.
W3 Total Cache embeds the combined and minified CSS file with the highest priority, i.e. the combined CSS is always located near the beginning of HTML header. Likewise for JS, W3TC tends to either insert the combined JavaScript to a location at the very beginning of HTML head and body, or at the very end of closing tag for HTML body.
W3TC does not have any option of its administration GUI to manage or change the priority for the insertion of minified CSS and JS through WordPress. However, it does provide several macro comment tags that will force the minified JS and/or CSS files to appear at the position where the tags are placed.
How you use these W3TC HTML comment tags to embed the combined JS and/or CSS files at the location and priority you prefer? Edit your active theme’s template (e.g. header.php, footer.php, single.php and whatever other PHP file that constructs the part of HTML where you want the JS and/or CSS to appear), and insert the the appropriate tag above at the location or position, then save the file.
Which tag should you use? In both auto or manual minify mode, W3TC will place the minified JS files in the following three embed location:
Embed in <head> Embed after <body> Embed before </body>
The priority or the actual position of the above JS embed location by placing their corresponding comment tags at your preferred location.
<!– W3TC-include-js-head –> (Embed in <head>) <!– W3TC-include-js-body-start –> (Embed after <body>) <!– W3TC-include-js-body-end –> (Embed before </body>)
The minified CSS is always embedded in HTML header near the beginning. To change the position, place the following comment tag at your preferred position.
LK is a technology writer for Tech Journey with background of system and network administrator. He has be documenting his experiences in digital and technology world for over 15 years.Connect with LK through Tech Journey on Facebook, Twitter or Google+.
