There are many minification tools online, not all of which use obfuscation. True minification also uses obfuscation, which renames variables to names that require fewer bytes of data for the browser to read than human-readable variable names. Minification strips out unnecessary punctuation, white space, and new line characters. For most users on the web, loading pages or changing views represents a task.īeyond 1000 milliseconds (1 second), users lose focus on the task they are performing.īeyond 10000 milliseconds (10 seconds), users are frustrated and are likely to abandon tasks. Within this window, things feel part of a natural and continuous progression of tasks. Users experience a slight perceptible delay. Any longer, and the connection between action and reaction is broken. Respond to user actions within this time window and users feel like the result is immediate. That's 16ms per frame, including the time it takes for the browser to paint the new frame to the screen, leaving an app about 10ms to produce a frame. They perceive animations as smooth so long as 60 new frames are rendered every second. Users are exceptionally good at tracking motion, and they dislike it when animations aren't smooth. Google Developers has produced guidelines based on user perceptions of performance delays, which you can use to judge whether JS is necessary on a page in conjunction with testing. For interactivity on the page, best practice says to use JavaScript for features that enhance user experience – expected transitions, animations, and events – rather than things that can disrupt like flashy, drawn-out animations.Īre there third-party pieces of JavaScript that are redundant, or that aren’t essential to what you want the page to do? Consider eliminating these too. Not sure where to start? We already know that JS is the most expensive kind of file used to build your site, so you can also think about it in terms of processing. If you deliver less JavaScript, the page will load faster. Make JS load faster in the browser Reduce how much JS you use to build the page Real User Monitoring lets you see which versions are most common among your users and should be considered essential for testing any changes you make to your site. We’ll cover the best practices listed for accomplishing both goals, including considerations for third-party JavaScript that you may not have as much control over.įor the following, it’s important to make sure your user base has browser support for the methods implemented.
![shopify minify js shopify minify js](https://www.opinew.com/blog/content/images/2021/05/slowapps3.png)
![shopify minify js shopify minify js](https://speedboostr.com/wp-content/uploads/2020/08/too-easy.png)
Self-host third-party JS (or use a service worker).Minify all JS resources, and use minified third-party JS.Reduce how much JS you use to build your page.So how can we reduce how much page loading time is associated with JavaScript delivery? There are two ways, with best practices for each: When you consider that GZIP compression can reduce delivered text file size by 70 to 90%, 400 KB really becomes 1.3 to 4.0 MB. Byte for byte, JavaScript is more expensive than any other file type to process on the page in terms of CPU and time.
![shopify minify js shopify minify js](https://cdn.shopify.com/app-store/listing_images/5b4df01ac4b5acd8b9981ff745e4b1e2/desktop_screenshot/CIbzybT0lu8CEAE=.png)
When you consider that the first connection opened to load a page only transfers 14 KB of data, it becomes obvious that reducing JS file size is an important optimization to make.īut 400 KB of JavaScript is not equal to 400 KB of an image loading, partly because JavaScript processing takes place when the file is uncompressed. For desktop users, this equates to about 400 KB per page visited, and 360 KB for mobile users. The impact of JS file sizeĪcross the millions of sites measured by HTTP archive, JavaScript accounts for 15% of page weight for desktop pages and 16% for mobile pages. Optimizing JavaScript processing is also incredibly important to the way modern websites load, but I’ll be addressing it in a separate post. This post is going to cover delivery optimization for JavaScript: why you should care, considerations, and best practices, along with some links to relevant resources. This makes JavaScript processing more costly than processing other file types. JavaScript is also a dynamic language, and compiles on the fly once the browser receives it. The size of JavaScript files along with the way these files are delivered both affect the load time. Like any other file building a web page, JavaScript needs to load before it can function. JavaScript is an essential aspect of building engaging sites, but it can drastically affect the way pages load.