Unminified inline JavaScript

Problem Summary

Unminified inline JavaScript adds unnecessary bytes to every page load. Whitespace, comments, and long variable names increase file size, slowing parsing and execution.

Performance Impact

• Larger HTML: Inline JS increases document size
• Slower parsing: More code = longer parse time
• No caching: Inline JS loads every page
• Blocks rendering: JS blocks HTML parsing

How to Detect

1. PageSpeed Insights: Flags large JavaScript
2. Chrome DevTools Elements: View inline scripts
3. Lighthouse: Shows minification opportunities

Solutions

1. Minify Inline Scripts

/* Before */function calculateTotal(items) {  var total = 0;  for (var i = 0; i < items.length; i++) {    total += items[i].price;  }  return total;}/* After */function calculateTotal(items){var t=0;for(var i=0;i

2. Use External Files

Move inline JS to external files for caching.

3. Use Build Tools

Terser, UglifyJS, or esbuild for minification.

Further Reading

• Terser