• Resolved kiruthigarani2308

    (@kiruthigarani2308)


    We are trying to eliminate render blocking issue for our site performance. We are using W3TC plugin for this.
    My questions are:
    1. In our plugin, there is no JS File management option. Is it available in paid version?
    2. we are loading the JS and CSS files from CDN, So what is the procedure for adding CDN file paths in JS File Management Add Script section.
    Note : CDN versions will be changed once we are doing changes in the files and uploaded in servers.

    Please help us to solve this

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter kiruthigarani2308

    (@kiruthigarani2308)

    Please help us to solve this

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @kiruthigarani2308

    Thank you for your inquiry and I am happy to assist you with this.
    The JS File management option is available in Manual minify mode. SO you need to Enable minify in Performance>General settings and select the Manual radio button, save all settings and purge the cache. After that, you will be able to add scripts manually in Performance>Minify.
    Once the JS and CSS files are minified you need to purge the CDN so new files can be uploaded and served from the CDN.
    Thank you!

    Thread Starter kiruthigarani2308

    (@kiruthigarani2308)

    Ok Thanks for your reply. It helps!!!

    Our URL will be like https://xxxxxx/xxx/v1.1.10/css/style.css. So once we update the changes in these files, v1.1.11 will be changed. So in this situation how we can add the static CDN file path.

    Thread Starter kiruthigarani2308

    (@kiruthigarani2308)

      We don’t have our theme name in theme section
      when we add our library files says jquery.js in add script box, sites get breaks. jQuery not defined error throws.
      when we add our library files says style.css, design gets broken.

    Please help us to solve.

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @kiruthigarani2308

    Manual minify can be a tricky process. This is because all the scripts need to be added manually and in proper order.
    It also requires a lot of testing and reorganizing the scripts for the best performance. Some scripts do not agree with being minified and some of them need to be put before or after other scripts. There is no one solution for all as every website is using different themes, plugins, and resources.
    Here is an example:
    JS
    JS minify settings:
    Check on this check-box to enable
    Before </head>:
    Select Minify and Default (blocking)
    This will instruct the 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 the browser to load inline Javascript in parallel without stopping page processing.
    Before </body>:
    Select Minify and Default (blocking)
    This will instruct the browser to stop rendering and load the Javascript files that are located before HTML </body> tag and run the code.

    JS file management:
    Theme:
    Select your theme

    CSS
    CSS minify settings:
    Click on Enable check-box.
    Leave other settings unchecked.
    @import handing:
    Select None in the drop-down.
    CSS file management:
    Theme:
    Select your theme

    W3 Total Cache can automatically detect scripts. Though it’s not automatically added to those URLs. Therefore, you have to manually add each of them. At the top of this page, you can see the “Help” button. Click on that button to add available JS and CSS files for modifications and combine them. If you don’t add any URL, it will not minify your site’s JS and CSS (only in manual mode).
    After clicking on that button you can see “Minify: Help Wizard”. Check each JS and CSS file that you want. In this step don’t select script URLs which are contained “.min.css”, “.min.js” name at the end. Because they are already optimized and may break if added to minify.
    Once added all the files, URL’s click “Apply and Close”
    Now scroll down the Minifier javascript section and remove each URL query parameter. For an instance in this URL “wp-includes/js/jquery/jquery.js?sadfswg” you have to remove ?sadfswg. In another word, you have to specify direct links to each script file.
    Take note of the file sequence, jquery.js will always be the first to load, or you will get script errors.

    Follow the above URL query removal process for CSS files. Then click on the “Save All Settings” button. Now you have enabled W3 Total cache plugin manual minify.
    Now your site should work as expected. If there’s any issue remove added each JS and CSS one by one and identify the issue.
    Thank you!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Eliminate render blocking – files are loading from cdn – js file management’ is closed to new replies.