Minify JavaScript

Updated

Minifying JavaScript files can reduce payload sizes and script parse time. The Opportunities section of your Lighthouse report lists all unminified JavaScript files, along with the potential savings in kilobytes (KB) when these files are minified:

A screenshot of the Lighthouse Minify JavaScript audit

How to minify & compress your JavaScript files

There are two useful techniques that can be used to improve the performance of your web page:

  • Minification
  • Data compression

Incorporating both of these techniques reduces payload sizes and in turn improves page load times (see Minify and compress network payloads).

Minification is the process of removing whitespace and any code that is not necessary to create a smaller but perfectly valid code file. Terser is a popular JavaScript compression tool and webpack v4 includes a plugin for this library by default to create minified build files.

Compression is the process of modifying data using a compression algorithm. Gzip is the most widely used compression format for server and client interactions (see Minify and compress network payloads with gzip codelab).

Brotli is a newer compression algorithm which can provide even better compression results than Gzip (see Minify and compress network payloads with brotli).

Resources

Last updated: Improve article