Product Idea: Unused Code Optimiser
I recently started developing a product as a side project. My ultimate goal is to learn while creating something useful for others. My product is not directly relevant to the content of this post, so I will not promote it here.
The topic of this post is more about an idea to develop a solution for a problem I faced while trying to improve my page load speed, and I believe that I'm not the first one to try this.
I'm pretty sure most of you have at least tried once to increase the page load speed of your application, if you have one. According to my research, it is one of the key factors not only to increase the number of visitors to your page but also to keep them on your page.
If you have ever tried to increase the performance of your website, I assume you are familiar with the following suggestions from Google:
- Remove unused JavaScript
- Remove unused CSS
- Eliminate render-blocking resources
I know that you can check the analysis of the used and unused code on the Coverage tab of the console tab of your browser. However, you need to spend some time analyzing the lines that are used and unused, and then generate a new file from there manually (at least that is how I know it).
What if we had a tool to analyze the used and unused lines dynamically and generate the minified files needed to render your page automatically? This way, you could use the actual libraries to develop your product and just generate the critical files right before you deploy a new version of your application.
I feel like most of the unused code is boilerplate code coming from essential libraries such as Bootstrap.css or jQuery.js. Please share your thoughts/knowledge if you think otherwise.
I found a tool that does almost exactly what I am saying for CSS files. You can check it out: PurgeCSS (https://github.com/FullHuman/purgecss). In my opinion, it's not super efficient, but it's useful.
On the other hand, I couldn't find anything on the JavaScript side. I believe that the main reason for not having an automated tool for removing the unused JavaScript code is stated in the answer to this question:
https://stackoverflow.com/questions/1167663/is-there-a-tool-to-remove-unused-methods-in-javascript
-
Do you think it is feasible to create it for the essential libraries like jQuery.js?
(I really don't know) -
Would it be useful to enter the URL of your web page and download your minified files for the specific libraries?
-
If it's feasable, would you like to team up to start working on it?
This could really only be interesting for 'legacy' code. Specifically because newer JS code can use tree shaking based on import and export of JS modules. This already automatically eliminates dead code before being deployed.
Would it be useful to enter the URL of your web page and download your minified files for the specific libraries?
I would never trust a code file that was generated by a third-party tool without completely combing through it. On one hand to make sure it works, but primarily from a security standpoint.
But running a huge, thousands line of code third-party library like JQuery through another third party tool means code that I didn't write (and maybe don't fully understand) is being changed. This means I would have to first learn the internals of JQuery and then still comb through all the changes the tool made to verify everything.
That honestly sounds like a huge headache.
Thanks for your feedback! I wasn't aware of the concept of "tree shaking". It's very useful to know.
Regarding trusting a third-party tool, you can always test the general behavior of your website after loading the optimized files. From a security perspective, all you need to do is type your website's URL, and your page will be rendered from its published source. Therefore, there is no risk to security at all.
I would like to elaborate on why this would be useful and to whom it would be useful.
I have recently developed a website (https://www.freeblogpostgenerator.com/) containing approximately 2-3k lines of code. I have only a few JS and CSS files that I created myself. However in order them to work correctly, they require loading Bootstrap and jQuery libraries. These libraries alone reduce my performance score to 80/100 for mobile users. The amount of unused code on page load from jquery.min.js is approximately 70% (27 KiB), while unused code from bootstrap.bundle.min.js is around 85% (26 KiB).
The same thing applies to standard CSS libraries, but as I mentioned earlier, there are already tools to reduce the unused code from CSS libraries.
I believe that eliminating dead code with a single click would be super beneficial for indie developers, as it could increase their page load speed by 15-20% on mobile devices within just a few minutes.
The amount of unused code on page load from jquery.min.js is approximately 70% (27 KiB), while unused code from bootstrap.bundle.min.js is around 85% (26 KiB).
This is probably another discussion, but for modern development I would avoid JQuery in its entirety, and tree shaking fixes the unused code in those minimized js files. Hence my remark about your product mostly being useful for 'legacy' code.
From a security perspective, all you need to do is type your website's URL, and your page will be rendered from its published source. Therefore, there is no risk to security at all.
Legacy codebases are usually enterprise and enterprises are usually pretty careful when it comes to security.
There are ways to obfuscate malicious code so it doesn't look like it does anything malicious. Or you could add a single line somewhere that downloads a script from another page.
Mind you, I'm not saying you're doing this, but someone could. There's actually an attack where people will hack a CDN that serves for example JQuery and add a small amount of malicious code.
Maybe a solution would be to show the changes in some kind of diff tool? That allows people to review them so they see you only removed code? Just trying to think of ways to make your product feel more trustworthy.
Oh I see what you mean, "Maybe a solution would be to show the changes in some kind of diff tool?" That's exactly how I was imagining it but I didn't even think from the "trust" point of view. It's useful.
On the other hand, I always have and probably will use libraries like jQuery and Bootstrap in the future as these help me convert my idea into a product faster. Therefore, I don't think it's only useful for the legacy code. I think now the question is: How many more people are using these kind of libraries? Is it only me or are there other people who need the same thing...
Would this was a single point focus tool ? free ?
If so, it would suit the traffic model that was highlighted here recently : Tool Sites Are IH's Dreams
Exactly! Considering 252.000 new websites are being published every day, you have
approximately 90.000.000 possible visitors per year.
https://siteefy.com/how-many-websites-are-there/#:~:text=Chapter 5-,How Many Websites Are Created Every Day%3F,are created every day worldwide.
This comment was deleted 3 years ago.
Don’t CDNs already do this?
No, as I know, CDN's are hosting the libraries as they are. When a user visits your website, the content is being loaded from the closest server location. And the second time the user visits the website, it's faster to load because that data is being cached by the CDN.
What I'm suggesting is changing the file you host on the CDN; optimizing standard libraries by removing unused code lines.
CDNs tend to have optimisers. For example:
Just as an example,
I changed my local file reference to use CDN reference for jQuery and Bootstrap
Result: My Lighthouse performance reduced from 84 to 76.
Let me emphasize again, I understand that there are optimizers that
I also know that most browser's dev tools and some third-party tools provide you the coverage data and highlight unused codes.
However, I couldn't find any tool that removes the unused JavaScript code from the libraries you are using. I searched for this and I came across some entries about this. I shared an example within my post: https://stackoverflow.com/questions/1167663/is-there-a-tool-to-remove-unused-methods-in-javascript
I would appreciate it if you could send me any library/tool/CDN that will remove the unused code from jQuery library I am using.
This comment has been voted down. Click to show.