What is Tree Shaking? And why is it important to your web's performance?

The web loads slowly like a turtle crawling? Problems that all web people have to encounter

Have you ever felt that the website that we intend to do well, both beautiful and complete? But when it's time to actually use it, "slow" is frustrating? Customers have come in and have to wait for a long time before the website is finished. Many people can't bear it. Press off before seeing our products or services even The shocking statistics are Just a few seconds to download the web, it may cause the Bounce Rate (clicking rate) to rise and the conversion rate falls down. This is a real problem that is not caused by unattractive designs, but it is the "Performance" of the website that is warning you.

‍

Prompt: The image of the user is showing an irritated expression while staring at the computer screen or mobile. Which has a wine loading symbol Conveys the feeling of waiting for the download website

Why is the web slow? The source from the code that is not used (But still have to download)

In the age of more complex websites, we tend to use Library or Frameworks to help make it easier and faster, such as React, Vue, or even adding plugin in our system. These tools often come with a large amount of JavaScript code, but the problem is on a webpage. We may call only 10-20% of the entire code that imports, but the user's browser must download the "whole" code that we do not use. Making the JavaScript file size (Bundle size) bigger than necessary Like we ordered a large pizza But only one piece The rest had to carry it back home as well. This is the main reason that your website "Fat" and "Slow" without knowing it.

‍

Prompt: Infographic images compare two trees. One tree has a complete branch. (Instead of all code in Library) and another tree has only the necessary branches and has a lush leaf. (Instead of the actual active code) with an arrow pointing from the first tree to the second tree with the message "Unused Code" was killed.

Let the "fat" website continue to happen?

Having unused code on the website There is a lot worse impact than I think. It's not just a matter of slow feelings. But it directly affects your business and your SEO rank:

• Core Web Vitals Drops: The website that loads a lot of JavaScript will block Browser's operation, making the LCP (Largest Contentful Paint) and Inp (Interactive to Next Paint) worse, which Google uses as an important factor in the ranking.
• SEO ranking: When the bad Vitals, Google will see that your website provides bad experiences for users. And may make your rank easily agree
• Users escape: No one likes to wait. If your website is slow The user will press to close and find competitors on the web faster.
• Conversion rate decreased: when the user escaped all The opportunity for you to change the audience into a customer (Conversion) is almost zero.

In other words, letting your website have "fat" excess from the code that is not used. It is like destroying your own business opportunities. The Render-Blocking Resources is something that should not be overlooked.

‍

PROMPT: 3 graph images showing negative results: 1 'SEO RANKING', the 2nd bar, 'User Frustation' rises, the 3rd 'conversion rate' plumbing with an easy -to -understand icon.

"Tree Shaking", the hero that will help cut the excess code.

It's the hero of this event. ** What is Tree Shaking? ** The easiest answer is It is the process "Dead Code Salad (Dead Code) left". Imagine the tree that we "shake" to make the leaves dry. The dead fell. Leaving only branches and leaves that are still fresh and strong In the world of code writing, Tree Shaking is the process that Bundler (the tools that combine different code files such as Webpack or Rollup) will analyze our code, both the project. Then look for `` Function`, `Variable`, or` Module` What are we `` IMPORT SDPO, but never runs in use? " Leaving only the code that is really necessary Causing the website to download significantly

‍

Prompt: Animation or Infographic image shows the process: 1. Large box has a lot of code. (Both used and unused) flow into the machine named "Tree Shaking Bundler". 2. Some code has been separated into the trash. 3. The result is a small box. With only necessary code

Examples from the real thing: reduce the file size 70%. Just use Tree Shaking.

Let's say that there is a web application development company for project management. At first, their app work was very slow because of using a large UI Library, but only a few component uses the development team, found that the main Javascript file is 1.5MB, which is too big. After checking the Build Process, they found that Tree Shaking was not activated correctly in the Developed mode.

The team has improved the settings on the WebPack to work correctly when the Build for the Production. The result is Tree Shaking. Can analyze and cut the component that is not used enormous. The final size of the JavaScript file is reduced from 1.5MB to only 450KB or ** reduced to almost 70%! ** The website has been downloaded more than 2 seconds. User Experience also improved as well. This is the power of "fat cutting" for your code.

‍

PROMPT: Clearly Before/After: 'Before', a graph of 1.5MB file size and has a slow download page. 'After' is a graph showing 450KB file size and has the same webpage that is finished downloading with users' smiles.

Want to do Tree Shaking, how to start? (Checklist for developers)

For developers who want to be confident that your project is fully useful from Tree Shaking. This is a simple checklist that you can follow immediately:

• Use the ES2015 Module Syntax (`` Import` and `Export`: Tree Shaking relies on Static analysis, which works best with the` `IMPORT/EXPORT's IMPORLE (ES MODULE), so avoid the use of the commanjs in the Client-SIDE codes. MDN Web DOCS
• Set your Bundler correctly: for the webpack, just you set `Mode: 'Production'` It will automatically enable Tree Shaking and other optimize.
• Be careful about the SIDE Effects: in your 'JSON's Package.json's file, try to look for Key "Sideeffects": False` To tell the Bundler, "The code in this package does not have a side effects that can not cut the Import." Which will help the return to work more efficiently.
• Check out the results: Use tools like `Webpack-Bundle-analyzer 'to see in your last Bundle file. Is there an unnecessary code? It will help you see the overall picture and find a point that needs to be improved.

The improvement of Performance is not only Tree Shaking. Other techniques such as Island Architecture or font loading strategy are something you should study as well.

‍

Prompt: CHECKLIST images with each icon: JavaScript ES6 icon, Config icon, Side Effects, and analyze icons to make it easy to understand and can be used.

Questions that people tend to wonder about Tree Shaking

Can Tree Shaking can be used with CSS?
okay! There are tools such as Purgecss that work similarly. It will scan your HTML and JavaScript files to see which class Name has been used. It will delete the CSS that is not used from the final file. Helps to reduce CSS file size efficiently

How is Tree Shaking different from the minife?
The difference is clear. Minification is to remove unnecessary characters from the code, such as gaps, new lines, or shortening the variable name. But all the code (Logic) is still complete. The Tree Shaking is "deleting the whole blog" that has no use. Both techniques are often used together to get the smallest files.

Do you have to do Tree Shaking by yourself every time?
No need. In most cases, the modern Framework (such as Next.js, Create React App, Vue Cli) will automatically set the Bundler (Webpack). When you order Build in the Production mode, our duty is to write the code to be friendly.

If my code has a side effects, what will happen?
Side Effect is a code that does something as soon as Import (such as editing the Global Object or adding CSS to DOM), which may cause Tree Shaking to not dare to cut that code because of fear that the program will break. If it is necessary to have a file with a SIDE EFFECT, the value should be confined to `Package.json` is" Sideeffects ": [" ./path/to/your/file.js "]` `In order to tell Bundler and not cut that file.

‍

Prompt: The large Q&A icon image with questions-2-3 important answers are performed around the Speech Bubble format that is easy to read.

Summary: Cut the fat to the best performance.

At this point, everyone probably understands what ** Tree Shaking is ** and why is it a powerful and indispensable tool in the development of modern websites? It is an automatic process that helps "iron fat" or unnecessary code from our project. Makes the website smaller, loading faster, providing a good experience for users And directly with the SEO rank

Do not let the code that is not used to hold the Performance of your website. Let's go back and check your Build Process today that the hero named "Tree Shaking" is already opened. Will definitely give an enormous reward in the long run

And if you need an expert to upgrade your website performer Whether doing Code-Splitting, Optimization or complex development Our team is ready to give advice, Advanced Webflow Development service can help you create the fastest and strongest website.

‍

Prompt: Powerful summary: The rockets are soaring into the sky. The word "Web Performance" is attached to the rocket. Below the shield is written "Tree Shaking" to prevent the unused code.

‍