Lessen JS load times

net magazine - - FEATURES -

Mod­ern sites of­ten com­bine all of their JavaScript into a sin­gle, large bun­dle. When JavaScript is served this way, down­load and pro­cess­ing times can be sig­nif­i­cant on mo­bile de­vices and net­works. Here are a few tips for how to en­sure you load your JavaScript quickly:

● To stay fast, only load JavaScript needed for the cur­rent page. Pri­ori­tise what a user will need and lazy-load the rest with code split­ting ( https://web­pack.js.org/guides/code­split­ting/). This gives you the best chance at load­ing and get­ting in­ter­ac­tive fast. Learn to au­dit your JavaScript code to dis­cover op­por­tu­ni­ties to re­move non-crit­i­cal code.

● Use com­pres­sion, mini­fi­ca­tion and other JS op­ti­mi­sa­tion tech­niques. Com­pres­sion and mini­fi­ca­tion are good op­ti­mi­sa­tions for ship­ping fewer bytes of JavaScript to your users. If you’re al­ready gzip­ping JavaScript, con­sider eval­u­at­ing Brotli ( https://github.com/google/brotli) for even more sav­ings. Build­ing a site us­ing Web­pack and a frame­work? Tree shak­ing (re­mov­ing un­used im­ported code), trim­ming un­used li­braries and poly­fills, opt­ing for leaner ver­sions of util­i­ties all add up to some nice sav­ings.

● If client-side JavaScript isn’t ben­e­fit­ing the user ex­pe­ri­ence, ask your­self if it’s re­ally nec­es­sary. Maybe server-sideren­dered HTML would ac­tu­ally be faster. Con­sider lim­it­ing the use of client-side frame­works to pages that ab­so­lutely re­quire them. Server-ren­der­ing and client-ren­der­ing are a dis­as­ter if done poorly.

● Em­brace per­for­mance bud­gets and learn to live within them. For mo­bile, aim for a JS bud­get of < 170kB mini­fied/ com­pressed ( bit.ly/perf-bud­gets). Un­com­pressed this is still ~0.7MB of code. Bud­gets are crit­i­cal to suc­cess; how­ever, they can’t mag­i­cally fix per­for­mance in iso­la­tion. Team cul­ture, struc­ture and en­force­ment mat­ter.

Above: There are many tips for load­ing JavaScript quickly. These in­clude lazy­load­ing non-crit­i­cal code, some­thing the Chrome DevTools Code Cov­er­age tool can help you iden­tify.

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.