3.4 Remove unnecessary code
Clear out dead or unused code as it builds up in a project to reduce the amount of wasted data being transferred.
Criteria
- Remove redundancy:
Identify and eliminate unused and dead code, commonly within CSS and JavaScript.- Browser Default Styles
- Coverage: Find unused JavaScript and CSS
- Front-End Performance 2021: Build Optimizations
- How large DOM sizes affect interactivity
- How To Reduce Unused CSS And Speed Up Your Website
- How To Reduce Unused JavaScript
- Reduce JavaScript payloads with tree shaking
- Remove unused CSS
- The cost of not deleting code
- Tree shaking
- Tree Shaking Patterns
- Tree-Shaking: A Reference Guide
- Web Almanac: Sustainability
- Who Killed My Battery: Analyzing Mobile Browser Energy Consumption (PDF)
Benefits
- Economic
Eliminating unused code means reducing maintenance work and expense. It can otherwise affect other code’ or add unnecessary complexity. - Environment
Removing unused code eliminates wasted bytes, reducing download size and potentially improving rendering time. - Performance
Reducing downloaded code that otherwise offers no benefit to users frees up cache and RAM resources on their devices, while saving time.
GRI
- Materials: Medium
- Energy: Medium
- Water: Medium
- Emissions: Medium