Remove unused scripts in WordPress like a pro

One of the keys to optimizing your WordPress website for speed and performance is to eliminate unnecessary scripts and styles from loading on your pages. These unwanted assets can slow down your site’s loading times and increase its overall page size. To efficiently remove unused scripts and styles, you need to identify which ones are being loaded and selectively exclude them. In this comprehensive guide, we’ll show you how to do this like a pro, ensuring your WordPress site performs at its best.

Step 1: Use Query Monitor to Identify Loaded Scripts and Styles

Before you can remove unused scripts and styles, you need to know which ones are currently loading on your WordPress site. This is where the Query Monitor plugin comes into play. Install and activate the plugin, and then navigate to your website. Click on the Query Monitor icon in the admin bar to access the plugin’s dashboard.

Step 2: Find the Names of Unwanted Scripts and Styles

In the Query Monitor dashboard, click on the “Scripts” and “Styles” tabs to view the list of loaded assets. Take note of the names of scripts and styles that you want to exclude. These names will be crucial for the next step. In the photo below, we can identify the name of a script added by Contact Form 7, which can be removed on pages that there is no contact form.

Step 3: Exclude Scripts and Styles in functions.php

To remove unwanted scripts and styles, you’ll need to add some code to your WordPress theme’s functions.php file, preferably in a child theme to avoid losing changes during theme updates. Here’s a general template for excluding scripts and styles:

function remove_unused_scripts_and_styles() { 
// Replace 'script-name' and 'style-name' with the actual names of the scripts and styles you want to remove. 
wp_dequeue_script('script-name'); 
wp_deregister_script('script-name'); 

wp_dequeue_style('style-name'); 
wp_deregister_style('style-name'); 
} 
add_action('wp_enqueue_scripts', 'remove_unused_scripts_and_styles', 999);

This code dequeues and deregisters scripts and styles with the specified names. You can add this code snippet to your child theme’s functions.php file, replacing 'script-name' and 'style-name' with the actual names of the assets you want to remove.

Examples for Excluding Scripts and Styles

Now, let’s explore some advanced scenarios where you may want to exclude scripts and styles selectively based on various conditions.

Example 1: Exclude Scripts on Specific Pages

You can target specific pages using the is_page() function. For example, to exclude a script (the contact form 7 script, change by your preference) on a page with ID 5:

function exclude_script_on_specific_page() { 
if (is_page(5)) { 
wp_dequeue_script('contact-form-7'); 
wp_deregister_script('contact-form-7'); 
 } 
} 
add_action('wp_enqueue_scripts', 'exclude_script_on_specific_page', 999);

Example 3: Exclude Styles on Category Archives

To exclude assets on category archive pages (Contact Form 7 main style is also called contact-form-7 like the script. In your case there might be another name, so be sure to check query monitor for the exact name):

function exclude_scripts_on_category_archives() { 
if (is_category()) { 
wp_dequeue_style('contact-form-7'); 
wp_deregister_style('contact-form-7'); 
 } 
} 
add_action('wp_enqueue_scripts', 'exclude_scripts_on_category_archives', 999);

Example 2: Exclude both Scripts and Styles on Product Pages

For WooCommerce product pages, you can use is_product():

function exclude_scripts_on_product_pages() { 
if (is_product()) { 
wp_dequeue_script('contact-form-7'); 
wp_deregister_script('contact-form-7');
wp_dequeue_style('contact-form-7'); 
wp_deregister_style('contact-form-7'); 
 } 
} 
add_action('wp_enqueue_scripts', 'exclude_scripts_on_product_pages', 999);

These examples demonstrate how to selectively remove scripts and styles based on specific conditions. You can adapt these scenarios to your unique requirements by combining conditions or customizing the code further.

Keep calm and remove unwanted scripts and styles!

In conclusion, removing unused scripts and styles from your WordPress site is a crucial step in optimizing its performance. By using Query Monitor to identify loaded assets and selectively excluding them with code in your child theme’s functions.php, you can ensure that your website loads faster and provides a better user experience. Whether you need to remove assets from specific pages, product pages, or category archives, these techniques will help you achieve a leaner and more efficient WordPress site.