Support » Plugin: Autoptimize » Remove render-blocking JavaScript: devicepx-jetpack.js

  • Resolved Scamaz

    (@scamazdid911)


    Not sure what the cause is but in the last week I’ve started getting an “Eliminate render-blocking JavaScript and CSS in above-the-fold content” warning from Pagespeed Insights.

    Remove render-blocking JavaScript:
    https://s0.wp.com/wp-content/js/devicepx-jetpack.js

    Prior to this was getting a 98 rating mobile/desktop. Have not changed anything in Autoptimize or any other plugins.

    Any ideas why this issue just popped up?

Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Author Frank Goossens

    (@futtta)

    that’s jetpack phoning home 🙂

    ao can’t optimize that, as it’s on a 3rd party server.

    no idea why is would only pop up now, maybe you changed something in jetpack’s config?

    frank

    Scamaz

    (@scamazdid911)

    Yeah I figured I’d give you a try first because I honestly don’t expect much help from Jetpack regarding the issue.

    Didn’t change anything in Jetpack config. I know their latest update seems to have a ton of issues from reading through their support forum, but didn’t see anything related to this.

    It’s just killing me because I spent the last month getting that 98 on pagespeed 😛

    /*Function to defer or asynchronously load scripts not aggregated by Autoptimize*/
    function js_async_attr($tag){
    
    # Do not add defer or async attribute to these scripts
    $scripts_to_exclude = array('script1.js', 'script2.js', 'script3.js');
     
    foreach($scripts_to_exclude as $exclude_script){
    	if(true == strpos($tag, $exclude_script ) )
    	return $tag;	
    }
    
    # Defer or async all remaining scripts not excluded above
    return str_replace( ' src', ' defer="defer" src', $tag );
    }
    add_filter( 'script_loader_tag', 'js_async_attr', 10 );

    defer="defer" can also be async="async"

    🙂

    Be well,
    AJ

    Oops, forgot. Add this with Code Snippets or to functions.php. The code will work for all properly enqueued scripts.

    AJ

    Plugin Author Frank Goossens

    (@futtta)

    nice AJ 🙂

    I coincidentally saw this yesterday;

    
    function jeherve_dequeue_devicepx() {
        wp_dequeue_script( 'devicepx' );
    }
    add_action( 'wp_enqueue_scripts', 'jeherve_dequeue_devicepx' );

    might help as well 😉

    Scamaz

    (@scamazdid911)

    Thanks guys.

    Just an FYI, Jetpack response to my post in their support forum was:

    It’s surprising; this file is normally loaded in the footer so it would always load after your content.

    Could you post your site URL here, so I can have a look?

    Sent them my url but still haven’t heard anything beyond the initial response.

    Anyway, just tried Frank’s code and it worked fine. What would be the difference between the two?

    Plugin Author Frank Goossens

    (@futtta)

    What would be the difference between the two?

    “my” code simply removes device-px.js (which can impact retina image display as per the post where I found the snippet), whereas AJ’s leaves the script in place, but adds an async (or defer) attribute to it which makes it non-render-blocking.

    Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    that’s jetpack phoning home 🙂

    Just to clarify, there is no data sent in that process. 🙂 The file is only used to replace image URLs on the site, when the visitor uses a Retina or HiDPi device.

    no idea why is would only pop up now, maybe you changed something in jetpack’s config?

    That’s indeed the weird part; I don’t really understand why Pagespeed would complain about “render-blocking JavaScript and CSS in above-the-fold content” when the file is loaded in the footer, after all the content.

    Plugin Author Frank Goossens

    (@futtta)

    Just to clarify, there is no data sent in that process. 🙂 The file is only used to replace image URLs on the site, when the visitor uses a Retina or HiDPi device.

    thanks for clarifying @jeherve!

    I don’t really understand why Pagespeed would complain about “render-blocking JavaScript and CSS in above-the-fold content” when the file is loaded in the footer, after all the content.

    I guess because GPSI only considers JS as non-blocking if it has the defer or async attribute, even if there’s not a lot left to render (although one may suspect browser rendering somehow kicks into higher gear upon seeing the closing HTML-tag, no idea if this is the case though).

    Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    I guess because GPSI only considers JS as non-blocking if it has the defer or async attribute, even if there’s not a lot left to render

    Oh, that’s interesting! In this case @scamazdid911, @ajm_1976‘s snippet above should work just fine. If you don’t need Retina image handling on your site, you can also remove the script altogether with the snippet Franck pasted above.

    Sent them my url but still haven’t heard anything beyond the initial response.

    One of my colleagues should get back to you soon, although if you sent them a link to the thread you started in the Jetpack support forums, they’ll see that this problem is now solved. 🙂

    Hi folks,

    A couple things —

    1.) From PageSpeed Insights’ FAQ:

    PageSpeed Insights’ analysis does not use real devices. PageSpeed Insights fetches a site with a webkit renderer (the same rendering engine that powers Chrome and Safari) that emulates both mobile device and desktop devices.

    Overly simplified translation: This sh!t ain’t real, yo. So always use WebPageTest.org to verify/falsify PSI’s claims of render blocking resources.

    2.) Enqueuing JavaScript in the footer is no guarantee that it won’t block rendering. If for example Chrome thinks a JavaScript file enqueued in the footer is necessary to properly parse a page’s above the fold content, that file will indeed block rendering unless the defer or async attribute is present. On extremely rare occasions it will even ignore those.

    Be well,
    AJ

    Scamaz

    (@scamazdid911)

    Thanks for everyone’s help and input. Decided to go with AJ’s code.

    Hi Jeremy and Frank,
    the code you provided does not remove devicepx.js from the WP back-end (only from the front-end).

    function jeherve_dequeue_devicepx() {
        wp_dequeue_script( 'devicepx' );
    }
    add_action( 'wp_enqueue_scripts', 'jeherve_dequeue_devicepx' );

    The code to completely remove, also in the back-end, is:

    function remove_devicepx() {
        wp_dequeue_script( 'devicepx' );
    }
    add_action( 'wp_enqueue_scripts', 'remove_devicepx');
    add_action( 'admin_enqueue_scripts', 'remove_devicepx' );
Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Remove render-blocking JavaScript: devicepx-jetpack.js’ is closed to new replies.