Modularize bandwidth-heavy components within projects
This approach is applicable across various programming languages and platforms, both client-side and server-side. By modularizing code and assets, you can ensure faster load times, better resource management, reduce redundancy, and improved scalability for your application. Additionally, reducing unnecessary data transfer and optimizing load times can contribute to more energy-efficient operations, helping to lower the environmental impact, improve the UX of your web application or service.
Criteria: Code splitting
Break down bandwidth-heavy components, front-end and back-end into smaller, modular segments that can be loaded only when required.
Resources
- Bundling dependancies
- Code-split JavaScript
- Code splitting
- Code splitting - What, When and Why
- Electricity Intensity of Internet Data Transmission
- How code splitting increases performance
- JavaScript performance
- Reuse and recycle
- Web performance, code splitting strategies, and a React case study
- What is code splitting in Next.js?
Impact: Medium, Effort: Low
| GRI | Impact |
|---|---|
| materials | Medium |
| energy | Medium |
| water | Medium |
| emissions | Medium |
Benefits of this guideline
- Performance: Having smaller (modular) components allows for more optimized caching and loading only what code functions are required (which reduces the payload). Unused portions of a resource remain un-downloaded (potentially huge savings).
- Economic: Reducing the size of large files will result in lower bandwidth bills for service providers.
- Conversion: A faster website reduces the chance of abandonment (which is especially of concern for visitors of handheld devices).
Example
-
codelink.addEventListener("click", (e) => { e.preventDefault(); import("/modules/my-module.js") .then((module) => { /* Do something */ }) .catch((err) => { console.error(err.message); });}); -
contentDynamic Imports.
Tags:
- CSS
- JavaScript
- Performance