How to Fix Render Blocking Issue with Jetpack Devicepx Script?

Jetpack is an all in one plugin for your self-hosted WordPress site. It covers various modules from stopping brute force attack to view site stats. When we recently checked Google Page Speed Insights we have found a devicepx script from “s0.wp.com” is loaded on all the pages of the site. This script cause render blocking issue and Google will keep on showing this as high priority issue to remove this script.

We have tried with W3 Total Cache and Autoptimize with no use as this script is loaded from third party site which can’t be cached by the plugins running on our site. In this article let us check out what is this script, where does it come from and how to disable it to fix render blocking issue in Google PageSpeed Insights tool.

What is Jetpack Devicepx Script?

The exact script is https://s0.wp.com/wp-content/js/devicepx-jetpack.js which can be seen in PageSpeed Insights as below:

Now go to your site and navigate to “Plugins > Editor” section. Choose “Jetpack by WordPress.com” plugin and look for “class.jetpack.php” file. You can find this script is being called like below:

The complete code for calling the script is as below:

/**
* Device Pixels support
* This improves the resolution of gravatars and wordpress.com uploads on hi-res and zoomed browsers.
*/
function devicepx() {
if ( Jetpack::is_active() ) {
wp_enqueue_script( 'devicepx', 'https://s0.wp.com/wp-content/js/devicepx-jetpack.js', array(), gmdate( 'oW' ), true );
}
}

The purpose of the script of the script is very clearly written in the comment. It is required for showing high resolution gravatar and other images on retina and zoomed browsers. You can also open the script URL in a browser and see the function code is written to enlarge the images.

The Problem

The problem here is also clear. The script is called as soon as the jetpack is found active on the site. It is not part of any modules, so you can’t deactivate the script without deactivating the plugin. This issue is already open in Github.

There is also a debate that the script is loaded on the footer but Google showing it as render blocking as there is no asynchronous attribute for the script. Let us not delve into that debate. It is simple – you don’t need this script especially when you deactivated gravatar on your site.

How to Disable Jetpack Devicepx Script?

Go to “Appearance > Editor” and find “functions.php” file of your theme. Add the below piece of code at the end of the file and save your changes:

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

Now go back to Google PageSpeed and check the site. You should not see the script under render blocking issue. Remember, if you have disabled file editing from admin panel then you should use FTP to access “functions.php” file. Any modifications done in functions.php file will be wiped off whenever you update the theme. You can use child theme or additional plugins like Code Snippets to insert code in “functions.php” file.