How To Dequeue A Script Or Style In WordPress Only For Mobile Devices

This post is for my speed guru’s who want to make their template, plugin, or website even faster. You found out that you should only load scripts and styles that you are actually using. More importantly, you should only load the scripts and styles on pages where they are needed. Previously, I have shown how to hide the sidebar on mobile devices, which is a common way to improve website performance, speed, and overall mobile user experience.

Today, we are going to address a common issue in WordPress. This common issue is how to dequeue a script or style in WordPress from loading on mobile devices. Why would I want to do that, if I want the user experience to remain consistent across all platforms? Or I already combined all these files and my website is loading quickly according to GTmetrix or Page Speed Insights?

Good for you. If you do not see the value in this, then do not read any further. Only kidding, let me explain why you would want to remove scripts and styles from loading on mobile devices!

When Would I Ever Want To Do This?

There are many scenarios where certain files, particularly JavaScript files , are loaded where they have zero impact for mobile users. For example, if your theme comes with a script to make the sidebar “sticky,” meaning it follows you, you will notice that on mobile this script does nothing. This is quite obvious since the sidebar can’t follow you on mobile. 9/10 times it is just stuffed underneath the rest of the content in your responsive design. So I ask you, why are you loading it at all?

Let’s walk through how this works.

• Downloading the JavaScript files only takes a few milliseconds.
• Then your browser tries to execute the JavaScript code. It goes nowhere.
• Mobile device’s time and data is wasted. (Unless you are one of the lucky ones with unlimited data)

There are many ways of removing the scripts and styles from loading on mobile devices. However, I am going to show you the easiest way. I will also show you an alternative way using an additional PHP script. It works under the same principle as the first one. So let’s jump in.

The Quick & Easy Way To Dequeue A Script Or Style In WordPress

We are going to make use of the dreaded wp_is_mobile function. Put your pitchforks down, developers. You won’t need them. I understand the issues with detecting user agents and that xyz can happen. I know it only works for like 90% of devices, but just be patient. Let me explain.

Below will be an example with proper documentation. Add this to one of the following places:

• functions.php file
• site-specific plugin

function conditional_mobile_styles_scripts() {
  // First check that wp_is_mobile didn't disappear for some reason
  if ( function_exists( 'wp_is_mobile' ) ) {
    //dequeue scripts and styles if it's for a mobile device. 
    if ( wp_is_mobile() ) {
      wp_dequeue_style( 'whatever-css' );
      wp_dequeue_script( 'whatever-js' );
    }
  }
}
add_action( 'wp_enqueue_scripts', 'conditional_mobile_styles_scripts', 99 );

Now you can add whatever script and style that you would like. The script and style will not be loaded if the device is detected as a mobile device. Your precious bytes will be saved too.

I am going to show you an alternative using a companion plugin. This is basically the same thing, but the plugin is just as effective if that is the route you prefer.

Mobile Detect & Mobble

Mobile Detect is an open source PHP library that is like the wp_is_mobile function, but with a lot more user agents. If you are using the Mobble plugin, it uses Mobile Detect. This is far more effective because it checks for more user agents.

You’d want to use this approach because it is less prone to missing user agents.

function conditional_mobile_styles_scripts() {
  // First check that Mobble is installed by checking for the Mobile_Detect Class
  if ( class_exists( 'Mobile_Detect' ) ) {
    //dequeue scripts and styles if it's for a mobile device. 
    if ( is_mobile() ) {
      wp_dequeue_style( 'whatever-css' );
      wp_dequeue_script( 'whatever-js' );
    }
  }
}
add_action( 'wp_enqueue_scripts', 'conditional_mobile_styles_scripts', 99 );

With the Mobble plugin, you can dequeue more devices and there is a lot more room for customization. For example, if you want to solely dequeue a script for iPhone devices due to a conflict, you can do that with the Mobble plugin.

Let’s address the elephant in the room below.

The Negatives Of Detecting By User Agent

User Agent’s for the lack of a better word suck. There is little to no standard on how devices are named, managed, or kept track of. It’s basically a giant free for all in terms of managing User Agent’s. Many developers prefer to use JavaScript to detect the screen size which is a very effective method. There is even a solid port of Mobile Detect for JavaScript. Additionally, some developers use JavaScript to detect the User Agent. This has its own set of advantages, however, the overall consensus is that User Agent sniffing is bad. This is because there are too many User Agent’s and they are not reliable or commonly used incorrectly.

If you are detecting User Agent’s through the above methods, there is something you need to be aware of. Make sure that if you are generating a cache, that you are generating it by User Agent. For example, if you have a page caching plugin you need to make sure it is also generating a mobile specific cache. For many caching plugins, this will say something along the lines of “detecting mobile devices through User Agents.”

If you want to learn more about the downsides of User Agent Sniffing look here.

Otherwise good luck and happy optimizing!