Medium impact πΏ
Often when coding, projects can accumulate clutter and functions which are no longer used (due to newer, more effective features being developed). By utilizing tree shaking techniques, all the "dead wood" will be automatically dropped upon compilation, reducing a file's size.
Identify and eliminate unused and dead code within CSS and JavaScript.
π¦Ύπ¦Ύ
High impact πΏ
Not everyone can access services equally, being sustainable is also about being accessible, fair, ethical, and ensuring that your product or service doesn't discriminate. As such, ensuring your website complies with best-practices and relevant laws whilst meeting the needs of your visitors is critical as well as good business.
Your website or application must conform to WCAG (at the necessary level), plus extend beyond to obey relevant laws and meet additional visitor accessibility requirements. Building inclusively means that people with permanent, temporary or situational disabilities will be able to more quickly find what they are looking for, and not have to spend extra time searching for a way to use your product or service.
Enhance your website or application with Accessible Rich Internet Applications (ARIA) ONLY if applicable or necessary, and accessibility enhancing features when useful or beneficial.
Deploy solutions which fight against electronic inequalities in products and services.
π¦Ύπ¦Ύ
Medium impact πΏ
Redundancy is the enemy of sustainability. Having systems in place to ensure that everyone can work from established patterns, the website or application remains clean and easy to use, and iteration over redesign is firmly in the mindset that will help promote sustainable practices. It's also worth being wary of abstracting code too early (see AHA methodology) or incorrectly, as while good abstractions can be more efficient, poor ones can waste effort and introduce complexity, bloat, and bugs to your codebase which can lead to emissions.
Don't be afraid to remove or simplify (through rewriting for performance) your code to focus on essential features and have a cleaner, less redundant product (and codebase).
Improve (iterate) an existing creation rather than constantly redeveloping and redesigning products from scratch (duplication of coding effort) if possible to reduce visitor learning burden and developer impact.
Within CSS and JavaScript, use methodologies (like BEM) and systems like DRY and WET to optimize the arrangement and output of your source code.
π¦Ύπ¦Ύ
High impact πΏ
Whether advertising, chatbots, maps, or other tooling; outsourcing your service to a third-party provider may be potentially useful in certain scenarios in reducing design or development time and redundancy (which can be a win for sustainability). Third-party services, however, come with issues, such as the lack of control over emissions, and they often can potentially suffer from latency and large file sizes which may not exist if you self-hosted or created the material.
Assess third-party services (including plugins, widgets, feeds, maps, carousels, etc) as early in the ideation or creation process as possible and use as few as possible to reduce the product or service's overall ecological impact, including Scope 3 emissions.
Third-party content (including plugins, widgets, feeds, maps, carousels, etc) should be placed behind a click-to-load delay screen (using the "import on interaction" pattern), while alternatives to automated solutions such as chatbots should be offered.
Large CSS libraries and JavaScript frameworks should only be used if a more performant alternative which achieves the same goal cannot be used instead.
Prioritize self-hosted content over embedded content from third-party services.
Create your own clickable icons and widgets, rather than relying on third-party services to host or allow embedding within your product or service.
π¦Ύπ¦Ύ
Medium impact πΏ
HTML semantics are important. They don't just play a key role in making the Web look the way it does, they have a function in accessibility, in SEO, and even in sustainability. Ensuring that you markup your content correctly and avoid cluttering your markup wastefully will reduce emissions.
Ensure content is marked up semantically using the right HTML element for the right job.
Consider removing optional HTML tags (which aren't required for rendering), attribute quotes, or attributes that are set to their default value.
Avoid using non-standard elements or attributes.
Only use custom elements or Web Components if you cannot utilize native HTML elements or if you need tightly regulated control over the implementation of design system components.
π¦Ύπ¦Ύ
Medium impact πΏ
The ability to work around render-blocking issues is a great addition to the web. From deferring code, to lazy loading, to asynchronous loading, each has its own use-case and each can have the potential to reduce or give performance benefits to a website or application.
All external assets should be deferred or set to async (unless required) to avoid FOUC (Flash Of Unstyled Content).
If external resources are required on load, ensure their priorities (delivery route) are set correctly.
π¦Ύ
Low impact πΏ
Helping visitors avoid wasting their time can reduce the number of emissions from time spent in front of a screen. As such, by using existing technologies like metadata, robots files, and accessibility-friendly aids within the page, improvements to the experience can be made.
Optimize your metadata and microdata for search engines and social media.
Assist search engines, while blocking any ill-intentioned robots and scripts.
Offer accessibility and usability aids to find content, such as skip links and signposts.
π¦Ύ
Medium impact πΏ
Entering information on a page can lead to problems. If a visitor makes a mistake along the way, it makes good sense to have systems in place to guide them through resolving the typos, confusion, and glitches that can occur which lead to abandonment and extra emissions through wasted device usage.
Errors should be identified through live validation as well as upon submission.
Required elements should be clearly identified and labeled (for the benefit of voice tools such as screen readers and virtual assistants), and optional elements (if unnecessary) removed.
Always allow the pasting of content (including passwords) from external sources.
π¦Ύ