Removing unnecessary JavaScript from WordPress is a great way to enhance the overall performance. It stands for you’re following core web vitals for optimizing site speed.
In this case, erasing any code the browser doesn’t need to load ensures a faster and more responsive website. It’s not just about the initial cleanup.
Inspecting your WordPress site for any unused JavaScript daily is a great practice. It becomes obvious when you undergo theme changes or introduce new plugins.
Throughout this article, we will guide you through several effective approaches to removing unused JavaScript in WordPress.
Method 1: Removing Unused JavaScript with a WordPress Plugin
Let’s begin by discussing how to remove unused JavaScript using a WordPress plugin, specifically the Asset Cleanup plugin:
1. Install the Plugin
2. Enable Test Mode
Before removing unused JavaScript, switch your WordPress site to test mode. This allows you to experiment without affecting your live website.
Changes made in test mode are visible only to you as the administrator. You can also use a development or staging site.
You can find the test mode option under “Settings of Asset Cleanup plugin” > “Test Mode.” Activate it, and ensure that “TEST MODE is ON” appears in the WordPress admin bar.
3. Start Unloading JavaScript
After enabling test mode, proceed to the JS Manager. On the initial page, you’ll see a list of JavaScript files that load on your homepage.
To prevent them from loading, use the slider labeled “Unload on this page.” You can also use the “Unload site-wide” checkbox to turn off a particular file for your entire website.
Don’t forget to click “Update” at the bottom to save your changes. Similar options are available for posts, pages, custom post types, and media pages.
Method 2: Remove Unused JavaScript Using WP Rocket
If you’re using the WP Rocket plugin, here’s a simpler method to remove unused JavaScript:
- Open the settings and click on “WP Rocket.”
- Look for the “Delay JavaScript Execution” option under the “File Optimization” tab and enable it. This feature automates the process, saving you time and effort. WP Rocket will take care of optimizing your JavaScript.
Make sure to thoroughly test your site’s functionality after enabling these options. Your page speed score, as indicated by Google PageSpeed Insights, should improve significantly due to the reduction in total blocking time.
Method 3: Remove Unused JavaScript Without a Plugin
For those who prefer not to use a plugin, you can manually remove unused JavaScript with the following method:
In JavaScript, “dequeue” is not a standard built-in function like “enqueue.” Instead, “dequeue” typically refers to removing an element from the front of a data structure known as a “queue.”
If you want to dequeue a javascript asset without using a plugin, do the following on the functions.php file:
/**
* We will Dequeue the jQuery UI script as an example.
*/
function wp_remove_scripts() {
// check if user is admin, therefore only logged-out users wont load the script
if (current_user_can( 'update_core' )) {
return;
}
else {
// Check for the page you want to target
if ( is_page( 'homepage' ) ) {
// Remove Scripts
wp_dequeue_script( 'jquery-ui-core' );
wp_deregister_script( 'jquery-ui-core' );
}
}
}
add_action( 'wp_enqueue_scripts', 'wp_remove_scripts', 99 );Following this method, you can optimize your WordPress website by removing unnecessary JavaScript. It’ll ensure improved performance and faster loading times.
After activating these settings, confirm that your website is operating normally. JS delaying will lower total blocking time(TBT), increasing your page speed score in the Google PageSpeed Insights tool closer to 100.
Method 4: How to Manually Remove Unused JS in WordPress
If you don’t want the hassle of trying plugin or without a plugin, here’s a manual method:
Delay JavaScript Files
The most common way to delay JavaScript is to move the scripts to the footer. This is easiest if you directly edit the theme that enqueues the script in question.
Regarding this issue, you need to set its last parameter to true, and it will automatically load in the footer.
Here’s what that looks like:
function ns_load_scripts_in_footer() {
wp_enqueue_script('script-name', get_template_directory_uri() . '/scripts/myscript.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'ns_load_scripts_in_footer' );
Similarly, you can register it for certain conditions, such as when the browser loads a page where you want it to appear. Here’s how to load the same script only on your homepage:
function ns_load_scripts_in_footer() {
if (is_home()) {
wp_enqueue_script('script-name', get_template_directory_uri() . '/scripts/myscript.js', '', '', true );
}
}
add_action( 'wp_enqueue_scripts', 'ns_load_scripts_in_footer' );
If your problem is with a script, not in a separate file, it’ll output directly on the page. You need to find its origin and copy it to its own file.
After that, upload it to your theme. From there, you can register it to load in the footer shown above.
How to Detect Unused Codes like Javascript on Your WordPress Website
Removing the javascript is great for the overall WordPress website performance. The question that follows this issue is, how do we identify the unused ones?
If you don’t identify it, it’ll be tough for the fixation. To find out if there’s any Unused code on your website that shouldn’t be there, you can follow these methods:
1. Speed Testing Tools
You can use speed-testing plugins, like the ones mentioned earlier when you run your website through Google PageSpeed Insights.
It might show a warning in the “Opportunities” section. Click on it, and the service will tell you which file is causing the issue.
GTmetrix also highlights this problem under “Structure” and provides information about the files responsible for it.
2. Browser Developer Tools
Another option is to utilize browser developer tools. In Chrome, go to the tools menu, then select “More Tools” > “Developer Tools,” or use the shortcut Cmd/Ctrl+Shift+I.
Press Esc to open the drawer, and click the three-dot icon in the upper left corner to access “Coverage.”
You can get there by pressing Cmd/Ctrl+Shift+P to open the command line. Typing “coverage” and selecting “Show Coverage” from the list.
Once you’re ready, click the reload button to start capturing data. This will give you a list of files the browser loads for the page. Along with details such as their type size. Also, the percentage and bytes of code the page isn’t using.
You can double-click on any file to see a detailed breakdown. It’ll help you to know parts of the code. They are contributing to the page, and which parts are not.
This process can be eye-opening and is a good starting point for identifying necessary and unnecessary code on your website.
You might wonder if you need to do this for every page. If your website is small, you can consider it.
If it’s large, begin with the most critical pages, such as the homepage, key articles, the About page, or your shop.
Just focus on the slowest pages first. That’s where you’re more likely to encounter this issue. You can refer to the website speed testing article for more details.
9 Easy Ways to Reduce Javascript in WordPress
1) Compress & Optimize Images
Ensure that your website employs optimized and compressed images, and the image format must be WEBP/ AVIF to reduce the overall page size effectively.
Utilizing large, uncompressed images can significantly boost the loading speed of your web pages. Also, it hinders the execution of scripts.
For instance, let’s consider an e-commerce website that showcases product images by compressing these images without compromising their quality.
You can enhance the site’s performance by allowing customers to browse products more swiftly and without delays.
2) Async/Defer Javascript
The asynchronous loading of JavaScript files to facilitate parallel downloads and execution. Without interrupting the loading of other essential resources.
To accomplish this, consider utilizing the ‘async’ or ‘defer’ attributes when embedding script tags within your HTML code.
Imagine a news website that relies on JavaScript to display real-time updates only by loading these scripts asynchronously.
The site ensures that breaking news updates load swiftly. Other elements, like images and text, also load seamlessly.
3) Lazy Load Images
Implement lazy loading for images and other non-critical elements on your website. This technique postpones the loading of resources until they are required.
Let’s take the example of a photography portfolio website. With lazy loading enabled, images further down the page only load when a user scrolls to that section.
The conserve bandwidth expedites the initial rendering of the webpage. It ensures a smoother user experience.
4) Use Content Delivery Networks (CDNs)
Incorporate Content Delivery Networks (CDNs) into your web infrastructure. CDNs store a website’s static assets, including JavaScript files.
They keep information on servers to distribute globally. This strategic placement minimizes the distance data must traverse and increases loading times.
Consider an international news/blog site that employs CDNs to serve articles to users worldwide.
Reducing the geographical distance between the user and the server, CDNs ensure that news articles load swiftly.
5) Gzip Compression
Enable Gzip compression on your server to shrink the size of transferred files, including JavaScript resources.
You can Enable Gzip compression in WordPress using plugins like WP Rocket. If you use WP Rocket, it will automatically add Gzip compression to your website.
This compression technique significantly decreases the time loading web pages and their associated assets takes.
How about an online marketplace where customers frequently browse through product listings?
Gzip compression efficiently reduces the size of product images and JavaScript files. So that customers can navigate the site swiftly and efficiently.
6) Review Third Party Scripts & Plugins
Conduct a comprehensive review of third-party scripts and plugins integrated into your website.
Minimize the utilization of these external resources, as each additional script contributes to longer load times and the potential for compatibility issues.
Consider a blog website incorporating social media sharing buttons from various third-party providers.
Reducing the number of these buttons and optimizing their loading can significantly enhance the site’s performance and decrease load times.
7) Deactivate & Delete Unused Plugins / Themes
Deactivate and delete any plugins or themes not actively used on your website. These redundant components can slow down your website’s performance.
To illustrate, take a business website built on a content management system (CMS). By removing unused themes and plugins, the site minimizes the clutter of extra code.
8) Use the Browser developer’s tool to Analyze Code
Employ browser developer tools to profile your website’s JavaScript code meticulously. Identify performance and optimize codes.
The optimization process may involve reducing unnecessary computations and avoiding excessive Document Object Model (DOM) manipulation. Let’s consider an online gaming platform.
Profiling and optimizing the JavaScript code for interactive games ensures that gameplay remains smooth and responsive, even on less powerful devices.
9) Install a performance optimization plugin
Install a performance optimization plugin, such as Autoptimize or WP Rocket, to automate various optimization tasks.
These plugins streamline processes like code minification, script combination, and more, ultimately enhancing your website’s performance.
A blog that relies on multiple scripts and stylesheets can benefit from a performance optimization plugin like WP Rocket.
The plugin ensures a faster and more efficient website for readers by automating tasks that would otherwise require manual intervention.
Does Unused Java Script Matter in WordPress?
Unused JavaScript files can have a significant impact on both the efficiency and user experience of your website.
One critical indicator this issue affects is the First Input Delay. FID plays a major role in evaluating how responsive a page is because it considers user input.
Unused JavaScript can also contribute to an increase in Total Blocking Time (TBT). Lighthouse is a tool for assessing web page performance.
The tool now strongly emphasizes Total Blocking Time since it measures a page’s interactivity based on user input.
The TBT metric determines a great amount of the performance score in Lighthouse.
This underscores the critical importance of eliminating unnecessary JavaScript from your website.
Unused JavaScript can hinder the rendering of web pages and prolong page loading times.
It’s important to recognize a few factors. The prime concern is that users should not wait for an extended period while a page loads.
Frequently Asked Questions
Final Thoughts
Unused JavaScript can significantly delay your website’s loading time. It requires the browser to download, parse, compile, and evaluate unnecessary scripts.
Not only does it increase the consumption of mobile data, but it also hampers the rendering process.
Together, they fall on a website’s performance and user experience. Removing unused Javascript from WordPress can achieve faster loading times and improve your website’s functionality.
About Author
Hi, I’m Abdullah – a WordPress performance, core web vitals expert dedicated to making sites fast. After 3 years of optimizing 150+ sites, I’ve cut page load times 50%+ and scored 90+ on PageSpeed.My passion is optimizing your WordPress site for lightning speed and an excellent user experience. With proven expertise in making sites blazing fast, I share tips to boost your site’s performance. Ask me anything! I’m here to help the WordPress community succeed online.