[Resolved] On deferring javascript

Home Forums Support [Resolved] On deferring javascript

Home Forums Support On deferring javascript

  • This topic has 5 replies, 3 voices, and was last updated 5 years ago by Hakim.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #230833
    Hakim

    Hi Tom,

    I am still trying to figure out how I deal with this javascript call which is blocking loading on some mobile phones.

    —————————
    Eliminate render-blocking JavaScript and CSS in above-the-fold content
    Your page has 1 blocking script resources. This causes a delay in rendering your page.
    None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
    Remove render-blocking JavaScript:

    https://inayatiorderaustralia.org/…-includes/js/jquery/jquery.js?ver=1.12.4

    —————————

    I have come up with this snippet to defer the javascript to allow page loading but it is written for Genesis framework.

    Is there any way this can be adapted to work on GP? And if there is, would functions.php need to be re-edited each time there was an upgrade?

    snippet begin:
    ——————————-
    /** Remove jQuery scripts from begining */
    add_action(‘wp_enqueue_scripts’, ‘wbxp_script_remove_header’);
    function wbxp_script_remove_header() {
    wp_deregister_script( ‘jquery’ );
    }

    /** Load jQuery script at the end */
    add_action(‘genesis_after_footer’, ‘wbxp_script_add_body’);
    function wbxp_script_add_body() {
    wp_register_script( ‘jquery’, ‘https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js’, false, null);
    wp_enqueue_script( ‘jquery’);
    }
    End Snippet:
    (defer-jquery.php hosted with ❤ by GitHub)
    —————————————————

    Any thoughts Tom?

    With thanks,
    Hakim

    #230938
    Tom
    Lead Developer
    Lead Developer

    Instead of genesis_after_footer you would put wp_footer.

    However, loading your jQuery file that low can/will break some plugins.

    This plugin might be more helpful: https://wordpress.org/plugins/async-javascript/

    #230979
    Hakim

    Thank you Tom. This works well.

    I must confess a bit of an anticlimax after trolling the web for almost two weeks trying to get a solution to this. So many searches with lots of not useful or unclear information and you nail it.

    With much gratitude!

    Hakim

    #231000
    Tom
    Lead Developer
    Lead Developer
    #231031
    Daniel

    Hi, just to tag onto this thread… I’m also trying to reduce / combine / defer javascript, as its the final bottleneck to speeding up my sites!

    Does this plugin do the job, or is there anything else you can point me to?

    Thanks – still loving GP and GP Premium!

    #231034
    Hakim

    Hi Daniel,

    After weeks of stuffing around with WP Supercache and Autoptimize, I switched to Cache Enabler -which works well with Autoptimize- (https://wordpress.org/plugins/cache-enabler/) which solved all my problems except that javascript issue. Async-Javascript took care of that straight away.

    I am now scoring 100/100 for speed on mobile and desktop on Google PageSpeed and 92% on Yslow perhaps because I am not using a CDN.

    The important thing is that mobiles can actually load the page now which was not happening before, even when Google and Yslow were giving me high scores. That Javascript just stopped the front page loading on mobiles.

    It is certainly worth trying.

    Hakim

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.