Monetizing your WordPress site is important if you are looking to make money with it. The passive streamlining of income from a WordPress site can be pushed to a very fine limit with a combination of content that provides value to the readers, SEO-related adjustments that help your pages to stand out in the search engine, and a reliable monetization method.

One good way to monetize your WordPress site is with an Amazon associate. Basically, you must have an amazon associate account that is fully approved and you will be promoting products from Amazon that are being reviewed or relatable to your niche.

To prepare this setup with a WordPress site you might need some plugins that will help your business run smoothly. This guide shares some of the free amazon affiliate WordPress plugins that you can start using right away without having to pay extra bucks as a startup investment.

These free WordPress plugins provide a variety of features designed to increase Amazon sales, such as automated product updates and personalized recommendations, link localization, etc. Additionally, you can create a certain setup for your preferred amazon ads to appear on certain areas of the website without having to do it for every page. I have also included some essential plugins that maintain amazon associate disclosure for the entire website without needing your interaction. 

Overall, these free Amazon affiliate WordPress plugins help an Associate to start running a profitable Amazon affiliate website. Keep reading till the surprising bonus tool is added in the final section of this post.

Prerequisite for using these Amazon affiliate plugins

Not all the plugins in this post require a special setup before unveiling their true functionalities. Some of these plugins are really handy to configure. However, plugins like Affiliatetable do need access to Amazon’s product advertising API to be able to configure with your site.

Some other plugins may require additional on-page configuration to control their functionality based on your requirements, for example controlling Amazon affiliate disclosure on pages that has amazon products embedded.

As these plugins are free to use so you might feel the lack of features at some point however they are good enough to get kickstart your Amazon Affiliate site. Some of these plugins are freemium that come with advanced features when you consider upgrading to a premium plan.

To begin using these free Amazon WordPress affiliate plugins – 

1. Simply install the plugins and activate them to access their controls on the WordPress dashboard.
2. Next, you might need to add your Amazon affiliate ID (in some plugins)
3. You might also need to add PA API in certain cases too.
4. That’s should be good to start using them on your web pages.

That being said let’s dive into these amazing free amazon WordPress affiliate plugins you should definitely try out. 

9 Free Amazon Affiliate WordPress Plugins 

1. Disclosure for Amazon Affiliate

Disclosure for Amazon Affiliate plugin allows your site to be compatible with Amazon trademark disclaimer and affiliate disclaimer. It’s very easy to use, just install the plugin, and no additional setup is required on your end. 

This plugin places the disclosure text from amazon at the right location of post-type pages, depending on plugin configuration. The disclaimers are set to ignore by Google so that crawlers do not pick anything from the disclaimer texts while indexing your page.

The disclaimer texts are fully editable and customizable however you see them fit on your pages. As for customization, you can utilize the classic editor environment to add additional html tags and design them via custom CSS applied to your site. 

Moreover, you will have global and custom control to adjust the requirement of disclosures on-page levels. It’s a simple but efficient way to control the utilization of the plugin because you might not need the disclosure on every single page.

Overall, this is a perfect plugin to have the FTC and Amazon disclosures on posts and pages! Its basic utility and simplicity make this plugin so awesome. Apart from that Disclosure for Amazon Affiliates is available for FREE on the WordPress repository.

Check the plugin here: Disclosure for Amazon Affiliate 

2. Site Buddy

As you grow amazon focused websites you will realize the need of ensuring correct affiliate tags are in place, broken links need to be fixed, and products that are out of stock need to be reviewed so that you are not losing your well-deserved commissions.

Sitebuddy is a tool that can manage all of that hustles for you. The way it works is by scanning your website’s pages, finding out amazon links, the crosscheck if the product ID is available in stock. In addition, it will check if the tags are correctly placed and link status. 

The best part is this is a freemium tool and the free plan lets you scan 25 pages per month. Another advantage is you don’t have to install any plugins on your site, everything can be managed via their dashboard.

Additionally, it ensures the pages that include amazon products are Amazon compliant with Amazon terms and conditions. It finds all the pages without Amazon Affiliate Disclaimer and asks you to add it so your Amazon Associate account runs safely.

Check this tool: Sitebuddy

3. Add & Replace Affiliate Links for Amazon

As an Amazon Associate you know it’s important to have your affiliate tag included in any links that you share. The add & replace affiliate links for Amazon plugin ensures your links have the right affiliate tags so that you get the credit for your hard work.

This plugin automatically changes shortened amazon links (e.g., amzn.to) that hide the Amazon associate tag and replace them with long-form amazon links that embed your affiliate tag. It saves you a lot of time from manually changing shortened amazon links and adding correct affiliate tags.

Shortened Amazon links do have the affiliate tags assigned if they are created via Amazon associate site stripe, but in case you want your links to be visible with correct affiliate tags these plugins definitely help.

The plugin can automatically find and replace all shortened links on your website with long links that include your affiliate ID tag. This way, you can be certain you are earning revenue from every sale that’s made through your website.

Check this plugin: Add & Replace Affiliate Links for Amazon

4. Ad Inserter

Ad Inserter is another free WordPress plugin that can be useful for your Amazon affiliate site. This plugin allows you to insert ads into your WordPress site. This can be useful when you want to display a certain contextual Amazon Native Shopping Ads or product box in all posts. 

Managing the ad blocks is pretty handy – all you have to create your preferred blocks and then set them for either manual or automatic insertion at any location of your web page. You can even control the visibility of blocks in your preferred page type.

A plugin like Ad Inserter fully packed with various important features for free is a no-brainer. It’s a powerful plugin that you definitely need to look at if you are serious about listing amazon products on your site without investing in premium plugins.

This plugin supports all types of ads, including Google AdSense, Google Ad Manager (DFP), Amazon Native Shopping Ads, Media.net, Infolinks, and rotating banners. You can insert opt-in forms, header scripts, Javascript, CSS, HTML, and PHP anywhere on the page. In addition, the Ad inserter plugin comes with a built-in debugging, and ad-block notice tool.

Check this plugin: Ad Inserter

5. Thirsty Affiliates

If you want your links to look genuine and add a little bit more trustworthiness when sending someone over affiliate product pages, the Thirsty Affiliate plugin can help you. This is a freemium plugin that allows users to clock an outgoing link with custom slugs. 

ThirstyAffiliates also has special features to help you comply with Amazon’s terms of service, especially about link clocking, which is their smark uncloaking to stay under Amazon regulation. We have been using this plugin without any issues. 

With this plugin, you can insert links into your posts with ease. You can search Amazon from within your WordPress dashboard, find the product of choice and link it so that affiliate tracking is available in Thirsty Affiliate’s reports! 

The best part is you can get the basic plugin for free and later upgrade to the premium version once you are able to pull the desired result on your site. With the premium subscription, you can also get links placed automatically in your content for relevant keywords and geo-target your visitors.

Check the plugin here: Thirsty Affiliate

6. Affiliatable

Affiliatable helps you to build a product table and product box to showcase amazon products as an affiliate. With better visual representation the conversion can be improved and Affiliatetable is one of those plugins that make this work super easy. It also comes as a freemium plugin so you can definitely benefit from using it.

With this plugin, you can create high-converting product comparison tables, top product boxes, pros and cons boxes for products, and single product boxes. For this plugin to work you must have access to Amazon API. Other features such as geotargeting, in-depth click reports, and templates are available on the premium version.

Affiliate Table comes with similar features to AAWP which is a premium plugin, so trying out Affiliate table’s free version definitely worth it. With the free version, you can create unlimited tables and boxes for one website.

Check this plugin: Affiliatable

7. EasyAzon

As an Amazon associate, you would want to capture maximum profit from the products you have been reviewing and adding to your content. Well, EasyAzon does that for you, which is a free plugin with no premium plan.

Although EasyAzon is described as a plugin to improve conversion and increase profit with the geo-targeting feature it still lacks some of the advanced features available on similar plugins. Although, you can still benefit from the features it offers for free.

This plugin is compatible with the current WordPress version and frequent updates make it more convenient to use on your site. EasyAzon features an automatic link localizer, advanced analytics & reports, product popup from a link, and link clocking.

With EasyAzon, you can create text affiliate links directly to any product available for sale on Amazon.com without having to go through the steps of manually creating links from within the Amazon.com website. This saves you a ton of time and makes creating affiliate links much easier!

Check this plugin: EasyAzon

8. Amazon Link Engine

Amazon Link Engine is a free plugin that is actually a part of geniuslink. Geniuslink is a powerful tool for localization, link management, and link tracking. The Amazon Link Engine is a child of Geniuslink and inherits its localization and link management properties, however, to achieve these features you must create an account on Geniouslink, which is a premium tool.

You can download the plugin on the WordPress repository. It’s frequently updated and compatible with the current WordPress version. In the plugin setup, you can connect to Geniuslink too in case you have an active account on Geniuslink.

The plugin automatically converts existing amazon links localization compatible, so you earn commission from various country’s Associate accounts. Note that, even though your links will be automatically localized to be able to earn commission you must have an active account on Geniuslink. The newly added links on your WordPress site will get converted too.

Overall, Amazon Link Engine comes as an entirely free plugin with some limitations, which can be activated via having a Geniuslink account that turns out to be cheaper than many other similar plugins. You pay a small flat fee for a certain amount of clicks you receive via your site.

Check plugin: Amazon Link Engine

9. Product Comparision Table Generator

To display a nice-looking Amazon product table or product block with automatically updated price tags and description needs Amazon API. As you might know, nowadays, Amazon requires 3 valid sales and policy compliance for you to access their advertising API.

So as an alternative to building good-looking Amazon product tables that can be inserted inside your content without needing Amazon Advertising API, lab softsolvate’s Product Comparison Table Generator is one tool you would definitely want to give a try. 

It is simple but also an effective way to create eye-catching tables for the products on your website. You will have to assign Amazon product URL (affiliate URL), product name, product producer, and description. Once you add those you can select your preferred table color from the table control.

To get your table or product card into your WordPress site, add their CSS via WordPress customizer (one-time setup), and then add your table HTML wherever desired in your post.

Check this tool: Product Comparision Table Generator

Conclusion: Now you have these 9 plugins to set up your Amazon Affiliate website without investing a dime on Amazon product publishing tools. There are superior tools to go for if your budget allows you and you should definitely consider those premium tools. But that doesn’t mean the free tools available to you are not useful enough. These are for certain some of the great free tools you can use as an amazon associate.

There are many more WordPress sites. Bookmark this page so you find the rest when I update this post with more free amazon affiliate plugins for WordPress site.

You can also read:

• Top 5 Best Affiliate Programs That Pay Per Click [Updated]
• Amazon Affiliate Requirements – Disclosure and other Rules
• Earn Money With Amazon Affiliates – Top 10 Quick Growth Hacks
• 7 Best Niche for Amazon Affiliate Marketing

WordPress has been frequently updating its features over the years and on the 5.0 update, it is unconfined the multisite feature. WordPress multisite feature is extremely useful for content marketers, developers, and bloggers who manage multiple WordPress sites at a time. 

If we look closely it’s not only the bloggers who work on multiple WordPress sites, there are developers and organizations that use this system to manage dozens of clients at a time. Moreover, you can see some organizations allow registered individuals to publish blog posts while the owner or super admin can only make changes inside the WordPress admin dashboard. It is feasible to do so because of the multisite feature.

The purpose of this post is to explain when to use multisite and how to get it all configured. Stay tuned as we will go through the step-by-step procedure until we launch multiple sites under one WordPress admin dashboard.

Why Multisite? 

Before diving into the tutorial, let’s understand when you should decide to go for multisite over a single WordPress installation and when you should not! This is important because at some point you may think WordPress multisite would be a better option for your online business however, that is not always the case.

You would prefer to analyze the advantages and limitations of multisite in order to make the right decision during WordPress installation depending on your website standards and its possible requirements.

Pros of WordPress multisite: 

• All in one dashboard. The super admin gets the control in one place of the entire WordPress site under that network.
• Installation of themes and plugins on multiple sites takes only one go.
• Updating becomes easier since it takes just one click to update the components of all WordPress installations under that multisite network.
• Multisite allows creating unique dashboards for each site and site admin. 
• Website backup is easy because you can store all site data in a single backup.
• The use of server resources for multisite is less than individual WordPress installation and easy to optimize as well.

Cons of WordPress multisite: 

• Not all plugins are supported by multisite. Since most of the plugins are designed to work on a single WordPress installation, installing them on multisite may raise the possibility of plugin conflict. 
• Individual site admins can’t install plugins/themes which limits the power of administrators.
• Traffic spikes can slow the website’s performance and may create trouble for the entire network.
• Hacker or server downtime will affect all the sites under that network.
• A data breach will involve all the individual WordPress sites.
• Since all sites share the same user data identical user accounts can not be created for two different sites. 

How to Setup WordPress Multisite

Step 1: Preliminary requirements before setting up WordPress multisite 

Your first and foremost step would be getting a quality web host. It is possible to set up a smaller multisite network on shared hosting. However, we would recommend managed web hosting or a VPS for better server response and site performance.

The next thing you need to know is how to install a regular WordPress site and working experience with FTP clients would be better.

For WordPress multisite, another important step is to pick your domain or URL structure. You have the option to choose between subdomain and sub-directory.

Moreover, if you already have WordPress installed the pretty permalink should be activated. This means that the permalink structure of your WordPress should look like this: http://yoursite.com/sample-post rather than http://yoursite.com/?p=123.

Next, make sure all plugins are deactivated before initiating the multisite feature. This step is crucial because an activated plugin can create conflict with multisite since we know multisite does not support all WordPress plugins. So in order to make sure you do not face any issues during multisite configuration deactivating installed plugins is a safe choice.

Step 2. Activate WordPress Multisite Feature 

As we progress, the next task is activating the WordPress multisite feature. The multisite feature can be activated on a pre-installed WordPress or during a fresh WordPress installation.

Activating multisite on a pre-installed WordPress is a manual process, however, activating it on a fresh WordPress installation takes a single check on the ”enable multisite” option.  

Now let’s understand the manual way. The condition for this is to have a WordPress site already installed. And you would like to create a backup of your complete site. After creating the backup you need to access the wp-config file from your cPanel or by using any FTP client and open that file for editing.

In the wp-config file locate this line “/* That’s all, stop editing! Happy publishing. */”

Now right before this line, you need to add the following: 

/* Multisite */
define( ‘WP_ALLOW_MULTISITE’, true );

Check out this example below:

Now save the file on your server and the multisite feature will start working on your WordPress.

On the other hand, if you are about to install a fresh copy of WordPress then you should check the “enable multisite” option. Once you check that option and your WordPress will be configured for the multisite feature. This option basically pre-configures the wp-config file so that you don’t have to do it manually. 

Step 3: Configure your WordPress network

Now since your multisite feature is enabled you need to set up an environment for the WordPress network. In order to do that log in to your WordPress dashboard and find network setup under tools in your left sidebar.

Once you get there, a message appears that says Apache’s mod_rewrite module must be installed in order for the multisite feature to work. If you have reliable hosting this module should have been enabled already.

Next, you will have to follow your decision whether you planned to use subdomains for your sites in the network (eg: site1.yoursite.com) or you wanted to use a subdirectory instead (eg: yoursite.com/site1).

Select your preferred domain structure and provide a network title which is your new WordPress site title followed by the network admin email address. Click on install to establish the first site in your WordPress network.

Step 4: Complete the network configuration 

In order to complete the network setup, you need to follow the guideline provided by WordPress. It will give you two snippets of codes that must be added to your wp-config file and .htaccess file respectively. These two files will be available in your root directory.

Note that it’s extremely important to back up both of these files before making changes. Otherwise, sometimes simple misplacement of the custom codes can break your site. 

After file backup adds the following code snippet to your wp-config file above the line “/* That’s all, stop editing! Happy publishing. */”. This code mentioned below should display on your WordPress network configuration dashboard as well. 

define('MULTISITE', true);
define('SUBDOMAIN_INSTALL', false);
define('DOMAIN_CURRENT_SITE', 'gamespec.tech');
define('PATH_CURRENT_SITE', '/');
define('SITE_ID_CURRENT_SITE', 1);
define('BLOG_ID_CURRENT_SITE', 1);

Once you have updated the wp-config file next, open the .htaccess file and replace other WordPress rules present there with the following code snippet.

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]

# add a trailing slash to /wp-admin
RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]
RewriteRule . index.php [L]

After the modification, make sure to save the .htaccess file on the server.  

Step 5: Network Admin Menu And Network Settings

Once you have changed the wp-config and .htaccess file, log in to your WordPress dashboard. You should see the “network admin” and “my sites” options on your WordPress upper admin bar. Hover on my sites and the network admin menu will be displayed. 

Below the network admin, you will find the list of your sites in the network and their respective dashboard, posts, and comments. To enter the backend of these sites all you need to click on their names from the list.

The network admin menu consists of the following menu tabs,

Dashboard: The dashboard has a widget to create a new site or a new user to the network. You can also search for existing sites and users as well.

Sites: On this tab, you will find all your sites in the network. For each site, you will have options for edit, dashboard, and visit site. You can modify site settings, themes, and users under the edit option. Bulk action such as deleting sites, active, and deactivating can be done from this page. This list of your network seems similar to a page and post list on a regular WordPress admin panel.

Users: In the user tab you can assign administrators to your network. Each user added here will have the super admin rule which means they can control each site of the multisite network. You can edit admin details, add new ones, as well as remove admin from your network. If you want to assign users or admin to a particular site only then you need to add a user via the administration panel of the site.

Themes: This tab has the option of installing and uninstalling, activating, and deactivating themes for your whole WordPress multisite network.

Plugins: Just like themes in this tab, you will find the list of installed plugins for the network. You can easily add supported plugins to all the sites, delete a plugin, and activate, and deactivate them whenever necessary.

Settings: This is the admin area of the multisite network where you have the control to modify your network title, and administrator email address, allow users to register on the network, and allow a logged-in user to create a new site, etc. Moreover, you can design a custom welcome email for each newly signed user, create custom comments for the first page, or post edits performed by any user.

Custom file upload limitations can be adjusted along with the allowance of the file extension. You can set a default language for the network which would be the global language setting for all websites.

After these settings, your multisite network is pretty much ready for assigning new websites and configuring themes and plugins for them. Now let’s start by adding a new site to the network.

Step 6: Add a new website to the network 

Currently, at the initial stage, you have only one website running under the interface that doesn’t make any sense. A multisite is only necessary when you need to have at least two sites installed under the same network. 

There is no limitation on installing websites under a multisite network. You can always add another site to the list whenever needed. To add a new website follow the steps mentioned below.

• Go to my sites > network admin > sites and click on add new.

• For the site address (URL) enter the desired website address. According to the domain structure you have chosen the site address can be assigned. In this example, we have picked the subdirectory URL structure so we need to add the subdirectory after the primary domain. 
• Along with the URL you need to add the site title that will appear in many places on your super admin dashboard such as under network admin and site list. The site title will appear in metadata such as page title or in the front end as well.

• After the site title, you can set the site language against the global language setting of the network.
• Next, choose an admin email address for the new site specifically. This email has to be unique from any other email address available in the network.
• Click on the add site button to create your new site and have it on your site list. You can find the new site on My sites > Network admin > Sites.

Site contexts such as URL, homepage address, blog title, blog description, and many more can be modified in the setting tab of every site.

Step 7: Install Themes in Multisite

Once you have added sites to the network themes and plugins also need to be installed. We start by installing a theme for the sites. Remember that you need to install a theme only once and that theme will be applied to all the sites in that network.

• First, go to My sites > Network admin > themes and click on the button add new.
• Find and install a theme from the WordPress repository.

• Next, click on network enable to globally activate the theme for all sites on the network.
• You can manage all installed themes from My sites > Network Admin > Themes. Themes can be network-enabled or network disabled from the theme list.
• A network-enabled theme means that the individual site owners can’t control these themes but these themes will be available for use on their websites.

Step 8: Install Plugins on WordPress multisite

Similar to themes in multisite, only super admins can install the plugins. Individual site administrators can only activate and deactivate the plugins for their websites. The site admin can activate and deactivate plugins only if the super admin enables the administration menu option.

To enable the administration menu go to Settings > Network settings and check the “enable administration menu” box for plugins. 

Now head towards My sites > Network admin > Plugins and click on add new button to add a plugin to the network. Find your plugin on the WordPress repository, install the plugin, and click on “network active”.

The plugins marked as “network active” will be applied globally to all the websites. The site owners can choose whether his site needs a plugin to remain active or not.

Wrapping up: 

Once you complete all these steps correctly the WordPress multisite is ready for regular use. You can now add more sites, themes, and plugins from the super admin dashboard. The procedures are the same as mentioned above.

The individual sites in the network can publish posts and pages like a typical WordPress site. It is possible to do a lot more with a multisite for example connecting it with Cloudflare. But that could be a whole new tutorial. Finally, we hope this guide is clear enough to help you set up your first WordPress multisite. 

You can also read:

• Top 5 Best Affiliate Programs That Pay Per Click [Updated]
• Amazon Affiliate Requirements – Disclosure and other Rules
• Earn Money With Amazon Affiliates – Top 10 Quick Growth Hacks
• Free Amazon Affiliate WordPress Plugins [2022 Update]

When you try to optimize your WP site speed, you need to remove unnecessary CSS. It delivers a faster page loading experience to the users and improves your site ranking in the Google page speed test.

We focus on using reliable and fast web hosts, enabling caching, optimizing images, and removing unused plugins to reduce server load, compressing javascript & CSS, using a content delivery network, etc.

But sometimes we can improve our page performance even more by avoiding those components which load as bloats. So, next in the list you can remove these CSS and JS files from WordPress to make your page feel smooth and fast. In this article, we will particularly focus on avoiding CSS that is not required.

Of course, there are great plugins to unload specific CSS from a page, such as WP Asset Clean Up, PurifyCSS, or Perfmatters to name a few. In this article, we will see how to do it with and without installing plugins on your WordPress site.

Before that, let’s go through…

What is unused CSS?

Unused CSS is the CSS code that loads regardless of its importance on a particular page. Some of these codes do their work to design page elements, however, the rest(most) of them are not required because a single page does not demand all the CSS codes written for the entire website.  

Most of the time almost 80% of the CSS files probably do not do anything on a single page. You can test it on your personal site’s homepage and observe how many CSS files are being used on the page against what is the total number of CSS files being served.  

Why does the plugin load all CSS?

During development, the theme developers need to write the theme in such a way that it will support all kinds of websites whether it’s a blog, forum, woocommerce site, and so on. It has a decent level of complexity because individual sites require various HTML elements along with their own adjustments.

These include our daily used elements:

1. Search bar
2. Navigation bar
3. Widgets
4. Icons
5. Typography
6. Comment box
7. Social media section
8. Author bio section
9. Buttons
10. Tables 

and the list goes on… 

For example, when a plugin is including the style.css file, it would be something like this

<style>
    @import url("style.css");
    p {
           color: blue;
           font-size: 16px;
        }
</style>

99% of the time developers put all the CSS codes in this style.css file. What it does is load all the codes from the style.css file regardless of the certain elements you are using on a certain page, and all the CSS will be served to your visitor’s browser. And for this, you have no right to blame the developers either.

What if we don’t serve these elements?

In your blog, you don’t need Woocommerce if you are not running an additional store, you don’t need a comment box either if you are using a third-party commenting system (Disqus for example). So these elements can certainly be avoided while loading the page. 

Again some elements are needed in certain pages although are not necessary for all pages on your site. A good example is the author box, it is a part of your blog posts however on pages such as the homepage, privacy-policy an author box is worthless. 

Avoiding this CSS will only improve your page performance because they are unused CSS and simply are not doing anything good. 

Note: It’s not just the elements of your theme, plugins do inject additional CSS into your pages. This another good reason for keeping the installed plugin count low on your site.

So, does it say you can remove all the unnecessary CSS from a WordPress page!

Why is removing CSS not an easy task?

Filtering out the unnecessary CSS is not an easy job to deal with, mainly because of dynamic classes. It’s a technology to load the function of a class at runtime. It allows loading CSS functions that are uncertain or not known before a web page starts loading.

The Javascript function of your site can load CSS classes as needed and it does not have to keep track of the name of classes before any one of these classes is loaded and run. This behavior makes it difficult to identify which part of the CSS will you unload and whether it is safe given missing CSS can break your page.

Also, extraction of used CSS is not easy like critical CSS because there might be js files that call a certain CSS class following a particular event of a button click. These CSS classes might be required for animation such as the “go-to top” button on your page. Being dynamically inside javascript these CSS classes are extremely difficult to find for removal.

Note: Critical path CSS which is an important style/CSS required to render above the fold contents. The rest of the required CSS is loaded in the footer section of the page to avoid render blocking. 

How to find unused CSS and JS files on your pages

To remove or avoid using unnecessary CSS files we need to analyze those files first. The most comfortable way to do this is the coverage tab in the Chrome dev tool. To initiate it;

• First, open the page you want to debug.
• Press Ctrl + Shift + I to open the chrome dev tool.
• Click on settings icon > select more tools > select coverage.

• Then click on the reload button that appears below.

• Chrome will analyze your webpage and it will prepare a report where you can see the element’s URL, their types, total bytes, unused bytes, and Usage virtualization.

You need to focus on the Usage virtualization tab, mainly the correlation between used and unused bytes of page elements. Red color represents the number of unused bytes whereas blue color means the number of used bytes. 

Then you can select the URL to dig a little more to find out what exactly is being used and what are unused codes. You can see the unused and used code section in the same red-blue color representation. 

See this example below;

(As we aim to look for unused CSS make sure you have selected the URL of a CSS file. In this example, I did select a JS file only for tutorial purposes)

How do we remove unnecessary CSS

There are multiple approaches to avoiding or reducing unnecessary CSS on your webpage. I will try to keep the hierarchy in reverse order of difficulty. 

1. You can avoid inline CSS styling in the WP editor

While creating a post we usually type in the default Gutenberg editor which is good because it allows you to create a beautiful looking well-organized page. But the block adds additional inline CSS to your page. 

Typically, if you keep your posts simple and do not use advanced Gutenberg styles then you can avoid the inline CSS by using the code editor. You can use HTML elements such as <p> for paragraphs, <H1>, <H2>, etc for headings, <li> for list, and so on.

For example;

You will be able to use the classic editor too once you paste the final copy of HTML into your WordPress code editor.

2. Generate critical CSS

Critical CSS can be beneficial to improve FCP (First Contentful Paint) where it only renders above the fold contents in the header and delays the loading of other styles to last. Ultimately this improves your page speed and resolves the render-blocking warning in the page performance testing tool.

More than removing the CSS from a page, delaying is the key mechanism here that avoids the loading of CSS during page load.

Various WordPress plugins can generate critical CSS for example Autoptimize, WProcket, etc. Alternatively, you can use Criticalcss.com to generate critical CSS in a couple of simple steps.

3. Use a CDN to deliver CSS files

CDN can drastically improve the content delivery speed because of its widely distributed network which reduces the distance between users and servers. Thus it can reduce server latency and download of CSS (not only just CSS though). Even if you have a lot of unused CSS files on your page CDN can deliver them in less than 50 ms.

So the use of CDN won’t necessarily remove unnecessary CSS from your page instead it will quickly deliver the complete CSS along with other contents in so much less time. You can use good CDNs such as MaxCDN, Sucuri, Cloudflare, etc.

4. Use the Asset Cleanup plugin to remove CSS files (plugin)

The asset Cleanup plugin marks it very easy for the users to unload CSS from your site. It has a free version available in the WordPress repository. All you need to install and activate it to find and unload CSS files in CSS/JS manager. 

I would recommend this plugin because you will find tips for each CSS file to choose whether you would want to unload or keep it. Also debugging your site becomes easy because it provides a simple enable/disable option and you will know which action is breaking the site and which one is improving the performance.

You can also open any published page and you will see a list of loaded CSS and JS files. These files are classified so it’s easy to go through them. Then you can see which are stylesheets not getting used on your page and then unload them sitewide or for individual pages.

Remember, sometimes CSS that seems unused on a particular page may still have work to do so removing them can break the page. The good news is you can immediately revert the change if unloading any CSS breaks a page.

5. Use the Perfmatters plugin to remove CSS (plugin) 

Perfmatter is a premium plugin which is another great option when it comes to unloading js and CSS files from a page. It comes with a script manager that is super simple to use. You will have the ability to unload an entire plugin or individual js/CSS files from a page.

There is nothing to configure on your part. All you need to install the plugin, activate it and you can see the script manager on the WordPress toolbar for each page of your site. 

6. Create a plugin manually to remove CSS (and JS) files

This is a manual approach to removing unused CSS files and you will create a plugin that will keep the record of removed CSS. In WordPress, when you want to remove unnecessary CSS/JS there are four main functions you will require. 

• wp_deregister_script($handle): Remove the registered scripts.
• wp_dequeue_script($handle): Remove the scripts enqueued before.
• wp_deregister_style($handle): Remove the registered stylesheet. 
• wp_dequeue_style($handle): Remove the stylesheet that you enqueued before.

And other required functions to create the plugin are,

• __return_false()
• __return_empty_array()

You may also need conditional WordPress tags to remove unused CSS/JS files on a certain page. Now to create the plugin go to wp-content > plugins, create a new folder named “remove-resources” followed by the .php extension.

Add the following content to the file:

Now for example if you want to remove styles and scripts of the Jetpack plugin you need to add the following code into the remove-resources.php file.

Finally, go to the WordPress plugin manager and activate the remove resources plugin. It will remove the CSS you have mentioned in your newly created plugin.

Final words:

It’s not easy to remove every single bit of unused CSS from your site, and it’s almost impossible for us as a user of WordPress! But with the mentioned steps you will be able to reduce unnecessary CSS from a page and improve page speed + user experience. 

After reading the article share your thoughts with us in the comment section and don’t forget to share it. 

Cheers…

There is a general trend on the internet to track what the website users are doing on the page. In order to track activity such as clicks or how the users are moving one page to another on the website, the webmaster normally uses two types of methods called UTM and GTM tracking. 

Another scenario is button click tracking which is very popular and recommended to use if you have a WooCommerce website. However, button click tracking can be used in general websites to track conversions such as buttons containing affiliate links or any specific landing page. 

Now, if you are using a WordPress site you can set up the link and button tracking using plugins. Since configuring Google tag manager or UTM code in Google analytics event is a manual process, so to avoid any mistakes you can take advantage of two great plugins for WordPress.  

Generally, there are multiple plugins available to track links and you are free to choose any of them. Though, the two most recommended plugins with the best features are MonsterInsights and OptinMonster. That being said let’s dive in and see how to track links and buttons with these two plugins.

Track Links And Button With MosnterInsight

MonstarInsight is a powerful analytics tool that offers an in-depth report of user activity on your website. It will let you discover exactly how people came to the website, what are keywords bring them in, which site actually referred the visitors, and most importantly what the visitors are clicking on the website. These reports help the plugin to guide you to improve website performance as well.

MonsterInsights makes it so simple to connect your WordPress site with Google Analytics properly. Simply get your tracking ID from Google analytics and place it inside the settings of MonstarInsight to get the stats inside your WordPress admin. This procedure is much easier than manually adding analytics codes and configuring event tracking etc.

Let’s find out how it works:

#1. Install The Plugin From WordPress Repository

Install MonsterInsights (Google Analytics for WordPress) either via the WordPress.org plugin repository or by uploading the files to your server. Activate the plugin and it will take you to the setup wizard. 

#2. Configure Plugin With Setup Wizard

Proceed by describing your website category and click on continue. Remember these steps are highly recommended if you are using this tool for the first time and help you properly configure the plugin. Additionally, it allows you to avoid any misconfiguration. 

In the next step, MonsterInsights will ask you to connect your Google Analytics account so that all the links and button clicking events can be tracked by analytics.

After successfully connecting to your Analytics account it’s time to configure your plugins settings so that links & button tracking work well. If you have affiliate links on your website you can set the path for those links to get tracked. Also, you can mention the users who can see tracking reports.

After saving the settings MonsterInsights will be ready to use and it will deploy tracking and start collecting data which you can either view in Analytics events or the WordPress dashboard. Depending on your website size it will take 30 minutes to 24 hours to display data in Google Analytics.

#3. Advance Settings Of MonsterInsight

After finishing with the setup wizard you can take some advanced steps to make your report more appropriate like enabling the demographic and interest report of the links. 

Go to the insights on your WordPress dashboard menu and click on settings. Swap to the “engagement” tab to configure link attribution.

To track eCommerce links and buttons activity you need to look for the eCommerce tab inside the settings window. Enabling this feature requires a premium plan so that you can see click and conversion rate, and purchase button action with revenues.

With MonstarInsights you can bring your website tracking to a whole new level. After setting up this plugin you can go to Google Analytics and check the link & button clicking events under the real-time tab or behavior tab. 

… or you can use the MonsterInsight report inside the WordPress dashboard too. You can detect audience type, device, link categories, and clicks from the countries. 

Moreover, most clicked outbound links, incoming referral links can be found inside the plugin report.

Moving to the next plugin OptinMonster, let’s find out how we can track links and buttons with this plugin.

Track Buttons And Links With OptinMonster

This is another great option for tracking links, increasing leads, increase subscriptions from an all-in-one plugin. More than tracking and it provides you dynamic ability to make personalized engagement campaigns with the help of popup messages, floating bars, lightboxes, and other interactive elements.

In terms of link and button tracking, all you need to do is add the desired links and buttons into the optinmonster elements and let it track everything automatically. Most of the engaging part of this plugin is not only the interactive elements it has, instead the ability to track and predict visitor behavior makes this plugin a perfect choice for many professionals.

So let’s dive in and see how you can configure this plugin for link tracking.

#1. Install The Plugin From WordPress.org Repository

First of all search for the plugin OptinMonster – Best WordPress Pop-up Plugin and install/upload it to the website server. Activate the plugin.

#2. Configure The Plugin With OptinMonster Account

Now a new window will appear which will ask you to either create a new account or connect to your OptinMonster account using an API key.

Remember that OptinMonster is a premium plugin and you should have a plan before connecting your WordPress website. There are four plans which offer different types of features are called basic, plus, pro and growth. 

The UTM link tracking features are available only in Pro and Growth plans which costs around $29 and $49 per month accordingly. 

After creating your account go to the Optinmonster account and create a new API key inside the API dashboard.

In the next step copy your API key and paste it inside the API credentials settings of the WordPress plugin and click on connect.

When your website is successfully connected with the OptinMonster account you will see a new tab called Optin above the “API credentials”. Go there and click on refresh to appear all your Optins in the WordPress plugin.

#3. Creating Optin And Track It With Analytics

With conversion elements like lightbox subscription, floating bar, and closing popups OptinMonster does a great job to get more returning traffic and convert them to leads & customers. At the same time, it allows you to track all the activity on these elements with Google analytics or optinmonster report. 

Setting up the conversion analytics with optinmonster is pretty easy. Craft your elements, publish them, connect to Google analytics then track all your growth. 

Create any pop-up or buttons in the OptinMonster account and then go to the analytics. To configure your Google Analytics account click on add new account and generate the authorization code. This process is simple and should not give you any headache while setting it up. 

You can also set an account label to quickly identify it inside your Analytics account. 

In the Optin monster site report you can track the highest conversion pages with their URL, Leads, and click conversion percentage. The graphical presentation makes it easier to determine where you need to improve and where everything is going very well. 

Moreover, you can track email subscription buttons click by integrating your account with popular email marketing tools like Aweber, MailChimp, Getresponse, and much more. So optinmonster is a great tool if you really want to scale your business depending on live and practical stats.

Final Words:

Though there are a number of great WordPress plugins for creating and tracking your website activities OptinMonster and MonsterInsight have done the best job which really improves your site performance. While this post just scratches the exterior of these two plugins, it’s got the decision point you need to take for advancing towards a perfect tracking campaigning and taking your initial strategy to the next level.

With the link and button tracking, you see your site internally and visualize your next decision perfectly which would not be possible without tracking and getting the reports. And in my sight, Optinmonster and MonsterInsigt have done everything right for a WordPress site owner to save lots of time understanding the things of Google analytics so that they can focus more on the outcome.