3.2 Minify Your HTML, CSS, and JavaScript

Web Development

Whitespace holds no value when it’s being presented to the visitor (unless they view the source code), by using minification, valuable data savings can be made which will reduce loading times.

Criteria

• Minify Code: All source code is minified upon compilation (including inline code).

Impact

Low

Effort

Low

Benefits

• Performance:
  Reduced loading times as a result of less data being transferred. Though this does not inherently have an ecological benefit as whitespace is ignored by rendering engines, it does help meet sustainability targets with visitor-based improvements in terms of loading times.
• Conversion:
  When a page loads quickly, visitors are less likely to abandon their journey or search for their information elsewhere.

GRI

• materials: Low
• energy: Low
• water: Low
• emissions: Low

Example

• Code:

  !function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(g,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,v=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf

• jQuery Slim.

Resources

• Electricity Intensity of Internet Data Transmission
• Lighthouse: Minify JavaScript
• Minification
• Optimizing Encoding and Transfer Size of Text-Based Assets
• Web Almanac: Sustainability

View the Guideline

Tags

PerformanceHTMLCSSJavaScript