How to detect JS functions executed on page load in browser?

Question

JavaScript

I optimize the site for Google speed insights. The main stopper - js-scripts are processed for a long time.

There are a lot of scripts running during the loading of a WordPress page. 8-10 seconds the loaded page is processed. JS code is over 1MB. Although there is nothing dynamic on the site, there is a whole zoo in the template. Today I found a plugin for jQuery already in 2010.

I see CSS classes being added to the body tag within a few seconds of loading. I see how the slider appears with a big delay.

I want to leave only the necessary functions. And throw out the rest. But it is not possible to split a huge js file.
Tell me how to make a list of JS functions that are executed when loading? Or how to find unused functions?

Answer 1

There should be a rather technical approach, sometimes it’s better to assemble everything from scratch. But in general, you can use the blunt enumeration method + see what is called as.
In stupid enumeration, it will help you console.log()or alert()in the bodies of functions. If the function is called (here you need to watch how it is called, because some are called immediately, and some in other functions), and if it is running, then you will receive a message in the console or in a modal window.
But in general, it’s better to just master JS, the basics of site building, disassemble it into components, or maybe just find how these components are assembled on the site and, based on this knowledge, cut off the unnecessary. That's right, but a dumb search may well help you too. Look only from other pages, do not cut out the right one)