meta data for this page
This is an old revision of the document!
Evaluation
| Metric | Needs improvement | Good | Excellent | References |
|---|---|---|---|---|
| Sustainable Design decisions | ||||
| Green UI Design | Created a tool in light mode | Created a tool in dark mode | Created a tool that is in dark mode by default, but can be toggled to light mode | |
| Minimal features | design contains unnecessary features and flashy animations that affect negatively users | Minimalistic and understandable design (no flashy animations) | The flow of the application is simple and understandable with no unnecessary steps and clicks (+ good req) | |
| Accessibility | No consideration regarding accessibility | Minimalistic design and applies color conventions | Minimalistic design, prevents user errors, and applies color conventions | |
| User’s sustainability awareness | No prompts for energy-efficient settings or greener choices for end users | Some prompts for energy-efficient settings and greener choices | Frequent and encouraging prompts for green options with some potential incentives for the end user | Checklist for user-centered awareness features- UX design |
| Green Code | ||||
| Caching | No caching; redundant data fetching | Basic caching implemented | Advanced caching strategies with high cache hit rates | WebPack, React Caching |
| Content (Assets) Optimization | Too large images, videos fetched fully | compressing of uploaded images, use of SVGs where possible, MP4 | Lazy loading, conducted font optimization, different resolutions for different screen sizes, informed user choice for content quality | React Lazy |
| CDN Usage | No implementation of CDN | Basic use of CDN with some inefficiencies | Highly efficient CDN with edge caching and minimal latency | Tool for measuring CDN efficiency |
| Clean Code | a lot of unused methods and comments perceived in the team’s code | SonarLint was utilized to maintain code’s cleanness | SonarQube was utilized to maintain codebase and results are well documented and elaborated on | SonarLint, SonarQube |
| Data fetching | fetching data that is not being utilized | use of JSON, fetching only the truly necessary data | fetching images separated from fetching of other information, fetching when requested | Lighthouse, Browser console (inspect element) |
| HTTP Requests | unnecessary and uncontrolled number of HTTP requests is happening (bug or intentionally implemented this way) | Uncontrolled HTTP requests are not happening and requests are optimized to certain extent | optimized way of requesting information and communicating through APIs | Lighthouse, Browser console (inspect element) |
| Presented environmental sustainability knowledge | ||||
| Energy efficiency tracking | : You did not track the energy efficiency of your system | : You measured the energy efficiency of your system once and presented it | : You measured the energy efficiency of your system regularly and presented the progression over time | See Tools below |
| Data efficiency tracking | : You did not track the data efficiency of your system | : You measured the data efficiency of your system once and presented it | : You measured the data efficiency of your system regularly and presented it | See Tools below |
| Identification of inefficiencies | : You did not identify the causes of inefficiencies in your system | : You identified and presented 2 causes of inefficiencies in your system and presented the solution to at least 1 | : You identified and presented 3 causes of inefficiencies in your system and presented the solution to each of them | See Tools below |
How do I meet the criteria?
Recommended practices
Tools
Testing web performance
- Digital Beacon - compares first and return visit to the websit
- Globemallow - a browser add-on that generates a report on the environmental sustainability of the website and gives advice on how to optimize it, works when hosting a website locally
- Website Carbon - estimates the carbon emissions attributed to a website.
- Lighthouse - dev tools tab that offers most of above mentioned analyses
- Green Frame - open-source solution that allows developers to decarbonize their websites by detecting carbon leaks
- EcoGrader - Gives extremely comprehensive analysis of your website
Green development
- SonarLint - Tool that forces efficient code on the webpage-level
- SonarQube - Tool that benchmarks your code and tells you how to improve upon it
- WebPack - Code and media minifaction tool
TEMP: Green Code categories