Plugin Organizer
Hiding Or Loading?
Selective Loading For Mobile Devices
Boost Your Mobile Loading Speed
Plugin Organizer Boosts Pagespeed
Plugin Organizer is a very useful plugin for WordPress. In terms of plugins, it is very old as it was written in 2012 when responsive design was in it’s infancy. However, the plugin has stood the test of time, and provides the basis for a really good trick that helps websites built with page builders such as Elementor, DIVI, or WP Bakery etc.
What the plugin does is stop the loading of plugins on pages. What makes this work so well is that it can also stop the loading of plugins by device. With mobile speeds being far slower than desktop speeds, this can prove very useful. It can also help if a plugin does not suit the restricted layout of a mobile device, but does suit the desktop layout.
Restricting the loading of JS heavy plugins on mobile devices can make a big difference to your pagespeed scores. But it’s not just restricting loading that makes this plugin so special. It also has complete flexibility when combined with the HTML Snippets Plugin. Using the two together allows you to selectively load content on desktop, but leave it out on mobile.
This is a content lightbulb moment, as it stops Lighthouse reporting on any video when you have hidden it on mobile in the page builder. If you have hidden a video on mobile, check your mobile scores. Is the video still being reported on your mobile report? If so, I will explain how to fix this below.
Hiding Or Loading?
Selective Loading For Mobile Devices
Boost Your Mobile Loading Speed
Plugin Organizer Boosts Pagespeed
Plugin Organizer is a very useful plugin for WordPress. In terms of plugins, it is very old as it was written in 2012 when responsive design was in it’s infancy. However, the plugin has stood the test of time, and provides the basis for a really good trick that helps websites built with page builders such as Elementor, DIVI, or WP Bakery etc.
What the plugin does is stop the loading of plugins on pages. What makes this work so well is that it can also stop the loading of plugins by device. With mobile speeds being far slower than desktop speeds, this can prove very useful. It can also help if a plugin does not suit the restricted layout of a mobile device, but does suit the desktop layout.
Restricting the loading of JS heavy plugins on mobile devices can make a big difference to your pagespeed scores. But it’s not just restricting loading that makes this plugin so special. It also has complete flexibility when combined with the HTML Snippets Plugin. Using the two together allows you to selectively load content on desktop, but leave it out on mobile.
This is a content lightbulb moment, as it stops Lighthouse reporting on any video when you have hidden it on mobile in the page builder. If you have hidden a video on mobile, check your mobile scores. Is the video still being reported on your mobile report? If so, I will explain how to fix this below.
Plugin Organizer is a very useful plugin for WordPress. In terms of plugins, it is very old as it was written in 2012 when responsive design was in it’s infancy.
However, the plugin has stood the test of time, and provides the basis for a really good trick that helps websites built with page builders such as Elementor, DIVI, or WP Bakery etc.
What the plugin does is stop the loading of plugins on pages. What makes this work so well is that it can also stop the loading of plugins by device. With mobile speeds being far slower than desktop speeds, this can prove very useful. It can also help if a plugin does not suit the restricted layout of a mobile device, but does suit the desktop layout.
Restricting the loading of JS heavy plugins on mobile devices can make a big difference to your pagespeed scores. But it’s not just restricting loading that makes this plugin so special. It also has complete flexibility when combined with the HTML Snippets Plugin. Using the two together allows you to selectively load content on desktop, but leave it out on mobile.
This is a content lightbulb moment, as it stops Lighthouse reporting on any video when you have hidden it on mobile in the page builder. If you have hidden a video on mobile, check your mobile scores. Is the video still being reported on your mobile report? If so, I will explain how to fix this below.
Selectively Load Plugins
This Is How To Speed Up Mobile Loading
Using Plugin Organizer
The first thing to do is Install Plugin Organizer and activate it. After you have done this, go to the plugin settings page in your WordPress Dashboard
The Most Important Thing
In the settings, make sure ‘Selective Loading’ AND ‘Selective Mobile Loading’ are switched on. This gives you control of loading different plugins on different devices. If you then go to ‘Global Settings’ in the plugin settings, you can see which plugins you want to load / unload site wide. Just click each one to go green for ‘on’ or red for ‘off’.
One thing to note here is where it says ‘Platform’. You can click this to go for standard (Desktop) or Mobile. Click ‘Mobile’ and individually set the plugins to turn off loading on mobile only.
If you then go to edit each page individually and scroll right to the bottom, you will see a load of green bars. That is the plugin organizer. Here you can set the plugins to load / unload on that page only. The ones you previous turned off globally will be red. Ones that are allowed to load will be green. Just click the green bar to turn it on / off for that page, remembering to alter the platform to ‘Mobile’ to turn off the plugin on mobile. This is perfect for branding / landing pages, where you may have some larger plugins you want to load up on that page only for visual purposes.
It’s very simple to get used to, and it allows you total control over what plugins you want to load, where, and on what devices.
Combining With HTML Snippets
Page Builders are great as they allow you to design pages with ease. Most websites are built with Elementor, DIVI, or WP Bakery. However there is an issue with all of them, and this really slows down mobile loading. It is to do with page content, and loading it on mobile. What happens is a designer may make a video or have a big image that is intended for desktop devices only. All of the pagebuilders have an option to hide this. So you hide it. This will also stop it appearing on mobile. That should reduce the mobile page weight, as there is no video on it. Right?
Wrong!
Page Builders solely ‘hide’ the content. Hiding and loading are very different things. If you have a video loading on your desktop and have set it to hide on mobile, go and do a pagespeed test. In the mobile page report, does it still list your video anywhere on the page? If so, it’s still loading up, hurting your pagespeed and overall load times on mobile really badly.
This is where HTML snippets comes in. Hiding it does not stop it loading. But using Plugin Organizer with HTML Snippets does.
How Do I Do This?
If you have Plugin Organizer installed, go and install HTML Snippets. Then go to the HTML Snippets plugin settings and click ‘Add New Snippet’. From here, put in the HTML code for your video, or any other content you do not want to load on mobile. A lot of pagebuilders have a video module that you just put the video into, so if you want the raw HTML to display a video without plugins, use a variation of the code below:
Youtube Video Player
<iframe width=”100%” height=”auto” src=”YOUTUBE URL” frameborder=”0″ allowfullscreen></iframe>
Self Hosted Video Player
<video controls width=”100%” height=”auto”>
<source src=”YOURVIDEOFILE.webm” type=”video/webm”>
<source src=”YOURVIDEOFILE.mp4” type=”video/mp4″>
Sorry, your browser doesn’t support embedded videos.
</video>
Remember to change the URL’s to your own URL for your video. The size dimensions ‘100%’ and ‘auto’ will allow your video container to be responsive to your website. If you have specific dimensions you need the video’s to be, just replace those values with the sizes you require.
Save the snippet. Then once you have saved it, simply take the existing video out of the page itself, and replace it with the shortcode that HTML Snippets has given you for your new video. Now load it up. If all is well, the video will be showing on desktop and mobile.
The last step now, is on the page where the content is, scroll down to the bottom of the page where the content is on, and disable plugin organizer on mobile. Now check your mobile again. The video should not be there. Now clear your caches and do another pagespeed test. See that the video is loading on desktop, but has disappeared from your mobile report – with a much lighter page and faster fully loaded time!
Going Even Further
HTML Snippets also has a sister plugin called PHP Snippets. This plugin works in exactly the same way as HTML Snippets so you can also install this one, and make content to display on mobile only, and not load it up on desktop.
You just follow exactly the same instructions as explained above, except this time to disable the content on desktop, simply disable it on ‘Standard’ loading and enable it on ‘Mobile’. With both plugins installed you have complete design and performance flexibility. You can have specific mobile and desktop content, without the page builder loading up absolutely everything and just hiding it.
Where Else Is It Useful?
I generally only use it on mobile content, restricting the loading of large amounts of content to increase mobile scores.
What About Scripts?
Glad you asked! This is the other thing that Plugin Organizer really helps with. Many plugins like Slider Revolution have a disable on mobile feature, but they do not really disable everything which results in unnecessary scripts being loaded up. Slider Revolution won’t load the slider itself. but WordPress will still load the scripts themselves. This is the only easy way to completely disable those scripts on mobile devices, saving huge amounts of load time and increasing your pagespeed.
Plugin Organizer – Complete!
Step 7: Font Loading
Lets Get Rid Of Those Font Errors
Speed Up Mobile
Plugin Usage
The first thing to do is Install Plugin Organizer and activate it. After you have done this, go to the plugin settings page in your WordPress Dashboard
The Most Important Thing
In the settings, make sure ‘Selective Loading’ AND ‘Selective Mobile Loading’ are switched on. This gives you control of loading different plugins on different devices. If you then go to ‘Global Settings’ in the plugin settings, you can see which plugins you want to load / unload site wide. Just click each one to go green for ‘on’ or red for ‘off’.
One thing to note here is where it says ‘Platform’. You can click this to go for standard (Desktop) or Mobile. Click ‘Mobile’ and individually set the plugins to turn off loading on mobile only.
If you then go to edit each page individually and scroll right to the bottom, you will see a load of green bars. That is the plugin organizer. Here you can set the plugins to load / unload on that page only. The ones you previous turned off globally will be red. Ones that are allowed to load will be green. Just click the green bar to turn it on / off for that page, remembering to alter the platform to ‘Mobile’ to turn off the plugin on mobile. This is perfect for branding / landing pages, where you may have some larger plugins you want to load up on that page only for visual purposes.
It’s very simple to get used to, and it allows you total control over what plugins you want to load, where, and on what devices.
HTML Snippets
Page Builders are great as they allow you to design pages with ease. Most websites are built with Elementor, DIVI, or WP Bakery. However there is an issue with all of them, and this really slows down mobile loading. It is to do with page content, and loading it on mobile. What happens is a designer may make a video or have a big image that is intended for desktop devices only. All of the pagebuilders have an option to hide this. So you hide it. This will also stop it appearing on mobile. That should reduce the mobile page weight, as there is no video on it. Right?
Wrong!
Page Builders solely ‘hide’ the content. Hiding and loading are very different things. If you have a video loading on your desktop and have set it to hide on mobile, go and do a pagespeed test. In the mobile page report, does it still list your video anywhere on the page? If so, it’s still loading up, hurting your pagespeed and overall load times on mobile really badly.
This is where HTML snippets comes in. Hiding it does not stop it loading. But using Plugin Organizer with HTML Snippets does.
How Do I Do This?
If you have Plugin Organizer installed, go and install HTML Snippets. Then go to the HTML Snippets plugin settings and click ‘Add New Snippet’. From here, put in the HTML code for your video, or any other content you do not want to load on mobile. A lot of pagebuilders have a video module that you just put the video into, so if you want the raw HTML to display a video without plugins, use a variation of the code below:
Youtube Video Player
<iframe width=”100%” height=”auto” src=”YOUTUBE URL” frameborder=”0″ allowfullscreen></iframe>
Self Hosted Video Player
<video controls width=”100%” height=”auto”>
<source src=”YOURVIDEOFILE.webm” type=”video/webm”>
<source src=”YOURVIDEOFILE.mp4” type=”video/mp4″>
Sorry, your browser doesn’t support embedded videos.
</video>
Remember to change the URL’s to your own URL for your video. The size dimensions ‘100%’ and ‘auto’ will allow your video container to be responsive to your website. If you have specific dimensions you need the video’s to be, just replace those values with the sizes you require.
Save the snippet. Then once you have saved it, simply take the existing video out of the page itself, and replace it with the shortcode that HTML Snippets has given you for your new video. Now load it up. If all is well, the video will be showing on desktop and mobile.
The last step now, is on the page where the content is, scroll down to the bottom of the page where the content is on, and disable plugin organizer on mobile. Now check your mobile again. The video should not be there. Now clear your caches and do another pagespeed test. See that the video is loading on desktop, but has disappeared from your mobile report – with a much lighter page and faster fully loaded time!
Going Further
HTML Snippets also has a sister plugin called PHP Snippets. This plugin works in exactly the same way as HTML Snippets so you can also install this one, and make content to display on mobile only, and not load it up on desktop.
You just follow exactly the same instructions as explained above, except this time to disable the content on desktop, simply disable it on ‘Standard’ loading and enable it on ‘Mobile’. With both plugins installed you have complete design and performance flexibility. You can have specific mobile and desktop content, without the page builder loading up absolutely everything and just hiding it.
Anything Else?
I generally only use it on mobile content, restricting the loading of large amounts of content to increase mobile scores.
What About Scripts?
Glad you asked! This is the other thing that Plugin Organizer really helps with. Many plugins like Slider Revolution have a disable on mobile feature, but they do not really disable everything which results in unnecessary scripts being loaded up. Slider Revolution won’t load the slider itself. but WordPress will still load the scripts themselves. This is the only easy way to completely disable those scripts on mobile devices, saving huge amounts of load time and increasing your pagespeed.
Plugin Organizer – Complete!
Step 7: Font Loading
Font Problems Solved!