Header and Footer Script Loader - Use Case - How to Optimize Loading of Scripts On Your WordPress Site

Use Case - How to Optimize Loading of Scripts On Your WordPress Site

Back to User Guide

Introduction

CM Header and Footer Script Loader allows you to add, manage and control additional scripts and styles on your WordPress site. Control where, when and to whom each script will load. The plugin improves site load time and client side memory usage.

Use Case Assumptions

In this example use case guide, we'll cover how to create and control rules to optimize loading of scripts on your WordPress site. 

We assume that you have already bought the plugin, but not installed it yet.

It follows:

• Installing the plugin
• Creating and managing rules
  • Examples of rules
• Enabling and disabling scripts on specific posts
• End result

Installing The Plugin

The process is the same for all CM plugins and add-ons.

• Download the plugin from your customer dashboard
• Log in to WordPress and navigate to the WordPress Admin  → Plugins settings
• Click on Add New
• Activate it and add the license

Learn more: Getting Started - Plugin Overview

Creating and Managing Rules

The plugin interface is straightforward. To create and manage rules, navigate to Admin Dashboard → CM Header and Footer Script Loader → Settings.

There you can find a simple form for creating rules. Let's first consider the options that we have here and then we will create a couple of rules.

Above the form you can see two buttons: clicking on Plugin Usage Instruction shows you the algorithm of creating a rule, and clicking on the button Cleanup database removes all created rules.

The options for creating rules are:

• Script Name - Give a name to the script. This will help you to identify it when you need to enable or disable it for specific posts.
• Script Code - Enter here a code of a script.
• Disable Script - Check this box if you want to pause script execution.
• Script Type - You can choose between two types:
  • CSS - Choose it when you apply CSS changes.
  • JS - Used for Java Scripts. This is useful when you didn't place tags around the script (for example <script></script>). In such cases the plugin will automatically add the tags and wrap the script with them. 
• Script Location - This is important aspect to help you optimize your WordPress site performance. Choose where to place the script:
  • Header Script - Scripts that are placed in the Header are processed first. But if the there are too many scripts in the Header, it can decrease the performance of the site.
  • Footer Script - Placing scripts to the Footer improves the site performance and improves the speed of loading pages.
  • After opening body tag - The scripts will after the scripts in the Header, and before scripts in the Footer.
• Autoload Option - This option defines, where the script will load by default. Choosing any of variant of this option can still be overridden specifically for each post. You can choose between:
  • Load by default on All Posts and Pages - The script will be applied on all posts and pages by default. 
  • Load on Homepage - The script will be applied only on the page specified as homepage.

  • Load on Specific Posts - Choosing this option will let you select in which custom posts type the script will be applied.

    

  • Load on Specific URLs - Choosing this option allows you to set specific URL where the script will load.

    

    URL Tips

    • Accepts full URLs. 
      • For instance, www.test.com/directory-1/example-post
    • Accepts parts of URLs and directory names. 
      • For instance, if you write "/example-post/", it WILL include the URL www.test.com/directory-1/example-post
    • Will load any sub directory of a directory by using *. 
      • For instance, "www.test.com/directory-1/*" WILL include: 
        • www.test.com/directory-1/example-post-1
        • www.test.com/directory-1/example-post-2
        • www.test.com/directory-1/example-post-n
    • Accepts regex patterns. 
      • For instance, the pattern "((/directory-1/*/)|(/directory-2/*/))" will add the script to all pages inside "directory-1/" and "directory-2/"
      • For more information about regex, you can check regex testers such as the Online regex tester and debugger.
  • Don't load by default - This will prevent the script from loading automatically.
• Device Type - Choose types of devices where the rule will be applied:
  • All Devices
  • Desktop
  • Mobile
• Delete - Click it to delete the rule.

To add new rule, click the button Add new below the form. And don't forget to click the button Save Changes, when you create new rules, edit them or delete.

Examples of Rules

Now let's create two rules. 

First rule will add some CSS to change text style, we will add it to the Header, to load it first. We might not want to load it on all pages, only on those that we choose, so let's disable displaying it by default on all posts and pages. This is how the rule will look like:

Second rule will add JavaScript. For example, we want to track how many people visit our site and we want to use Google Analytics service, so we need to add a tracking code to every post/page on our site. Let's add it to the Footer, to reduce the load on the site. Adding it manually is quite long process, so creating a rule that adds the script automatically makes our life much easier. This is how the rule will look like:

Don't forget to click the button Save Changes to save created rules.

Enabling and Disabling Scripts On Specific Posts

Now let's see how to enable and disable script specifically for each post.

Start editing any post or page and find the metabox CM Header and Footer Script Loader.

The metabox contains the list of all created scripts. There are displayed their names under the Label column to distinguish them. And there are 3 options for each script - Enable, Disable and Default. These switchers override the option Autoload Option that we define while creating the rule.

As we set our first rule with CSS styles to not load by default, let's enable this option for that post. And the second rule was created to be displayed by default on all posts pages, so we can keep the switcher on the position Default.

If you want to turn off some script for a specific post, choose the option Disable for the corresponding rule.

Don't forget to click the button Update to save the changes.

Now we can see the result on the front-end.

End Result

Following instructions found in the plugin and guides, you should be able to create and control rules to optimize loading of scripts on your WordPress site.

	More information about the CM Header and Footer Script Loader Other WordPress products can be found at CreativeMinds WordPress Store
	Let us know how we can Improve this Product Documentation Page To open a Support Ticket visit our support center