Detect unused JavaScript and CSS in Bulk

This Node.js script uses Puppeteer (headless Chrome) to detect unused JavaScript and CSS from a list of given URLs. Redundant JS/CSS code can impact page load times, consequently affecting SEO. This webperf script helps to uncover resource optimisation opportunities.

Download from GitHub
GitHub link: https://github.com/sitebee/Unused-JS-CSS-Detector


The output is saved to a CSV, and the output data includes:
* Resource URLs
* File type
* Resource location (inline, local & 3rd party)
* Total bytes
* Unused bytes
* Percentage of unused code

This level of granularity can help facilitate a targeted approach to resource optimisation.

How to Use Guide for Windows PowerShell:​

1. Open PowerShell: Use the search bar to find PowerShell. Right-click on the PowerShell icon and select 'Run as administrator'.
2. Install the Dependencies: Run the command npm install puppeteer csv-writer. This will install the Puppeteer and csv-writer packages that are dependencies for the script.
3. Navigate to the Folder: Use the cd command to navigate to the directory containing your script.
   Example: cd C:\Users\YourUserName\Unused-JS-CSS-Detector-main
4. Run the Script: Now, you can execute the script using Node.js by typing node index.js and then pressing Enter.

How to Use Guide for macOS:​

1. Open Terminal: You can open Terminal by pressing Cmd + Space, typing 'Terminal', and then hitting Enter.
2. Navigate to the Folder: Use the cd command to navigate to the directory containing your script.
   Example: cd /Users/YourUserName/Unused-JS-CSS-Detector-main
3. Install the Dependencies: Run the command npm install puppeteer csv-writer to install the Puppeteer and csv-writer packages.
4. Run the Script: Finally, to execute the script, type node index.js and then hit Enter.

Now, you just need to replace YourUserName with your actual username, and you're all set!

Output example
Below is an example of the output. It will be located in your C:\Users\YourUserName\ folder. The CSV filename will be named output.csv

More Details
The Node.js script is to fetch and evaluate unused JavaScript and CSS resources from a list of URLs using Puppeteer. For every URL, you're collecting code coverage information, calculating the amount of unused bytes, and then writing this data into a CSV file.

Puppeteer is a powerful library that provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Here is what this code is doing step by step:

1. Importing necessary packages: Puppeteer is used for controlling the browser, and csv-writer is used to write data to a CSV file.
2. Creating an array of URLs: These are the web pages that the script will process.
3. Setting up the csvWriter: This will write the output to a file named output.csv, with specified headers.
4. Defining a helper function getResourceType(): This function determines if a resource is Inline, Local, or 3rd Party based on the relationship between the original URL and the resource URL.
5. Defining the main function getUnusedJSAndCSS(): This function does the following for each URL:
   • Launches Puppeteer and creates a new page.
   • Starts code coverage recording for JavaScript and CSS.
   • Navigates to the URL, waiting until all network connections have been idle for at least 500ms.
   • Stops the code coverage recording.
   • For each JavaScript and CSS file covered, it calculates the total bytes, used bytes, and unused bytes, and writes this data to the CSV file.
6. Finally, an immediately-invoked function expression (IIFE) is used to run the getUnusedJSAndCSS() function for each URL in the array. Since getUnusedJSAndCSS() is an asynchronous function, it uses await to ensure each URL is processed in order.

This script provides a good way to analyse the usage of JavaScript and CSS resources on a page and could be used to optimize resource usage. Unused CSS and JavaScript can negatively impact page load performance, so knowing where and how much of these resources are unused can be very valuable in improving website performance.

Download from GitHub
GitHub link: https://github.com/sitebee/Unused-JS-CSS-Detector

If you have any feedback comment below or on LinkedIn: https://www.linkedin.com/posts/chri...performance-activity-7080263847462215682-Gmo7