A key factor in making pages faster is to reduce the size of each page and their resources using compression and minification.

Next to eliminating unnecessary resource downloads, the best thing you can do to improve page-load speed is to minimize the overall download size by optimizing and compressing the remaining resources.

Google, "Optimizing Encoding and Transfer Size of Text-Based Assets"

Use compression

Configure your server to send data in a compressed format to reduce transfer times. For compressible files, compression can reduce the amount of data that needs to be sent by around 70% for only a small amount of configuration effort. Text-based data formats such as HTML, CSS, JavaScript, plain text, XML, JSON and SVG should almost always be sent with compression enabled. However, we recommend only compressing responses above 1,000 bytes in size as compressing small files can actually increase the response size and compression has a server CPU overhead. To confirm your server is sending a URL response in a compressed format, you should 1) verify the Content-Encoding response header is being returned and 2) check the value of that header is set to the name of a compression scheme such as gzip, deflate or br. If you’re checking from your own machine that runs antivirus software, be aware there’s been cases where HTTP scanning features have been found to disable compression before responses reach your browser. Also, it isn’t unusual to see misconfigured servers which compress some compressible file types like HTML but forget to do it for others like CSS so be on the look out for this.

Avoid recompressing data

Compression should only be applied to data that can be compressed to avoid wasting server resources. Common non-text-based data formats like JPG, PNG, MP4 and PDF files are already stored in a compressed format so you don’t need to compress files like these again when your website serves them. Trying to compress already compressed data will consume server resources and can even result in increased file sizes. Your server should be configured to only compress resources that can be effectively compressed such as HTML, CSS, JavaScript and SVG files. To check for this, you need to confirm the Content-Encoding response header is used to specify a compression scheme only for compressible files. The header should be omitted for already compressed files.

Use minification

Minify CSS and JavaScript files to reduce page weight. Minification works by removing or transforming the content of these files in a way that preserves the behaviour of the code but reduces the file size. For example, comments and whitespace are easy candidates for removal. CSS and JavaScript file sizes can typically be reduced by around 30% using minification. Although compression offers greater file size reductions, minification combined with compression will result in even smaller files. This is because minification can remove data from files whereas compression must preserve all the data.

Avoid inline source maps

Take care that your minification process does not inline source maps into your JavaScript or CSS files. Source maps are used to help developers debug minified files by providing a mapping from minified code statements back to the original unminified code. Minification tools will either store the source map in an external file or inline the source map into the minified file itself. As source map data can take up even more space than the minified code, inline source maps defeat the file shrinking purpose of minification. Inline source maps should only be used during development and you should use external source maps for production builds. You can check if a JavaScript or CSS file contains an inlined source map by looking for a statement starting with /* sourceMappingURL=data: in your files.

More articles in this series

➜  This article is from our comprehensive Page Speed Best Practices guide.

➜  Next article in this series: Caching