[Plugin: W3 Total Cache] Defer JavaScript Parsing

There is no W3TC settings to do this.

There are a lot of tips available to do it manually when I searched the term “Defer parsing JavaScript to reduce blocking of page rendering” in Google.

Thanks Pothi – Yeah, before trying all those ‘manual’ options I wanted to be sure I was not missing a setting in W3TC.

Cheers

Additional options for this will come in a later release.

Sorry to piggyback this thread. I saw no point in creating another thread on the same topic. No spamming intended.

Dear Frederick, I have implemented your plugin on my site and it works awesome. I am using the latest version 0.9.2.4. I noticed that this thread is about 4 months ago, so i was just wondering if you might have already added the “defer the parsing of javascript” feature and if it hidden somewhere in the setting options coz I couldn’t find it. I checked the other tuts available on the web but some seemed risky and some are unnecessarily complicated.

P.S – Really thankful to you for such an efficient plugin. I have referring many people in my threads to use it.

i was just wondering if you might have already added the “defer the parsing of javascript” feature and if it hidden somewhere in the setting options coz I couldn’t find it.

@southcast This feature is not added yet.

Dear Pothi, very kind of you to give a feedback. I was suggested this code by someone in one of the non-wordpress forums. Code to be added
just before the end body tag.

<script defer="defer" type="text/javascript">
    window.onload=function(){
        var mycode;
        mycode=document.createElement("script");
        mycode.type="text/javascript";
        mycode.src="https://www.example.com/path/yourjavascriptfile.js";
        document.getElementsByTagName("head")[0].appendChild(mycode);
    }
</script>

I have put this code in my footer template as suggested and it seems to work but I am not very sure if that is the right place or the code is compatible to other browsers too. Please correct me if I am wrong. It helped to increase my page speed a bit though. Just asking to be sure about it. Will appreciate your response.

P.S – As the code has helped me a bit so I wanted to leave it here so others looking for an alternative could try this too.

Cheers.

I’m not too much into JS. I’m sorry. That’s why I’m looking forward to the next version of W3 Total Cache plugin too. ??

I need the defer option as well for JavaScript. My page is so slow even using your plugin.

I also get a message saying: The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources.

Could you also make your plugin set the expiration date for images?

I will share my observations which is currently working great for me. I will mention it here so that the others looking for similar alternatives could possibly make use of this. As of now my settings seem to be working great on chrome, IE9 latest and FF latest.

Firstly, there is a setting actually in W3Total using which we can minify a javascript. For this to work go to Performance – General settings – Minify – and Enable. Then go to Performance – Minify – JS – JS file management – and add whatever js files you want to. However, this method did not work for me as some of my scripts did not seem to work while minified. I have mentioned it here nonetheless, just because there is such option available.. if someone wants to try. It may work for others if not for me.

Secondly, I use FB-likebox, like button and Gplus like button and I noticed that these social plugins are the major contributors in pulling down my GPS {Google page speed ) and Yslow scores. But then thankfully i discovered that google and facebook both provide asynchronous code for lazy loading. So i went ahead and made use of that and It made a massive difference in my scores.
I have used this asynchronous scripts as following in the footer just above the </body>.

Since the forum rules does not allow more than ten lines of code, I had to put it in pastebin. You can find the complete code in pastebin, that which I currently use on my site.

For the facebook script to work you may want to put the following declaration into the header.

<xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:og="https://opengraphprotocol.org/schema/">

Now all you need to do is paste the following appropriate codes to your template wherever you want the buttons or boxes to render.

G-PLUS :

<div class="g"><div class="g-plusone" data-size="medium"></div>

FB :

<fb:like href="https://southcast.in/" layout="button_count" show_faces="false" width="100" height="21" action="like" colorscheme="light" font="trebuchet ms" allowTransparency="true"></fb:like>

I am no expert coder or anything but after applying these codes my scores are pretty good now as I also use other online tools to assess my site’s performance.

P.S – Do not forget to clean your cache one you have made the changes to see the results in the frontend. You may also want to test the changes in different environments because every browser uses unique parsing and rendering parameters.

If you guys email me I can send you the next release with support for this option.

I want it ^^. Are you the original developer?

Hi Frederick. Can ypu please send me the next release i would love to have this feature! Thanks!

I’d love a pre-release copy also. ichpen[at]gmail.com

Thanks Frederick.

I want it please ?? tendenciaselegantes gmail.com ur hotmail