Back to Developer Roadmap

Avoid Inline JavaScript

src/data/best-practices/frontend-performance/content/avoid-multiple-inline-js-snippets.md

4.0938 B
Original Source

Avoid Inline JavaScript

Avoid having multiple JavaScript codes embedded in the middle of your body. Regroup your JavaScript code inside external files or eventually in the <head> or at the end of your page (before </body>).

Placing JavaScript embedded code directly in your <body> can slow down your page because it loads while the DOM is being built. The best option is to use external files with async or defer to avoid blocking the DOM. Another option is to place some scripts inside your <head>. Most of the time analytics code or small script that need to load before the DOM gets to main processing.

Ensure that all your files are loaded using async or defer and decide wisely the code that you will need to inject in your <head>.