{"id":21779,"date":"2013-01-27T20:01:46","date_gmt":"2013-01-27T20:01:46","guid":{"rendered":"https:\/\/wordpress.org\/plugins-wp\/wp-deferred-javascripts\/"},"modified":"2016-09-01T08:54:21","modified_gmt":"2016-09-01T08:54:21","slug":"wp-deferred-javascripts","status":"publish","type":"plugin","link":"https:\/\/azb.wordpress.org\/plugins\/wp-deferred-javascripts\/","author":7706864,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"2.0.5","stable_tag":"2.0.5","tested":"4.6.30","requires":"3.0","requires_php":"","requires_plugins":"","header_name":"WP deferred javaScript","header_author":"Willy Bahuaud, Daniel Roch, Gr\u00e9gory Viguier","header_description":"","assets_banners_color":"52475a","last_updated":"2016-09-01 08:54:21","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"http:\/\/www.screenfeed.fr","header_author_uri":"https:\/\/wabeo.fr\/wp-deferred-js-authors.html","rating":3.2,"author_block_rating":0,"active_installs":900,"downloads":159209,"num_ratings":35,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":[],"upgrade_notice":[],"ratings":{"1":"11","2":"6","3":0,"4":"1","5":"17"},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":"974705","resolution":"128x128","location":"assets"},"icon-256x256.png":{"filename":"icon-256x256.png","revision":"974705","resolution":"256x256","location":"assets"}},"assets_banners":{"banner-772x250.jpg":{"filename":"banner-772x250.jpg","revision":"659847","resolution":"772x250","location":"assets"}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.5.2","1.5.3","1.5.4","1.5.5","1.5.6","2.0.0","2.0.1","2.0.2","2.0.5"],"block_files":[],"assets_screenshots":{"screenshot-1.jpg":{"filename":"screenshot-1.jpg","revision":"663726","resolution":"1","location":"assets"},"screenshot-2.jpg":{"filename":"screenshot-2.jpg","revision":"663726","resolution":"2","location":"assets"},"screenshot-3.jpg":{"filename":"screenshot-3.jpg","revision":"663726","resolution":"3","location":"assets"},"screenshot-4.jpg":{"filename":"screenshot-4.jpg","revision":"663726","resolution":"4","location":"assets"}},"screenshots":{"1":"Average load time of 1.91<\/strong> seconds without WP Deferred JavaScripts activated<\/strong> and scripts loaded in the header","2":"Average load time of 1.99<\/strong> seconds without WP Deferred JavaScripts activated<\/strong> and scripts queued in the footer","3":"Average load time of 1.56<\/strong> seconds with WP Deferred JavaScripts activated<\/strong> and scripts queued in the header","4":"Average load time of 1.54<\/strong> seconds with WP Deferred JavaScripts activated<\/strong> and scripts queued in the footer"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[68437,229,68438,187,247],"plugin_category":[52,54,59],"plugin_contributors":[80158,78484,80157],"plugin_business_model":[],"class_list":["post-21779","plugin","type-plugin","status-publish","hentry","plugin_tags-deferring","plugin_tags-javascript","plugin_tags-labjs","plugin_tags-optimization","plugin_tags-performance","plugin_category-performance","plugin_category-security-and-spam-protection","plugin_category-utilities-and-tools","plugin_contributors-confridin","plugin_contributors-greglone","plugin_contributors-willybahuaud","plugin_committers-confridin","plugin_committers-willybahuaud"],"banners":{"banner":"https:\/\/ps.w.org\/wp-deferred-javascripts\/assets\/banner-772x250.jpg?rev=659847","banner_2x":false,"banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/wp-deferred-javascripts\/assets\/icon-128x128.png?rev=974705","icon_2x":"https:\/\/ps.w.org\/wp-deferred-javascripts\/assets\/icon-256x256.png?rev=974705","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/wp-deferred-javascripts\/assets\/screenshot-1.jpg?rev=663726","caption":"Average load time of 1.91<\/strong> seconds without WP Deferred JavaScripts activated<\/strong> and scripts loaded in the header"},{"src":"https:\/\/ps.w.org\/wp-deferred-javascripts\/assets\/screenshot-2.jpg?rev=663726","caption":"Average load time of 1.99<\/strong> seconds without WP Deferred JavaScripts activated<\/strong> and scripts queued in the footer"},{"src":"https:\/\/ps.w.org\/wp-deferred-javascripts\/assets\/screenshot-3.jpg?rev=663726","caption":"Average load time of 1.56<\/strong> seconds with WP Deferred JavaScripts activated<\/strong> and scripts queued in the header"},{"src":"https:\/\/ps.w.org\/wp-deferred-javascripts\/assets\/screenshot-4.jpg?rev=663726","caption":"Average load time of 1.54<\/strong> seconds with WP Deferred JavaScripts activated<\/strong> and scripts queued in the footer"}],"raw_content":"\n

This plugin defer the loading of all JavaScripts added by the way of wp_enqueue_script()<\/code>, using LABJS. The result is a significant optimization of loading time.<\/p>\n\n

It is compatible with all WordPress JavaScript functions (wp_localize_script()<\/code>, js in header, in footer...) and works with all well coded plugins.<\/p>\n\n

If a plugin or a theme is not properly enqueuing scripts, your site may not work. Check this page: Function Reference\/wp_enqueue_script on WordPress Codex<\/a>.<\/p>\n\n

LABjs (Loading And Blocking JavaScript) is an open-source (MIT license) project supported by Getify Solutions<\/a>.<\/p>\n\n

We performed a range of tests to determine the potential benefit of loading time. On wabeo<\/a> we executed webwait<\/a> (150 calls by test). Result is this plugin could improve your loading time by 25%<\/strong>!!\nMore information in the Screenshots section<\/a>.<\/p>\n\n

You can find more information about WP Deferred JavaScripts<\/a> and technical information about asynchronous scripts<\/a> on authors blogs.<\/p>\n\n\n

    \n

  1. Upload the WP Deferred JavaScripts plugin to your blog and activate it.<\/p><\/li>\n

  2. Enjoy ^^<\/p><\/li>\n<\/ol>\n\n\n

    WP Deferred JavaScript includes some hooks. If you never used one of them, check this page<\/a>. It's better to use those filters in a plugin or a mu-plugin.<\/p>\n

    \n
    Exclude Scripts<\/dt>\n

    do_not_defer<\/em> is a filter that took as a parameter an array containing scripts that should be handle normally.<\/p>\n\n

    Here is an example:<\/p>\n\n

    \/\/ Normal script enqueue.\nadd_action( 'wp_enqueue_scripts', 'register_canvas_script' );\nfunction register_canvas_script() {\n    wp_register_script( 'my-canvas-script', 'http:\/\/exemple.com\/myscript.js' );\n    wp_enqueue_script( 'my-canvas-script' );\n}\n\n\/\/ Don't defer this script.\nadd_filter( 'do_not_defer', 'exclude_canvas_script' );\nfunction exclude_canvas_script( $do_not_defer ) {\n    $do_not_defer[] = 'my-canvas-script';\n    return $do_not_defer;\n}\n<\/code><\/pre>\n\n
    Since 2.0.3 you can also use the WP Deferred JS settings pannel!<\/strong><\/p><\/dd>\n
    Change LABJS URL<\/dt>\n
    wdjs_labjs_src<\/em> is a filter that allow you to change LabJS URL.\n ($lab_src, $lab_ver)<\/p>\n\n
    \/\/ for example, I need a specific version of LabJS\nadd_filter( 'wdjs_labjs_src', 'my_labjs_src', 10, 2 );\nfunction my_labjs_src( $src, $ver ) {\n    if ( '2.0' !== $ver ) {\n        \/\/ Hotlinking raw github is a bad practice, I did it just for the lulz.\n        return 'https:\/\/raw.githubusercontent.com\/getify\/LABjs\/edb9fed40dc224bc03c338be938cb586ef397fa6\/LAB.min.js';\n    }\n    return $src;\n}\n<\/code><\/pre><\/dd>\n
    HTML5 compatibility<\/dt>\n
    If you use HTM5, wdjs_use_html5<\/code> is a filter that remove the type=\"text\/javascript\"<\/code> attribute. You can use it this way:<\/p>\n\n
    add_filter( 'wdjs_use_html5', '__return_true' );\n<\/code><\/pre><\/dd>\n
    Change a script URL<\/dt>\n
    wdjs_deferred_script_src<\/em> can be used to change the way one of the script is loaded. For example:<\/p>\n\n
    \/\/ Here, I need to add information about the charset.\nadd_filter( 'wdjs_deferred_script_src', '', 10, 3 );\nfunction change_my_script_src( $src_string, $handle, $src ) {\n    \/\/ $src_string -> .script(\"http:\/\/exemple.com\/myscript.js?v=2.0\")\n    \/\/ $handle -> my-script\n    \/\/ $src -> http:\/\/exemple.com\/myscript.js?v=2.0\n    $out = array( 'src' => $src, 'charset' => 'iso-8859-1' );\n    return '.wait(' . json_encode( $out ) . ')';\n}\n<\/code><\/pre><\/dd>\n
    How to execute a code right after script loading<\/dt>\n
    You may need to execute a script right after its loading. You can use wdjs_deferred_script_wait<\/em> filter to do it.<\/p>\n\n
    add_action( 'wdjs_deferred_script_wait', 'after_my_script', 10, 2 );\nfunction after_my_script( $wait, $handle ) {\n    if ( 'my-script' === $handle ) {\n        $wait = 'function(){new MyScriptObject();}';\n    }\n    return $wait;\n}\n<\/code><\/pre><\/dd>\n
    Execute a function when all scripts are loaded<\/dt>\n
    You may have to use inline JavaScript in your footer. If that's the case, you will have to use that last hook to make it compatible with WP Deferred JavaScripts.<\/p>\n\n
    You will have to wrap this inline JS into a new function. Then, you will have to use wdjs_before_end_lab<\/em> to execute it.<\/p>\n\n
    \/\/ This is a fake function that we are wrapping in a new function\nadd_filter( 'before_shitty_plugin_print_js', 'wrap_this_code' );\nfunction wrap_this_code( $code ) {\n    return 'function PluginShittyCode(){' . $code . '}';\n}\n\nadd_filter( 'wdjs_before_end_lab', 'call_shitty_code' );\nfunction call_shitty_code( $end ) {\n    $end .= '.PluginShittyCode()';\n    return $end;\n}\n<\/code><\/pre><\/dd>\n\n<\/dl>\n\n\n
    2.0.5<\/h4>\n\n