JavaScript is a scripting or programming language that allows you to implement complex features on web pages every time a web page does more than just sit there and display static information for you to look at displaying timely content updates, interactive maps, animated 2D/3D graphics.
Need of javascript
- Autocomplete: The search box gives suggestions, based on what the user has already typed.
- Form validation: If the users make a mistake while filling a form, JavaScript immediately informs them of the error, avoiding filling it all in again.
- Fixes layout issues to avoid the overlapping of elements on the page.
- Adds animation to the page to make it more attractive.
Netflix is one of the most popular video streaming services. Since launching globally in 2016, the company has found that many new users are not only signing up on mobile devices but are also using less-than-ideal connections to do so. By refining the JavaScript used for Netflix.com’s sign-up process and using prefetching techniques, the developer team was able to provide a better user experience for both mobile and desktop users and offer several improvements.
- Loading and Time-to-Interactive decreased by 50% (for the logged-out desktop homepage at Netflix.com)
- JavaScript bundle size reduced by 200kB by switching from React and other client-side libraries to vanilla JavaScript. React was still used server-side.
- Prefetching HTML, CSS and JavaScript (React) reduced Time-to-Interactive by 30% for future navigations
By prefetching resources and optimizing the client-side code on Netflix’s logged-out homepage, Netflix was able to greatly improve their Time-to-Interactive metrics during the sign-up process. By prefetching future pages using the built-in browser API and XHR prefetching, Netflix was able to reduce Time-to-Interactive by 30%. This was for the second-page loading, which contained the bootstrapping code for single-page app sign-up flow.The code optimizations carried out by the Netflix team showed that while React is a useful library, it may not provide an adequate solution to every problem. By removing React from the client-side code on the first landing page for signup, the Time-to-Interactive was improved by over 50%. Reducing Time-to-Interactive on the client-side also caused users to click the sign-up button at a greater rate, showing that code optimization can lead to a greater user experience overall.
While Netflix didn’t use React for the homepage, they prefetched it for subsequent pages. This allowed them to leverage client-side React throughout the rest of the single page application sign-up process.
CONCLUSION
Netflix discovered opportunities to improve their Time-to-Interactive by keeping a close eye on the cost of JavaScript.
