Removing unused JavaScript

How to use it?

Article instruction.

Video instruction: VK video, Youtube, Zen, [Rutube](https://rutube.ru/video/bea005ee519dc54f7bac0ce1635e5319 /).

In general, the procedure for working with the tool consists of 4 simple steps:

• Scanning site pages. Disable the file grouping function, if any, and start scanning pages of different types: product category, product card, information page, home. Adding 2 different product cards or 2 different product category pages is pointless, since the styles they use will be the same.
• Uploading cleaned files to the test site for development. Copy the files to the root folder of your website and replace the current files. If you have your own JavaScript file management system or use an atypical solution, then files need to be replaced manually.
• Testing and editing. Open pages, test them and check the browser console for messages like QSU_28, QSU_123. This triggered the beacon and means that a JavaScript function marked by the service as unused was called. Delete the beacon and uncomment the function that follows it. Repeat this action until the page is restored to working order. It will take up to 15 minutes per sample page.
• Removing beacons and commented functions. After testing, delete the remaining commented code sections and function calls of the form console.log("QSU_28"). They are the unused JavaScript code.

This function, if it is still used, will display the message “QSU_28” to the browser console during tests.

Tips:

• Start with the main files of your template, and then move on to plugins and system files.
• Carry out all manipulations on a test copy of the site.
• Use a version control system like git or SVN. So, you will control the change of each line, and in case of which you will be able to return everything back.

How not to delete anything superfluous?

Most of the JavaScript code of the page is executed in response to user actions. For example, if a function is executed when clicking on an element, it will be commented out. This is because our tool does not simulate user actions.

We have provided a solution for this situation. In the files provided by our tool, we comment on unused functions and place beacons. If any function was commented out by mistake, but will be called in the code, then you will see a message in the browser console stating that the function is being used. After that, all you have to do is find the right line using the unique beacon code and uncomment the function.

Are there any analogues of our tool?

No.