– 7 min read

How to disable plugins for the mobile version of a website

Website optimization for mobile devices is an important part of project optimization. You should disable some plugins in the mobile version to make the interface friendly and adapt a website to portable devices.

Website optimization for mobile devices

Optimizing the mobile version of a website is required for the successful optimization of a project since the number of users visiting resources from portable devices is growing every year:

The share of mobile Internet traffic by years

After Google introduced the Mobile-friendly test and made changes to the Mobile-first ranking algorithm, responsive design, high loading speed and usability of the mobile version began to play a priority role.

In order to provide mobile users with the necessary functionality and quick loading of a website, it is important to use appropriate plugins that will work correctly on all devices.

For example, when using Adobe Flash Player in the mobile version, the "Incompatible plugins are used" error will be displayed. In this case, the content will not be played and the user will see a blank screen or an error message:

In most cases, this error occurs when using an unsupported video file format that a mobile device cannot play. Besides, Java and Silverlight components are not supported on Android and Apple mobile devices. Some plugins, modules, and extensions also negatively affect the website's performance, causing it to load slowly on portable devices.

Google recommends using HTML5 tags for playing video content and animations on a mobile version instead of unsupported players. You can also disable modules that are not needed for a mobile version using media queries. They allow you to set specific CSS rules for portable devices based on their screen size.

For example, you need to disable an animated advertising unit on mobile devices with a screen resolution of less than 600px. You need to write such a media query into the CSS module style sheet replacing the value "block-id" with the block identifier which is to be hidden:

@media screen and (max-width: 600px) {
#block-id {
    visibility: hidden;
    display: none;
  }
}

You can also use the special Bootstrap 4.3 classes that allow you to display an element only for certain screen resolutions:

Bootstrap 4.3 classes for device screen resolutions

When using Bootstrap, the respective classes are added to the block that needs to be hidden on mobile devices. For example, this combination of classes hides the block on all devices except those with medium and large screens:

<div class='d-none d-md-block d-xl-none''>

In addition to hiding plugins using media queries and Bootstrap, you can use special tools to optimize the mobile version of a website.

The best plugins for a mobile website version on WordPress

Plugin Organizer

Plugin Organizer allows you to:

Change the loading order of plugins.

Optionally disable plugins for specific post types or URLs.

Turn off certain plugins for the mobile version of a website.

Enable the appropriate settings after activating the plugin:

Configuring Plugin Organizer plugin for WordPress

Then add the plugins that need to be disabled and save the changes by clicking "Save". After that, the selected plugins will no longer load in the mobile version of a website.

AMP

Google has developed an accelerated page format that allows you to download a mobile version of a website at high speed. This improves the behavioral factors and ranking of the project. You can use this plugin to convert standard pages to AMP.

WP Fastest Cache

This plugin allows you to cache files with PHP and SQL codes to speed up page reloading. The caching system optimizes the code, generates and saves static HTML files that are displayed to users who have visited a website again.

Plugins for mobile users of Drupal

Context Block Disable

This plugin allows you to disable selected blocks according to the given rules for certain mobile devices.

Accelerated Mobile Pages (AMP)

This plugin converts HTML pages to the AMP standard for fast loading.

SEO for mobile website versions on Joomla

You can add a media query to the CSS stylesheet by specifying an arbitrary suffix value there to hide a specific module on mobile devices:

@media screen and (max-width: 640px) {
 my-suffix {
display: none;
}
}

Then you need to go to the administration panel, find the necessary module and specify in the additional parameters the "my-suffix" value for the suffix of the module's CSS class. After saving such settings, this module will no longer be displayed on mobile devices.

You can generate accelerated pages for Joomla websites using the Accelerated Mobile Pages extension:

Expanding Accelerated Mobile Pages for Joomla

Checking a mobile website version via Mobile-Friendly Test

You can check the mobile version of a website using the test developed by Google experts. To check the resource, you need to enter a URL or paste the code and click "Test URL":

Checking page optimization for mobile devices Mobile Friendly Test

The check will show whether the page is adapted for mobile devices, and it also displays possible page issues that occurred during loading:

Test page optimization for mobile Mobile Friendly Test

Websites that successfully pass the Mobile-Friendly test take precedence in Google's mobile search results.

Conclusion

Improving the usability of the project on mobile devices, including the design adaptation and increasing the loading speed, is an important stage in the search engine optimization of any modern website.
Some plugins and content formats are not supported on mobile devices. You should use HTML5 tags or disable such plugins on portable devices to avoid problems with the mobile version of a website.
You can use plugins, modules, and extensions for CMS to speed up the loading of pages on the mobile version. These tools are designed to optimize code, cache pages or convert them to the AMP format.
You can hide certain blocks and disable modules in the mobile version using plugins for CMS, media queries, and Bootstrap classes.
You can check the website's friendliness for mobile devices and find out about possible page issues with the help of Google's Mobile-Friendly Test.

This article is a part of Serpstat's "Site Audit" tool

Audit all the site or page in one click. A complete list of errors, sorted by severity, ways to resolve them and recommendations. Any frequency of verification and automatic email reports.

Run Site Audit

Learn how to get the most out of Serpstat

Want to get a personal demo, trial period or bunch of successful use cases?

Send a request and our expert will contact you ;)

Rate the article on a five-point scale

The article has already been rated by 0 people on average out of 5

Found an error? Select it and press Ctrl + Enter to tell us