Nov 7, 2018

How to minify Resources (HTML, CSS, and JavaScript) to improve web page speed

Minifying resources refers to eliminating unnecessary bytes, such as extra spaces, line breaks, and indentation. Compacting HTML, CSS, and JavaScript can speed up downloading, parsing, and execution time. In addition, for CSS and JavaScript, it is possible to further reduce the file size by renaming variable names as long as the HTML is updated appropriately to ensure the selectors continue working.

You should minify your HTML, CSS, and Javascript.

For minifying HTML, you can use PageSpeed Insights Chrome Extension to generate an optimized version of your HTML code. Run the analysis against your HTML page and browse to the 'Minify HTML' rule. Click on 'See optimized content' to get the optimized HTML code.

For minifying CSS, you can try YUICompressor and cssmin.js.

For minifying JavaScript, try the ClosureCompiler, JSMin or the YUICompressor. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory.

See also:

Test the Load Time of a Web Page