W3 Total Cache : Javascript and CSS resource optimization with Customizr ( classical style )

(N.B. If you have the modern style enabled, please refer to this documentation)

JS

  1. JS minify settings:
    • Check on this check-box to enable
    • Before </head>:
      • Select Minify and Default (blocking)
      • This will instruct browser to stop rendering and load the Javascript files that are located before HTML </head> tag and run the code.
    • After <body>:
      • Select Minify and Non-blocking using "defer"
      • This will instruct browser to load inline Javascript in parallel without stopping page processing.
    • Before </body>:
      • Select Minify and Default (blocking)
      • This will instruct browser to stop rendering and load the Javascript files that are located before HTML </body> tag and run the code.

  2. JS file management:
    • Theme:
      • Select Customizr or Customizr Pro from the drop-down
    • Click on Add a script button, and you will see a set of inputs.

    • Enter the following contents into the inputs, repeat for all the Javascript files listed below.
    • Take note of the customizr folder name, if using Customizr Pro Theme, the folder name will be customizr-pro.
    • Take note of the file sequence, jquery.js will always be the first to load, or you will get script errors.
    File URI: Template: Embed Location:
    wp-includes/js/jquery/jquery.js All Templates Embed in <head>
    wp-includes/js/jquery/jquery-migrate.min.js All Templates Embed in <head>
    wp-includes/js/jquery/ui/core.min.js All Templates Embed in <head>
    wp-content/themes/customizr/inc/assets/js/tc-scripts.min.js All Templates Embed after <body>
    wp-content/themes/customizr/inc/assets/js/holder.min.js All Templates Embed after <body>
    wp-content/themes/customizr/inc/assets/js/modernizr.min.js All Templates Embed after <body>
    wp-content/themes/customizr/inc/assets/js/fancybox/jquery.fancybox-1.3.4.min.js All Templates Embed after <body>
    wp-includes/js/wp-emoji-release.min.js All Templates Embed after <body>
  3. Click on Save all Settings button, after you have done adding the above file links.
    You will see something similar to the following screenshot.


CSS

  1. CSS minify settings:
    • Click on Enable check-box.
    • Leave other settings unchecked.

  2. @import handing:
    • Select None in the drop-down.
  3. CSS file management:
    • Theme:
      • Select Customizr or Customizr Pro from the drop-down
    • Click on Add a style sheet button, and you will see a set of inputs.
    • Enter the following contents into the inputs, repeat for all the Stylesheet files listed below.
    • Take note of the customizr folder name, if using Customizr Pro Theme, the folder name will be customizr-pro.
    • Take note of the file sequence.
    • The following are an example of the font and color scheme that was set on our test site. You need to view your HTML source for your actual list of stylesheet URLs.

    File URL
    Embed Location
    http://fonts.googleapis.com/css?family=Fjalla+One:400|Cantarell:400 All Templates
    wp-content/themes/customizr/inc/assets/css/blue3.min.css All Templates
    wp-content/themes/customizr/inc/assets/css/tc_common.min.css All Templates
    wp-content/themes/customizr/inc/assets/js/fancybox/jquery.fancybox-1.3.4.min.css All Templates
    wp-content/themes/customizr/style.css All Templates
  4. Click on Save all Settings button, after you have done adding the above file links.
    You will see something similar to the following screenshot.

That's all for the setup. Remember to switch off preview mode if you have set it in WordPress admin -> Performance -> General Settings -> General -> Preview mode.