How to Use the Plugin Organizer to Speed Up Your WordPress Site

After WordPress hosting, plugins are the second biggest reason that can cause your WordPress site to be slow. Often times this can be mitigated by either disabling the plugin or stop it from loading in areas where you don’t need them. In this article, we… Read More »

The post How to Use the Plugin Organizer to Speed Up Your WordPress Site appeared first on WPBeginner.

After WordPress hosting, plugins are the second biggest reason that can cause your WordPress site to be slow. Often times this can be mitigated by either disabling the plugin or stop it from loading in areas where you don’t need them. In this article, we will show you how to use the Plugin Organizer to speed up your WordPress site.

Using Plugin Optimizer to speed up WordPress

How WordPress Plugins Affect Your Website Speed?

One of the most frequently asked questions that we get is how many WordPress plugins are too many? The two things that concerns most users are WordPress security and how plugins may affect speed and performance?

All good WordPress plugins are coded in a way that they are only loaded on your website when needed. You can see our infographic on how WordPress actually loads plugins (behind the scenes).

WordPress doesn’t load inactive plugins which means they don’t affect your website’s performance. However, it does load all active plugins which then run their code when needed.

Now sometimes plugin authors cannot anticipate when and where you will use their plugin features on your website. In that case, they may load their code whether or not you need it. If the plugins are loading JavaScript and CSS files, then this may increase your website’s page load time.

How WordPress Plugin Organizer Can Speed Up Your Site

Depending on the plugins that you’re using, there may be some that you only need on specific pages, posts, or post types. Some plugins you may only need in the WordPress admin area, so they shouldn’t load on the front-end of the website.

WordPress Plugin Organizer allows you to do the following things:

  • Selectively enable or disable plugins based on URL
  • Enable or disable plugins for user roles
  • Enable or disable plugins based on post types
  • Rearrange the order in which plugins are loaded
  • Disable plugins and only load them when needed

Basically, it gives you the ability to fine-tune your website performance.

That being said, let’s take a look at how to use the Plugin Organizer to speed up WordPress.

Using WordPress Plugin Organizer to Manage Active WordPress Plugins

First, thing you need to do is install and activate the Plugin Organizer plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Important: Plugin organizer is a very powerful plugin. Reordering or disabling plugins can cause conflicts and unexpected behavior which could make your site inaccessible. We recommend that you create a complete WordPress backup before disabling or reordering any plugins.

Once you are ready, you need to head over to the Plugin Organizer » Settings page to configure your settings.

Plugin organizer settings

There are several options on this page, and we will look at each option, what it does, and which ones you should turn on.

Fuzzy URL Matching

This option allows you to enable/disable plugins on child URL. This means that settings will affect http://example.com/sample-page/ and all subsequent URLs under it. For example, http://example.com/sample-page/child-page1/ and http://example.com/sample-page/child-page2/.

Ignore URL Protocol

This option is turned off by default. It allows the plugin organizer to ignore http and https part of plugin URLs. This is particularly helpful if you have SSL enabled on your WordPress site.

Ignore URL Arguments

This option allows you to ignore URL arguments. For example, http://example.com/page/?foo=1&bar=2 is a URL with arguments. Turning on this option is only helpful on URLs with arguments. You should leave it OFF in most cases.

Only allow network admins to change plugin load order?

If you are running a WordPress multisite network, then turning on this option will only allow Network Administrator to rearrange plugin order. We highly recommend that you turn this on if you have a WordPress multisite network.

Custom Post Type Support

This option allows you to select the post types where you want to enable/disable plugins. This option is particularly useful if you have plugins that you only need for specific post types.

Auto Trailing Slash

This option adds or removes the trailing slash at the end of plugin filter URLs based on your WordPress permalink settings.

Selective Plugin Loading

This option allows you to selectively load plugins even if they are disabled in plugin settings. You need to turn on this feature if you want to enable or disable plugins on individual content types.

To properly use this option, you need to add a must use plugin or mu-plugin in WordPress. MU plugins can be added to any WordPress site, and they are activated by default. The plugin will try to create an MU plugin itself, but if it fails then you will need to create it. We will show you how to do that later in this article.

Selective Mobile Plugin Loading

This option allows you to selectively enable or disable plugins on mobile browsers.

Selective Admin Plugin Loading

You can turn on this option if you want certain plugins to only load inside the WordPress admin area.

Disable Plugins By Role

This option allows you to disable plugin by user roles. You can turn on this option and then select user roles that you want to use in the next box.

Don’t forget to click on the save settings button to store your changes.

Creating an MU Plugin for Plugin Organizer

Plugin Organizer needs an MU plugin to work properly. The plugin will try to automatically add it to your website, but if it fails then you will have to create it yourself.

To find out whether the plugin has successfully created the MU plugin. You need to visit Plugins » Installed Plugins page. You will see a new link labeled Must-Use, clicking on it will show you the installed MU plugins on your site.

Must Use plugins installed in WordPress

If you don’t see the plugin or Must-Use plugins link, then this means that the plugin organizer failed to create the file, and you will need to manually do it yourself.

First, you need to connect to your website using an FTP client or File Manager app in cPanel.

Next, Go to the /wp-content/mu-plugins/ folder. If you don’t have a mu-plugins folder in your /wp-content/ folder, then you need to create one.

After that you need to go to /wp-content/plugins/plugin-organizer/lib/ folder and download the file called ‘PluginOrganizerMU.class.php’ to your computer.

Copy MU plugin file

Next, you need to go to the /wp-content/mu-plugins/ folder and upload the file from your computer.

Plugin Organizer mu-plugin file

The Plugin Organizer can now you use this file to properly manage your plugins efficiently. You can go ahead and continue with plugin settings.

Set up Global Plugin Options

Plugin Organizer allows you to activate plugins but keep them disabled. To set up which plugins remain active and which plugins are disabled, you need to go to the Plugin Organizer » Global Plugins page.

Set plugins to disable globally

You will see your installed plugin on the left. Active plugins will be highlighted and displayed on top. If you want to disable a plugin, then you can simply drag and drop it to the Disable column.

This will disable the plugins without deactivating them.

You can re-enable the plugin you disabled for individual post types, single post or page items, individual URLs, from different pages in the plugin settings. We will walk you through each of them later in this article.

Enable or Disable Plugins on Search Results Page

To disable or enable certain plugins on search results, you will need to visit the Plugin Organizer » Search Results page.

Disable plugins on search results page

On this screen, you need to simply select a plugin from the left column and drop it to the disable column. You will notice that the disable column has different boxes. You will need to click on the box where you want to disable the plugin. For example, adding a plugin to ‘Disabled Standard’ box will disable the plugin for all users on all pages.

If you previously set a plugin to be disabled globally, and you want it to be loaded on search results page, then you can simply drag and drop it from disabled plugins column back to available plugins.

Enable plugins on search results page

Selectively Enable / Disable Plugins for Custom Post Types

To control which plugins work on certain post types, you need to visit Plugin Organizer » Post Type Plugins page.

Enable or disable plugins for post types

First, you will select the post type where you want to apply the changes. After that, you can drag and drop plugins from available items column to the disable column.

You can also enable a plugin that you have disabled in Global Plugins page by dragging it from the Disabled column to the available items.

Group Plugins and Change Plugin Load Order

By default, WordPress loads your current active plugin files alphabetically. This alphabetical order may sometimes cause conflicts if you have plugins depending on each other’s code.

For example, if you have a plugin file apple.php which relies on functions in another plugin called zebra.php, then you may need the zebra.php file to load first so that apple.php works properly.

Plugin Organizer allows you to manually change the plugin order and group plugins. However, be very careful as this could make your website inaccessible.

To rearrange the plugin load order, you need to visit Plugin Organizer » Group and Order Plugins page.

The plugin organizer will display your plugins in default alphabetical order, and you can rearrange the order by simple drag and drop.

You can also group plugins together by selecting ‘Create new group’ from the drop down menu at the top. Next, you need to enter a name for the group and select the plugins you want to add in it.

Creating a plugin group

Once you are done with the group, click on the Submit button to continue. Plugin organizer will now create a plugin group for you.

Now if you go to the Plugins page, then you will see a new link named after your group name. When you click on it, you will see all the plugins inside that group.

Plugin group list on the plugins page

Creating Plugin Filters with Plugin Organizer

Plugin Organizer allows you to enable or disable plugin based on URL. To do that you need to create Plugin Filters. These filters will allow you to enable or disable plugins that match specific URLs.

First you need to go to the Plugin Organizer » Plugin Filters page and click on ‘Add Plugin Filter’ link.

Add plugin filter

This will bring you tothe add new plugin filter page. You will need to provide a name for your plugin filter and then add permalinks (URLs) that you want to be affected by this filter.

Creating a plugin filter

You can add multiple URLs by clicking the Add Permalink button.

Under the settings section, you can choose whether this filter will also affect child URLs of permalinks you have added. You can leave the priority field blank.

After that, scroll down to the ‘Plugins’ section. Here you can drag and drop plugins from the available items to Disabled boxes.

Disable plugins based on URL filters

Similarly, you can also drag and drop a plugin from the disabled column to available items to make a plugin load when this filter is matched.

Additionally, you can save this filter inside a filter group. Filter groups are like categories. Their purpose is to help you sort similar plugin filters together.

Organize your filters in groups

Once you are done, click on the publish button to make this plugin filter active. It will start working as soon as you click on the publish button.

Enable or Disable a Plugin on a Single Post or Page

Plugin Organizer also allows you to load or disable plugins on a single post, page, or custom post type item. First you need to make sure that you have enabled the post type support on Plugin Organizer » Settings page.

Post types enabled

Next, go ahead and edit the post, page, or custom post type you want to change. On the post edit screen, scroll down to the ‘Plugin Organizer’ section.

Plugin organizer section on post edit screen

You will see the plugin organizer settings with your plugins. You can drag and drop plugins to disable them or drag disabled plugins to available items to make them active.

Don’t forget to click on the save changes or update button to store your changes.

Troubleshooting Plugin Organizer Issues

Plugin Organizer plugin is used to change the default behavior of WordPress plugins on your website. Your settings may cause unexpected results including fatal errors, syntax errors, or white screen of death.

A quick way to resolve those issues is by deactivating all your WordPress plugins via FTP. This will deactivate plugin organizer as well.

To uninstall Plugin Organizer, simply delete the plugin from the plugins page. This will not only delete the plugin itself, but it will also delete all plugin settings. You can then reinstall the plugin if you want.

For most errors, see our comprehensive list of most common WordPress errors and how to fix them. If the error you are seeing is not listed, then try our step by step WordPress troubleshooting guide to find the cause of the error and possible solutions.

We hope this article helped you efficiently use WordPress plugin organizer to speed up your WordPress site. If you want to just install best of the best plugins, then see our list of must have WordPress plugins for all websites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Use the Plugin Organizer to Speed Up Your WordPress Site appeared first on WPBeginner.

How to Lazy Load Gravatars in WordPress Comments

Do you want to lazy load Gravatars on your WordPress site? Gravatars cause extra http requests which slows down your site’s page load speed particularly on articles with a lot of comments. In this article, we will show you how to lazy load Gravatars in… Read More »

The post How to Lazy Load Gravatars in WordPress Comments appeared first on WPBeginner.

Do you want to lazy load Gravatars on your WordPress site? Gravatars cause extra http requests which slows down your site’s page load speed particularly on articles with a lot of comments. In this article, we will show you how to lazy load Gravatars in WordPress comments and improve your website speed.

Lazy Load Gravatar Images in WordPress

What is a Gravatar?

Gravatar are user profile images used by WordPress. These images are used in WordPress comments and author bio sections.

A user needs to create an account on Gravatar website and submit a profile photo for their email address.

Each time they use that particular email address, WordPress powered websites can automatically fetch their profile photo from the Gravatar website.

To learn more, see our guide on what is a Gravatar and why you should start using it.

Gravatars are great, but they can also affect your site’s page load time.

Each user gravatar adds a HTTP request to your page load. This increases the page wait time for your website and affects user experience.

Cross domain HTTP requests to fetch gravatar images

If you have a website that receives a lot of comments, then it is worth considering lazy loading the gravatar images. Let’s take a look at how to easily lazy load gravatars in WordPress comments.

Lazy Load Gravatrs in WordPress Comments

First thing you need to do is install and activate the BJ Lazy Load plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » BJ Lazy Load page to configure plugin settings.

BJ Lazy Load settings

The plugin allows you to lazy load content, widgets, images, post thumbnails, iframes, and gravatars. You need to select the items you want to lazy load on your website.

Don’t forget to click on the save settings button to store your changes.

You can now visit any article with comments on your website. As you scroll down, you will notice lazy loading of gravatar images.

We hope this article helped you lazy load gravatars in WordPress comments. You may also want to see our ultimate guide on how to speed up WordPress and boost performance.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Lazy Load Gravatars in WordPress Comments appeared first on WPBeginner.

How to Fix Render-Blocking JavaScript and CSS in WordPress

Do you want to eliminate render-blocking JavaScript and CSS in WordPress? If you test your website on Google PageSpeed insights, then you will likely see a suggestion to eliminate render-blocking scrips and CSS. In this article, we will show you how to easily fix render… Read More »

The post How to Fix Render-Blocking JavaScript and CSS in WordPress appeared first on WPBeginner.

Do you want to eliminate render-blocking JavaScript and CSS in WordPress? If you test your website on Google PageSpeed insights, then you will likely see a suggestion to eliminate render-blocking scrips and CSS. In this article, we will show you how to easily fix render blocking JavaScript and CSS in WordPress to improve your Google PageSpeed score.

How to fix render blocking JavaScript and CSS in WordPress

What is Render-Blocking JavaScript and CSS?

Every WordPress site has a theme and plugins that add JavaScript and CSS files to the front-end of your website. These scripts can increase your site’s page load time, and they can also block rendering of the page.

A user’s browser will have to load those scripts and CSS before loading rest of the HTML on the page. This means that users on a slower connection will have to wait a few milliseconds more to see the page.

These scripts and stylesheets are referred to as render-blocking JavaScript and CSS.

Website owners who are trying to achieve the Google PageSpeed score of 100 will need to fix this issue to attain that perfect score.

What is Google PageSpeed Score?

Google PageSpeed Insights is an online tool created by Google to help website owners optimize and test their websites. This tool tests your website against Google’s guidelines for speed and offers suggestions to improve your site’s page load time.

It shows you a score based on the number of rules that your site passes. Most websites get somewhere between 50-70. However, some website owners feel compelled to achieve 100 (the highest a page can score).

Do You Really Need the Perfect “100” Google PageSpeed Score?

The purpose of Google PageSpeed insights is to provide you guidelines to improve speed and performance of your website. You are not required to follow these rules strictly.

Remember that speed is only one of the many SEO metrics that help Google determine how to rank your website. The reason speed is so important is because it improves user experience on your site.

A better user experience requires a lot more than just speed. You also need to offer useful information, better user interface, and engaging content with text, images, and videos.

Your goal should be to create a fast website that offers great user experience.

We recently redesigned WPBeginner, and we kept our focus on speed as well as improving user experience.

We recommend that you use Google Pagespeed rules as suggestions, and if you can implement them easily without ruining user experience, then that’s great. Otherwise, you should strive to do as much as you can and then don’t worry about the rest.

Having said that, let’s take a look at what you can do to fix render blocking JavaScript and CSS in WordPress.

We will cover two methods that will fix the render blocking JavaScript and CSS in WordPress. You can choose the one that works best for your website.

1. Fix Render Blocking Scripts and CSS with Autoptimize

This method is simpler and recommended for most users.

First thing you need to do is install and activate the Autoptimize plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Settings » Autoptimize page to configure the plugin settings.

Autoptimize Settings

You can start by checking the box next to JavaScript Options and CSS Options and then click on the save changes button.

You can now test your website using PageSpeed tool. If there are still render blocking scripts, then you need to come back to the plugin’s settings page and click on ‘Show Advanced Settings’ button at the top.

Advanced JavaScript Options

Here you can allow plugin to include inline JS and remove scripts that are excluded by default like seal.js or jquery.js.

Next, scroll down to CSS option and allow plugin to aggregate inline CSS.

Click on the ‘Save changes and Empty Cache’ button to save your changes and empty plugin cache.

Once you are done, go ahead and check your website again with the PageSpeed tool.

Make sure that you thoroughly test your website to see that nothing is broken by optimizing your JavaScripts or CSS.

How does it work?

Autoptimize aggregates all enqueued JavaScript and CSS. After that, it creates minified CSS and JavaScripts files and serves cached copies to your website as async or deferred.

This allows you to fix the render blocking scripts and styles issue. However, please keep in mind that it can also affect the performance or appearance of your website.

2. Fix Render Blocking JavaScript using W3 Total Cache

This method requires a little more work and is recommended for users already using W3 Total Cache plugin on their website.

First you will need to install and activate the W3 Total Cache plugin. If you need help, then see our guide on how to install and setup W3 Total Cache for Beginners.

Next, you need to visit Performance » General Settings page and scroll down to Minify section.

W3 Total Cache enable minify

First you need to check ‘Enable’ next to Minify option and then select ‘Manual’ for minify mode option.

Click on the save all settings button to store your settings.

Next, you need to add the scripts and CSS that you want to minify.

You can get the URLs of all the scripts and stylesheets that are render blocking from Google PageSpeed Insights tool.

Under the suggestions where it says: ‘Eliminate render-blocking JavaScript and CSS in above-the-fold content’, click on ‘Show how to fix’. It will show you the list of scripts and stylesheets.

Get JavaScript and Stylesheet URLs from Google PageSpeed tool

Take your mouse over to a script and it will show you the full URL. You can select this URL and then use your keyboard’s CTRL+C (Command+C on Mac) keys to copy the URL.

Now head over to your WordPress admin area and go to Performance » Minify page.

First you need to add JavaScript files that you want to be minified. Scroll down to JS section and then under the ‘Operations in areas’ set the embed type to ‘Non-blocking async’ for the <head> section.

Add scripts to minify

Next, you need to click on the ‘Add script’ button and then start adding script URLs that you copied from Google PageSpeed tool.

Once you are done, scroll down to CSS section and then click on the ‘Add a stylesheet’ button. Now start adding stylesheet URLs you copied from Google PageSpeed tool.

Add stylesheets to minify

Now click on the ‘Save settings and purge cache’ button to store your settings.

Visit the Google PageSpeed tool and test your website again.

Make sure that you also test your website thoroughly to see that everything is working fine.

Troubleshooting

Depending on how the plugins and your WordPress themes uses JavaScript and CSS, it could be quite challenging to completely fix all render blocking JavaScript and CSS issues.

While the above tools can help, your plugins may need certain scripts at a different priority level to work properly. In that case, the above solutions can break your plugins or they could behave unexpectedly.

Google may still show you certain issues like optimizing CSS delivery for above the fold content. Autoptimize allows you to fix that by manually adding inline CSS required to display the above fold area of your theme.

However, it could be quite difficult to find out what CSS code you will need to display above the fold content.

That’s all, we hope this article helped you learn how to fix render blocking JavaScript and CSS in WordPress. You may also want to see our ultimate guide boost WordPress speed and performance for beginners.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Fix Render-Blocking JavaScript and CSS in WordPress appeared first on WPBeginner.