JavaScript is one of the most expensive parts of your website or app. Most mobile and desktop sites run using JavaScript, and they often group all of their JS code into a single package. However, loading all of the code at once can delay interactivity and increase loading times, especially when JavaScript is used on mobile devices. This means that your website or app loads slower and that your users often need to wait a while before they can use your site or app.
Unnecessary JavaScript code can affect your customers’ user experience and may even dissuade them from visiting your website or using your app altogether. This is especially true for users who have mobile devices with slower processors or customers who are using a slower network connection.
JavaScript Processing Times: How Long are Your Users Really Waiting?
According to a Net Magazine article published in July 2018, JavaScript processing times more than sextuple between high-end devices and smartphones with “average” capabilities. When loading CNN.com, a typical smartphone (the Moto G4) loaded the site nine seconds slower than the iPhone 8, and an inexpensive smartphone needed 32 seconds more to load the website compared to the same iPhone. Unsurprisingly, a desktop and laptop with a Core i7 processor loaded the site the fastest of all. However, in today’s day and age the mobile user experience cannot be dismissed. According to the Pew Research Center, over 77% of all U.S. adults own a smartphone, and one-in-five are smartphone-only internet users.
Given the rapid adoption of mobile technology, and the plentitude of mobile apps and websites available to users, the mobile user experience is of the utmost importance in today’s marketplace. Even if your target audience is expected to own high-end devices, the phones may not always be used in an optimal environment. Site loading times are also affected by the users’ data coverage or the strength of their current network, which is often lacking in a busy work environment or a public WiFi zone.
Fortunately, learning how to load JavaScript faster is as easy as reading this article. Here are some tips to lessen your JavaScript burden and enhance your customers’ user experience.
Code Splitting
Many modern apps and websites group their JavaScript code into one enormous bundle. Code splitting provides an alternative by dividing the code into smaller sections. Only the essential code is loaded up front, which lessens the time needed to load the page. The rest of the code is loaded on an as-needed basis.
If your app employs a heavy use of frameworks and libraries, code splitting will almost certainly improve the quality of your customers’ user experience.
Tree Shaking
While code splitting puts JavaScript code into manageable sections, it does not address code that is never used. Young apps tend to use most of their JavaScript, but as the app ages, more code is added without removing the sections that are no longer needed.
Tree shaking, or the elimination of dead code, addresses this issue by pulling in certain parts of ES6 modules. If some of your JavaScript libraries do not respond to tree shaking, check to see if their methods are exported using ES6 syntax. Whether your website or app will greatly benefit from tree shaking depends on its particular dependencies and architecture. In any case, it’s worthwhile to eliminate any dead code that you can.
JavaScript Measurement and Optimization
Several tools are available to help you measure, monitor, and optimize the JavaScript code on any given page. Lighthouse, part of the Chrome Developer toolbox, offers an in-depth analysis to improve optimization. It can also bring attention to code that may need a lot of time to parse or compile, thereby delaying interactivity. This audit can advise you to split up the code or do less work.
Code Coverage, another part of the Chrome Developer set, can uncover unused JavaScript and CSS in your code by displaying how much code was executed versus how much was loaded. With this knowledge, you can focus on the code that your users need.
Sending Less JavaScript with Performance Budgets
Performance budgets for your website provide clear, measurable figures to keep everyone accountable to the goals for the website or app. Mobile sites should aim for a JS budget of no more than 170KB compressed, which equals approximately 0.7MB of uncompressed code. By working within the budget’s constraints, the site’s performance becomes a constant consideration instead of an afterthought to be addressed down the line.
These budgets can be defined in three ways: milestone timings, which are created in accordance with the user experience on the page; quality-based metrics, which are based on the browser experience using raw figures; and rule-based metrics, which are scores formulated by other tools (e.g., Lighthouse).
Users have a multitude of websites, apps, and companies vying for their attention. A slow-loading site not only affects the user experience on mobile sites, but it can also result in lost leads, conversions, and purchases.
If your site uses a lot of unnecessary code, Santex consulting can re-configure your JavaScript. Our specialized knowledge comes from years of experience in working with numerous platforms, websites and apps. This allows us to attend to your project’s needs, wants, and constraints in an optimal way.
