WordPress.org

Support

Support » How-To and Troubleshooting » defer loading of javascript

defer loading of javascript

Viewing 11 replies - 1 through 11 (of 11 total)
  • you could wrap this in a function within your functions.php file and add_action to wp_head, or you could enter the code in your header.php file within the head tag.

    functions example:

    function add_downloadJSAtOnload_script(){
    echo '
    
    <script type="text/javascript">
    
    // Add a script element as a child of the body
    function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "deferredfunctions.js";
    document.body.appendChild(element);
    }
    
    // Check for browser support of event handling capability
    if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
    
    </script>
    
    ';
    
    }
    
    add_action('wp_head', 'add_downloadJSAtOnload_script');

    This would be placed in the functions.php file of your wp install. Like I said you could also load this within the header.php file in the

    <head>
    
    </head>

    section.

    Thanks your idea gabrielcastillo
    But I don’t understand about ” Here’s an example (where “deferredfunctions.js” contains the functions to be lazily loaded)”

    These is suggestion for my page :

    978.5KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.

    http://s.ytimg.com/yts/jsbin/html5player-vflR_cX32.js
    http://s.ytimg.com/yts/jsbin/html5player-vflR_cX32.js
    http://s.ytimg.com/yts/jsbin/html5player-vflR_cX32.js
    http://s.ytimg.com/yts/jsbin/html5player-vflR_cX32.js
    http://s.ytimg.com/yts/jsbin/www-embed-vflqDUnF8.js
    http://s.ytimg.com/yts/jsbin/www-embed-vflqDUnF8.js
    http://s.ytimg.com/yts/jsbin/www-embed-vflqDUnF8.js
    http://s.ytimg.com/yts/jsbin/www-embed-vflqDUnF8.js
    http://w.sharethis.com/share4x/js/st.dbe26be4459b4d0dd4547c53315a8e0a.js
    http://w.sharethis.com/widget/?wp=4959
    http://edge.sharethis.com/share4x/index.c2670ee4b52a2b88a02bd11172df6393.html
    http://seg.sharethis.com/getSegment.php?purl=http%3A%2F%2Fwww.propertypilihan.com%2F&jsref=&rnd=1365767887820
    
    
    
    http://www.youtube.com/embed/OWhMLJNy2ms

    Where I put these suggestion pages?

    I try use such as below , but this is fail . Any idea ?

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

    <script type="text/javascript">
    
    // Add a script element as a child of the body
    function downloadJSAtOnload() {
    var element = new array(document.createElement("script"););
    element[0].src="http://s.ytimg.com/yts/jsbin/www-embed-vflqDUnF8.js"; element[1].src="http://w.sharethis.com/share4x/js/st.dbe26be4459b4d0dd4547c53315a8e0a.js";
    element[2].src="http://www.propertypilihan.com/wp-includes/js/jquery/jquery.js?ver=1.8.3";
    element[3].src="http://w.sharethis.com/widget/?wp=5344";
    element[4].src="http://www.propertypilihan.com/wp-content/plugins/nextgen-gallery/js/jquery.cycle.all.min.js?ver=2.9995"; element[5].src="http://www.propertypilihan.com/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.js?ver=1.3.3"; element[6].src="http://www.propertypilihan.com/wp-content/plugins/nextgen-gallery/js/ngg.slideshow.min.js?ver=1.06"; element[7].src="http://edge.sharethis.com/share4x/index.c2670ee4b52a2b88a02bd11172df6393.html"; element[8].src="http://seg.sharethis.com/getSegment.php?purl=http%3A%2F%2Fwww.propertypilihan.com%2F&jsref=&rnd=1365957623937";
    element[9].src="http://www.youtube.com/embed/Wzl37ULpBMA";
    element[10].src="http://www.youtube.com/embed/7HHHcRxwge4";
    element[11].src="http://www.youtube.com/embed/ulzAZeKf9Jw";
    element[12].src="http://www.youtube.com/embed/OWhMLJNy2ms";
    document.body.appendChild(element);
    }
    
    // Check for browser support of event handling capability
    if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;

    What is the link to you site so I can check the load myself.

    Ok… so you inserted the wrong code in your javascript.. but that dont matter. The only js files I would worrie about is:

    http://www.propertypilihan.com/.../shutter-reloaded.js?...
        http://www.propertypilihan.com/.../jquery.js?...
        http://www.propertypilihan.com/.../jquery.cycle.all.min.js?...
        http://www.propertypilihan.com/.../ngg.slideshow.min.js?...

    Here is a report from firebug and yslow. Link

    if you are going to use the script function you need to enter the path for the javascript file. Something like:

    elements.src="<?php bloginfo('template_directory');?>js/jquery.js"

    The over all grade was a B. This is a good grade. Could be better.

    The youtube links can not be included in the script because they are using embedded javascript./

    Hello,

    I wrote a plugin which do this, see: https://github.com/bassjobsen/wp-defer-loading

    Please test it (won’t change any of your files or settings) and post your issues here: https://github.com/bassjobsen/wp-defer-loading/issues

    Thanks!

    Thanks your plugin,
    Already post issues in :
    https://github.com/bassjobsen/wp-defer-loading/issues/7

    amitramani

    @amitramani

    @bassjobsen
    I tried installing your plugin. After I activated it, all the Javascript code started showing up on the page itself before the main content was rendered.
    What am I doing wrong?

    I have WordPress 3.6.1 with WooCommerce plugin, along with Flatsome theme.

    Any ideas?

    bassjobsen

    @bassjobsen

    @amitramani thanks for posting your issue. I can’t test with the Flatsome theme cause there is no free version available.
    Most cases you don’t do anything wrong. Themes and plugin not always enqueue their code proper, see also: http://bassjobsen.weblogs.fm/wordpress-development-properly-load-javascript-set-dependency/

    Only one of the used plugin could break the defer loading.

    Also there will be reported a difference between apache and ngnix, see: https://github.com/bassjobsen/wp-defer-loading/issues/11

    amitramani

    @amitramani

    @bassjobsen
    Sorry for the late reply. Any idea where in the theme code I can check for this? Maybe I can tweak the I would like to see if this defering of JS makes a big performance impact.

    Appreciate your help.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘defer loading of javascript’ is closed to new replies.
Skip to toolbar