WordPress.org

Ready to get started?Download WordPress

Forums

defer loading of javascript (12 posts)

  1. edyzen
    Member
    Posted 1 year ago #

    Hello world
    How to use these code below and where I must put these code ? :

    <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>

    I got that code from link below :
    https://developers.google.com/speed/docs/best-practices/payload#DeferLoadingJS

    I have trouble with this issue like this https://developers.google.com/speed/pagespeed/insights#url=www.propertypilihan.com&mobile=false&rule=DeferParsingJavaScript

    Can anyone help me ?

  2. gabrielcastillo
    Member
    Posted 1 year ago #

    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.

  3. edyzen
    Member
    Posted 1 year ago #

    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/Wzl37ULpBMA
    http://www.youtube.com/embed/7HHHcRxwge4
    http://www.youtube.com/embed/ulzAZeKf9Jw
    http://www.youtube.com/embed/OWhMLJNy2ms

    Where I put these suggestion pages?

  4. edyzen
    Member
    Posted 1 year ago #

    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;
  5. gabrielcastillo
    Member
    Posted 1 year ago #

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

  6. edyzen
    Member
    Posted 1 year ago #

  7. gabrielcastillo
    Member
    Posted 1 year ago #

    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./

  8. bassjobsen
    Member
    Posted 8 months ago #

    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!

  9. edyzen
    Member
    Posted 8 months ago #

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

  10. amitramani
    Member
    Posted 7 months ago #

    @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?

  11. bassjobsen
    Member
    Posted 7 months ago #

    @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

  12. amitramani
    Member
    Posted 7 months ago #

    @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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.