ORDER IN WHICH ELEMENTS ARE LOADED
First, it’s important that all elements in thesection are pre-loaded, before the visitor sees anything in browser, then all subsequent elements are ordered to load in a logical way. Any JavaScript inside thesection can slow down a page’s rendering. Here’s a look at the difference between an optimized and an unoptimized page load:
WHY IS THE LOAD ORDER IMPORTANT?
ASYNCHRONOUS LOADING: DEFER AND ASYNC TAGS
Asynchronous loading of JavaScript is a type of sync loading. It means that your website loads in a multi-streamed way.
Graphic demonstrating that asynchronous loading of JavaScript is a type of sync loading which means that your website loads in a multi-streamed way
When the browser finds the string with , it will stop creation of DOM and CSSOM models while the JavaScript is executed. This is why most JavaScript code is located after the main HTML code.
Important! Defer and Async tags are available only for external scripts (with src=”” tag). If you will try to use them for internal scripts like tags, defer and async will be ignored.
EXCLUDE UNUSED COMPONENTS OF .JS LIBRARIES.
javascript library components
Most developers use libraries like jQuery UI or jQuery Mobile as is. This means that the code includes all possible components of each library, when you may only need two or three.
A similar situation occurs with other JavaScript libraries as well. If you have the ability to manage what components will be included in your package of library, definitely do it. Your website will load much faster, and your visitors will get a better experience.