JavaScript is really cool, when used with care

Week one of our series covers the benefits of using JavaScript.

Reading time: 4 minutes

JavaScript seems to have it all. It is readily available and widely used by mainstream programmers with great documentation and support. JavaScript is complemented by many other technologies and libraries such as JSON, and especially useful for graphical user interfaces (GUI). JavaScript benefits from being part of HTML5. Finally, JavaScript will probably be with us for a long time as there is much JavaScript-related innovation being worked on, the JavaScript web platform is maturing rapidly, and, most importantly, JavaScript is supported by a broad coalition of companies.

With all these benefits to using JavaScript, like any great functionality—if not used correctly—it can make your site unfriendly and detract from its benefits. The following are three preventable issues caused by the incorrect implementation of JavaScript that may lead to mobile unfriendliness.

JavaScript Minify
JavaScript Placement
Inline JavaScript

All three of these may negatively impact your site’s performance and can be detected using Google’s Mobile-Friendly Test tool, DigitalDashboard.gov, or the Information Technology & Innovation Foundation (ITIF) Benchmarking Report.

1. JavaScript Minify

Issue: JavaScript, as written, included dead space that slows download and execution time

JavaScript files should always be minimized to reduce transit time and help speed up page load.

Solution: Use tools to minify all JavaScript!

Minification removes unnecessary or redundant data without affecting how the resource is processed by the browser. The Integrated Developer Environment (IDE) tool used to develop the site may include features that will minify the JavaScript during the build process.

You can also do this with Google Closure tools, including the Closure Compiler, an optimizer that rewrites your code and minimizes the dead space to make it download faster. It is typical to minify only in the production environment, as troubleshooting and debugging in the development environments will be easier with non-minified JavaScript.

References

2. JavaScript Placement

Issue: Where you place your JavaScript affects the site’s performance

Grouping JavaScript at the end of the page markup is optimal for page load. When the HTTP specification puts JavaScript elsewhere on the page (e.g. at the top), this may result in loading blocking while the JavaScript files are downloaded. Additionally, before the browser can render a page it has to build the DOM tree by parsing the HTML markup. Whenever the parser encounters a script, it stops and executes the script before it continues parsing. This slows the performance of the page load.

Solution: Place JavaScripts so they don’t block browser loading

Put scripts in the <head> tag and use the async or defer attributes, which allows the scripts to be downloaded ASAP without blocking your browser.

Scripts with the async attribute are executed asynchronously. This means the script is executed as soon as it is downloaded —without blocking the browser in the meantime—and that script 2 can be downloaded and executed before script 1.

Scripts with the defer attribute are executed in order (i.e. first script 1, then script 2). This also does not block the browser. Unlike async scripts, defer scripts are only executed after the entire document has been loaded.

References

3. Inline JavaScript

Issue: Inline JavaScript prevents browser from processing, thus slowing page rendering

Inline JavaScript code should not be used because it requires that the browser pass JavaScript code markup that slows processing.

Solution: Separate JavaScript code from the HTML

Move all JavaScript code to a single minified file, which provides a clean separation of markup, style and code. This can also be accomplished by enabling the “Inline JavaScript” filter in Apache and Nginx web servers.

References

JavaScript Resources

JavaScript: Advantages and Disadvantages Why JavaScript?

Testing Resources