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.

    Thread Starter edyzen

    (@edyzen)

    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.

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



https://www.youtube.com/embed/OWhMLJNy2ms

    Where I put these suggestion pages?

    Thread Starter edyzen

    (@edyzen)

    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="https://s.ytimg.com/yts/jsbin/www-embed-vflqDUnF8.js"; element[1].src="https://w.sharethis.com/share4x/js/st.dbe26be4459b4d0dd4547c53315a8e0a.js";
element[2].src="https://www.propertypilihan.com/wp-includes/js/jquery/jquery.js?ver=1.8.3";
element[3].src="https://w.sharethis.com/widget/?wp=5344";
element[4].src="https://www.propertypilihan.com/wp-content/plugins/nextgen-gallery/js/jquery.cycle.all.min.js?ver=2.9995"; element[5].src="https://www.propertypilihan.com/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.js?ver=1.3.3"; element[6].src="https://www.propertypilihan.com/wp-content/plugins/nextgen-gallery/js/ngg.slideshow.min.js?ver=1.06"; element[7].src="https://edge.sharethis.com/share4x/index.c2670ee4b52a2b88a02bd11172df6393.html"; element[8].src="https://seg.sharethis.com/getSegment.php?purl=http%3A%2F%2Fwww.propertypilihan.com%2F&jsref=&rnd=1365957623937";
element[9].src="https://www.youtube.com/embed/Wzl37ULpBMA";
element[10].src="https://www.youtube.com/embed/7HHHcRxwge4";
element[11].src="https://www.youtube.com/embed/ulzAZeKf9Jw";
element[12].src="https://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.

    Thread Starter edyzen

    (@edyzen)

    MY website is https://www.propertypilihan.com

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

    https://www.propertypilihan.com/.../shutter-reloaded.js?...
    https://www.propertypilihan.com/.../jquery.js?...
    https://www.propertypilihan.com/.../jquery.cycle.all.min.js?...
    https://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!

    Thread Starter edyzen

    (@edyzen)

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