My brother handed me a site that is quite developed, which I use in a truncated manner. The site contains numerous redundant JS scripts with data that load from a file on various pages. While I have deleted some unnecessary pages, there are still features on the pages I use that contain redundant functionalities. There is a question regarding the possibility of removing 80% of the js file's unnecessary code and data. Is there an automated method to detect this "ballast" code that could be causing slow loading of the site?

To delete unused CSS and JS files when loading a page in the browser, there are two methods available. The first way is to use premium plugins such as WP Rocket, whereas the second option involves utilizing a free plugin.

In terms of JS removal, unlike CSS, the WP Rocket plugin is incapable of deleting JS. However, activating the "Load Deferred JavaScript" and "Defer JavaScript Execution" options present within the "File Optimization > JavaScript Files" section will delay the internal and external code. As a result, this feature gets rid of issues related to blocking JavaScript rendering.

- Have you encountered any problems with slow-loading pages due to redundant code and data? If so, which tools or methods have you utilized for optimization?

While there aren't any tools that will automate the whole process of removing redundant JavaScript code, there are several tools available that might help you in identifying unwanted or unused JavaScript on your website:

Code Coverage in Chrome DevTools: When you load or run a page, the Code Coverage tool can tell you which files Chrome had to download and how many of those files were actually used. It could help you identify unused chunks of JavaScript.

PurgeCSS: PurgeCSS is generally used for removing unused CSS, but it can also be used for JavaScript. It works by comparing your content files with your JavaScript files and then removes the unused code. Keep in mind that you'll have to thoroughly test your site after using PurgeCSS, as it can be a bit aggressive and might remove code that is used infrequently or under specific circumstances.

Webpack and its Tree Shaking concept: If you use Webpack to build your JavaScript Bundle, it includes an optimization technique called "tree shaking." This essentially "shakes out" unused code. However, this only applies to ES Modules, and not code in the traditional CommonJS format.

Unused-files-webpack-plugin: This plugin for Webpack lists all unused files at the end of Webpack compiling. You could use it to check for unused JS files.

ESLint plugin (no-unused-vars): You can use ESLint static code analysis tool to detect variables and functions which have been declared but never used in your code. It's commonly used in development workflows to catch bugs and improve code quality.

UglifyJS or Terser: These are JavaScript minification tools that can remove unused code from your files. They will not provide explicit insights into what is unused, rather it will perform the removal during the minification process.

These tools might not cut down 80% of your JS file, but they can certainly help eliminate some of the unnecessary code that could be slowing down your site. Most importantly, always remember to backup your files before starting, and thoroughly test your site after each step to ensure it remains functional as you make these optimizations.


To dig deeper, here are a few additional strategies and tools that might assist in optimizing JavaScript on your site:

Javascript Static Analysis Tools: Tools like JSHint and ESLint are capable of providing static code analysis to identify problematic patterns or code that doesn't adhere to certain style guidelines. While these tools won't directly highlight unused JavaScript, they can aid in spotting potential issues in your code, making it cleaner and more efficient.

Dependency Visualization Tools: If you are using module bundlers like Webpack, tools such as Webpack Bundle Analyzer can give you a visual representation of how your JavaScript files are connected, and how much space they are taking relatively. This allows you to spot if there are outsized libraries/modules that are affecting your site performance.

Use Dead Code Removal Tools: "Dead code" is code that is never run or used. There are specific tools that can help in removing this, along with unused JavaScript. While some of the tools already defined like UglifyJS or Terser can help, another popular tool that you can use is Google's Closure Compiler. It removes dead code and also minifies the remaining code to make it smaller and faster to download. Be aware that these tools need proper configuratiuons to run effectively and not break your working code.

Defer loading of JavaScript: Reducing JavaScript isn't only about removing the unnecessary code. You should also ensure that the necessary JavaScript is loaded efficiently. You could defer parsing of JavaScript so that the JS files do not block the loading of the rest of your web page.

it's indeed a mix of manual work review and automation tools. Evaluating the JavaScript files will help to understand which files are crucial, seldom used, or not used at all. Once you determine that, the above automation tools can help optimize the code effectively. Do make sure you have a proper form of version control and always test your website thoroughly after applying these optimizations.


For further optimizations and approaches, consider the following strategies:

Profiling and Performance Monitoring: Tools like the Chrome DevTools Performance panel and Lighthouse can help you understand how JavaScript is impacting your site's performance. These give insights about how long scripts are taking to run, which functions are taking up most of the time, and the result of JavaScript on other key metrics, such as render time.

Refactoring: Sometimes the best way to reduce the volume and increase the efficiency of your JavaScript code is through a manual process of refactoring. This means going through your codebase, service by service, feature by feature, and continually asking "What does this bit do? Is it necessary? Could it be written more efficiently?" This process can help trim down the codebase, make it more maintainable, and make it easier to spot performance issues in the future.

Dynamic Import Statements: Dynamic import() syntax in JavaScript lets you load modules on demand. This could be a useful pattern if you've identified parts of your JavaScript which are only used under certain circumstances, so they don't need to be loaded initially.

JavaScript Compression: All modern browsers support gzip compression for HTTP requests. This means you can reduce the size of the JavaScript files transferred over the network by using gzip or another compression algorithm. This doesn't reduce the literal amount of JavaScript your pages use, but it can significantly reduce the load times, especially over slower network connections.

Leverage CDNs: Content Delivery Networks (CDNs) can help improve site speed by serving your JavaScript and other static files from a location geographically closer to your users.

HTTP/2: If you're serving your site over HTTP/1.1, consider upgrading to HTTP/2, which includes several performance improvements, such as multiplexing - allowing multiple requests and responses to be sent at the same time.