One, eight seconds to load = loss of users! The slower the front end, the more you optimize it
People who do front-end development know the pain: the page is slow, the user can't keep it. With such a development team, their web applications will take eight seconds to interact at the mobile end, users will exit before the page is loaded, and a lot of effort will be invested in optimization, but it will be slower。
They tried all the mainstream optimization tools: code partitioning, lazy loads, rock tree optimization, compressing caches, using all the tools available, but the front-end performance was a mess. Just as everyone was in the mindset of “must optimise js”, they moved out of the anomalous path — to optimise js。
No one could have thought that this simple and brutal operation had caused the front-end speed to surge by 87 per cent, the lighthouse rating went directly from 61 to 99 and the bounce rate dropped by 34 per cent. Behind this lies the central truth that all front-end developers are ignoring: sometimes you do not opt for pain, but rather a “burden”。
Key technical background: the core technology tools involved in the text are free of charge, with react (front-end framework) marking 215,000+, webpack (packaging tool) 64,000+ and astro, fresh, qwik, etc., all free of charge, with 37,000+, 25,000+ and 18,000+, respectively, available free of charge to ordinary developers。
Core disassembly: from 8 to 0. 8 seconds, the complete operational step to delete js (with code)
The team's success was not blindly removing js, but with clear judgement criteria and replicable processes, with a concrete landing method at each step and a direct application for newcomers。
Step one: finding pains -- looking at the front end of modernity, it's redundant
Their original saas products, the front-end technology warehouse, which is consistent with most modern projects, appear to be well-structured and heavily redundant, including react, webpack, the assembly library, the client route, the ret api data request, and various kinds of ui aids (charts, burial points, forms library)。
The results of testing on a mid-end mobile phone with lighthouse were appalling, as follows:
Performance indicators
Before optimizing
First content drawing (first co)I don't know what you're talking about
3. 9 seconds
Interactive time
8. 1 seconds
Total js downloads
1. 2mb
Js execution time
2. 6 seconds
After repeated optimization, the situation has not improved. It was not until they began analysing user behaviour that key issues were identified: the high-frequency (hf) pages accessed by users, mostly static, did not require complex js support。
Step 2: precise judgement — which pages can be completely deleted
Through a user behaviour analysis, the team found that users spend 80 per cent of their time on these pages: marketing pages, document pages, product list pages, simple dashboards, read-only analysis pages. These pages have little interactive demand, but are forced to load the entire react run。
This means that each visitor has to go through the four steps of “downloading js dialysis of js to implement js hydration” to see interactive pages, which are completely redundant。
Step 3: landscape experiment - starting with a page, delete js (with pre- and post-code comparison)
They choose to start with a pricing page that has no client status, does not need customer rendering, does not need hydration, and is the most suitable pilot to delete js。
Pre-optimization: react component writing (redundant, no need to interact)
/ before optimization: pricing. Jsx (react component)
@title: %1
coNst plans = [ chuckles ]
{name: "starter", price: 70}, / /replace to rmb at 1:7
{name: "pro", price: 203},
{name: "enterprise", price: 693}
];
return{plans. Map}
{plan. Name}
{plan. Price}$/month
== sync, corrected by elderman ==;
♪ i'm sorry ♪Optimized: pure HTML+cs (no js, fully meets demand)
Starter
70 yuan/month
Pro
203 yuan/month
Enterprise
693 yuan/month
No react, no hydration, no js packages, only the most basic HTML and css are kept, without prejudice to user use。
Step 4: broadening the outcome - categorize by page type, precision control of js
The success of the pricing page has led the team to develop a new strategy: instead of applying the same structure to all pages, it is classified by interactive demand, with precision control of js usage divided into three categories:
Static page: pure HTML (0 js)
These include marketing pages, pricing pages, document pages, land pages, the use of servers to render HTML, with a very simple css, with no js at all, and extremely high load speed。
Light interactive pages: extremely brief js (approximately 2kb)
Simple interactive pages such as drop-down menus, tabs, bullet windows, filters, etc., need to be replaced with original js scripts, instead of react components, to significantly reduce the volume. Example code:
/ / interactive script for tabs (replaces react components, only around 2kb)
d(". Tab-button")
. Foreach
i don't know, button. Adeventlister. CoNst target = button. Dataset. Target;
d(". Tab-content")
... Foreach(el => el. Classlist. Remove("active"));
dI'm sorry, i'm sorry.
. Classlist. Add( "active");
i'm not sure. I'm not sure;3. Complex applications: react retention (as required)
Real-time dashboards, drag editors, complex client-states, collaboration tools, etc. Do require frame support. React is retained, but only loaded on such pages and not fully applied。
Step five: final results — data talking, 87 per cent increase in speed
After three months of gradual optimization, the front end performance of the product as a whole has achieved a qualitative leap, as shown below:
Of these, the most striking was the optimization of the pilot pricing page, where the js package was converted from 312 kb to 0kb, the first content mapping was reduced from 3. 1 seconds to 0. 9 seconds, and the interactive time was compressed from 6. 4 seconds to 0. 8 seconds, which is the core source of 87 per cent speed increase。
Iii. Terrorism analysis: design js is not a one-size-fits-all
This team's success makes the deletion of js a new direction for the front-end optimization, but it doesn't mean that all jss should be deleted, let alone deny the value of the frame -- – it is argued that the deletion of js is a “simplified redundancy” rather than a “total denial”, and that these three arguments can help you avoid the risk of error。
First, the core of the deletion of js is “reduce redundancy”, not “counter-technology”. Many developers see cases and blindly delete all jss, leading to the loss of the necessary interaction on the page, which reduces user experience. The real key is “judgmental necessity”: if the page does not require client state or complex interaction, it can be deleted; if real-time updates, drags, etc. Are required, the framework remains the most efficient option. Like tools, there is no need for heavy machinery to do what can be done by hand, but complex engineering cannot replace machinery by hand。
Second, optimizing js and deleting js are not opposing but complementary. The chinese team did not give up js optimization completely, but instead jumped out of the mindset that only optimization can improve performance. • optimistic tools such as code partitioning and lazy loading remain valid for jss that must be retained (e. G. Complex application pages); elimination is the most immediate solution for redundant jss. In combination, performance can be maximized。
Finally, the value of the framework lies in “solving complex issues” rather than in “full coverage”. Frameworks such as react have emerged to efficiently address complex interactions, re-use of components and enhance development efficiency. However, using a framework to develop static pages would amount to a “cow knife” that would increase not only the performance burden but also the development costs. What we should do is make the framework work in the right place, not blindly dependent。
Think about it: are there any redundancies in your project that “still static pages, but the whole frame is loaded”? Have you been optimising, but never thinking, "are these jss really needed?"
Iv. Relevance: why is this case worth drawing on by all front-end developers
The value of this case lies not in the deletion of the js operation itself, but in the re-engineering of the forward-end thinking, which addresses the three core pain points that all developers will encounter, with both practical and guidedness。
First, to address the dilemma of “slower and slower”. Many front-end projects are caught in a “optimal circle”: a vicious circle is created by the introduction of more tools for a much larger package load. And this case tells us that sometimes the “deductive approach” is more effective than the “additional” approach, and the redundant js is the performance bottleneck that removes redundancies in order to boost the speed at the root。
Second, to reduce development costs and increase efficiency. With the elimination of redundant jss, the number of code items decreased, the number of bugs decreased, construction problems decreased, debugging became simpler and development was faster. The practice of this team has shown that, instead of unnecessary complexity, development efficiency can be enhanced. This is particularly important for small and medium-sized teams — qualitative upgrading can be achieved by streamlining redundancies without a significant investment of manpower to optimize performance。
Third, match user needs and improve retention. For users, they don't care about what frame you use, how much you optimize, just how fast the pages are loaded and whether they can be used properly. Eight seconds of loading time is enough to lose 90 per cent of users; and one second of interaction can significantly increase user preferences and reduce the bounce rate. The core of this case is essentially “user-centred”, cutting off unnecessary redundancy and retaining core functions。
In addition to this, the case offers replicable optimisation methods that can be applied directly by both beginners and senior developers: audit of page interactive demand, then control js by type, and eventually retain the framework and optimization tools as needed, without the need for a complex technical reserve to enable performance enhancement。
Interactive topic: how many redundant jss can you delete from your project
After looking at this case, it is believed that many front-end developers will resonate: each day we optimize our headaches for js, but never look at whether “these jss are really needed”。
Let's look at the project you're developing against the methodology in the text: is there a static page with frames such as react? Is there a redundant js script that can be replaced with the original HTML/css? How big is your js package? Do you have any space for compression
The comment section talks: have you improved the performance of the project by removing redundant codes? What pits have you ever encountered? Share your experience, help more developers avoid the miscalculation, and don't turn around
