When dealing with heavy components (such as JavaScript), the ability to modularize them into smaller pieces which can be loaded as and when required reduces the amount of redundancy and serves as a great way to make your scripts more sustainable.
success criterion:
Code splitting: Breakdown bandwidth heavy components into segments that can be loaded as required.
Audit components, JS, CSS to see what can be dynamically loaded
Investigate methods for adding dynamic loading but as enhancement
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 performance benefits to a website or application.
success criteria:
Asynchronous code: All external assets should be deferred or set to async (unless required) to avoid FOUC (Flash Of Unstyled Content).
Use lazy loading and defer/async wherever possible
Priority loading: If external resources are required on load, ensure their priorities (delivery route) are set correctly.
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.
success criteria:
Error validation: Errors should be identified through live validation as well as upon submission.
Web browser validation enabled
JS enhances and overrides Web browser validation, using it to update help messages
Validate again on submit
Validate again on server
Label elements: Required elements should be clearly identified and labeled (for the benefits of voice tools such as screen readers and virtual assistants), and optional elements (if unnecessary) removed.
All form elements clearly labeled
aria-label used when necessary (tested with screen reader)
Allow paste: Always allow pasting of content (including passwords) from external sources.
Search engines and social networks make use of the content within a website, by ensuring that your metadata is correctly marked up, you can reduce emissions by improving way-finding.
success criteria:
Required elements: Include the required title element, plus any optional HTML head elements (such as link).
All key elements included in the HTML <head>
Meta tags: Include necessary meta tag references which search engines and social networks recognize, using a recognized name scheme such as Dublin Core Metadata Initiative (DCMI), Friend Of A Friend (FOAF) or RDFa.
Check Meta to ensure that all appropriate metadata, microdata, and linked data is included (but not too much)
Ensure correct formats
Structured data: Embed Microdata, Structured Data (Schema) or Microformats within your pages.
Website emissions can be generated in numerous ways, some of the latest which can be controlled are through CSS preference queries. By offering the ability to stop animation, remove colors, give a print friendly format, adjust to the available lighting or even offer a less bandwidth hungry version of a page (based on visitor demand), we can provide a less impactful journey.
Visitor’s approach our products and services on a wide variety of devices these days. Ensuring that your device works on the widest range of devices and differing screen resolutions ensures that you will have a compatible.
success criteria:
Mobile-first: Allow a website or app to work on mobile devices primarily (testing with various connection speeds), expanding to accommodate larger displays thereafter (mobile-first). It is much more effective to do the hard work to ensure that it works well on a mobile device and then scale it up to larger interfaces.
Ensure app works on all reasonable smart phones/tablets
Responsive design: Utilize progressive enhancement and responsive web design to ensure that your work accommodates a device’s capabilities, different screen sizes, and will not fail if it meets an unsupported technology.
Ensure app fully responsive
All pages/components use progressive enhancement
Must work on Lynx
Must work without JS
Must work without CSS
Alternative browsing: Consider supporting other indirect methods of interaction such as voice (speech), code (QR, etc), reader view (browser, application, or RSS), or connected-technology (watch, appliance, transport, etc).
Fully test entire site on every available alternative technology
Check reader view on all pages
How to test on watch, TV browser, etc.? (Test on LG TV.)
While JavaScript may not cause the most website bloat, it can cause very high emissions in terms of CPU load due to the rendering process, thereby it makes sense to consider the use of dependancies and third-party code carefully.
success criteria:
Dependency management: Prevent developers from downloading and installing JavaScript libraries to run locally (client-side) when they are not needed by checking for unused dependencies and uninstalling those that aren’t needed and removing them from your package.json file.
No externally-created JS libraries in browser
Dependency necessity: Reduce the amount of JavaScript that has to be downloaded and parsed by the browser by only using libraries where necessary. Consider whether you can use a native JavaScript API instead. Check the package size using a tool like Bundlephobia, and whether individual modules can be installed and imported rather than the whole library.
Use native JS APIs whenever possible (investigate)
Ensuring that your code is free of redundancy by using pre-existing functionality provided by the web browser is important as it will help you to reduce the amount of time wasted, re-creating the same components, this offers obvious sustainability benefits in terms of time in front of the screen.
success criterion:
Native over custom: Use native functions, API’s and features over writing your own.
Check all Web APIs to ensure that all code uses browser functionality to the fullest, correctly and efficiently
Making multiple requests whether HTTP or within a database has a carbon cost as infrastructure has to send that information back and forth. As such, managing how you store and use data locally for a visitor will help reduce wasted cycles.
success criterion:
Database queries: If you need information that is stored in a database, and you require it more than once in your code, access the database only once, store the data in a variable for subsequent processing.
When a database is required, optimize for precise and exact queries
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.
success criterion:
Minify code: All source code is minified upon compilation (including inline code).
Ensure all code is minified and compressed to highest standard
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.
success criteria:
Metadata and microdata: Optimize your metadata and microdata for search engines and social media.
Metadata optimized for all pages (tested)
Microdata optimized for all pages (tested)
Microdata used within text where appropriate (how to collect for linked data?)
Search engines: Assist search engines, while blocking any ill intentioned robots and scripts.
Investigate and create optimized robots.txt file
Include a humans.txt file
Use noindex meta tags on pages not to be indexed
Ensure noindex pages are not in sitemap.xml
Consider other robots metadata (e.g., nofollow)
Accessibility aids: Offer accessibility and usability aids to find content, such as skip links and signposts.
Skip to content link
Skip to footer link
Menu that enhances with CSS to hide/show (pull down)
Search engines and browsers regularly examine websites, requesting specific files by default (they expect them to exist). If the files don’t exist, this will lead to potential errors and emissions being caused when they could be created, especially as the files offer SEO, user-experience and other benefits to visitor’s.
success criterion:
Expected file formats: Take advantage of the favicon.ico, robots.txt, opensearch.xml, site.webmanifest and sitemap.xml documents.
There are several small assets which can be included within a website, conferring a range of benefits upon the website or application that utilizes them. They each have a low carbon footprint, so while they do create emissions, it’s worth including them for the benefits they provide.
success criterion:
Beneficial file formats: Utilize standards such as ads.txt, carbon.txt, humans.txt, security.txt and robots.txt.
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 visitor’s is critical as well as good business.
success criteria:
Accessibility compliance: 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.
All pages WCAG 2.2 AAA
All pages manually checked
All pages checked with WebAIM
All pages meet legal requirements
Enhancing for accessibility: Enhance your website or application with Accessible Rich Internet Applications (ARIA) ONLY if applicable or necessary, and accessibility enhancing features when useful or beneficial.
Use ARIA where appropriate
Electronic inequalities: Deploy solutions which fight against electronic inequalities in products and services.
All pages work on Lynx (no CSS, no JS)
All forms work without CSS or JS
CSS and JS used to enhance pages only
Keep bandwidth low
Check for ways to offer low bandwidth site to slow connections
Carbon aware design: To maximize use of renewable energy, adapt your website or service to electricity availability using carbon aware design techniques.
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.
success criteria:
Assess third-parties: 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.
Investigate Vercel and compare to alternatives
Investigate Fathom and compare to alternatives
Investigate Mailerlite and compare to alternatives
Investigate Postmark and compare to alternatives
Third-party implementation: 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.
Investigate this
Libraries and frameworks: Large CSS libraries and JavaScript frameworks should only be used if a more performant alternative which achieves the same goal cannot be used instead.
Avoid external dependencies as much as possible
No client-side external dependencies
Avoid SDKs and do things the simplest workable way (e.g., fetch)
Investigate options for tree-shaking operations modules
Self-hosting: Prioritize self-hosted content over embedded content from third-party services.
Investigate options for video/audio content
Avoiding dependency: Create your own clickable icons and widgets, rather than relying on third-party services to host or allow embedding within your product or service.
When new best practices or if beneficial scripting guidance exists which will improve the visitor experience, following it should be of the highest priority (only using scripts ethically should be promoted).
success criteria:
Beneficial JavaScript: Improve sustainability through accessible and performant code implementations.
Check for latest best practices in JS/TS
API requests: When using an API, make sure you only call it when necessary. On the other side, make sure no unrequired data is sent by the API.
Performance is a key part of the sustainability mindset as reductions in loading times can have a considerable impact on energy loads within CPU, GPU, RAM and hard drive caching (among other variables), as such ensuring a performant product is essential.
success criterion:
Performance goals: Set performance goals which impact the environment and performance of the service, for example HTTP requests or the amount of DOM elements which need to render.
Audit components to check for optimizing DOM tree
Investigate potential for combining HTTP requests for CSS, JS, assets and weigh against file sizes and duplication
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 compile, reducing a file’s size.
success criterion:
Remove redundancy: Identify and eliminate unused and dead code within CSS and JavaScript.
Check that Astro is deduping properly
Ensure that Vite is tree-shaking and that all files are shakable
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 will help promote a sustainable practice.
success criteria:
Remove or simplify: 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).
Refactor design to remove gratuitous or low-value content
Refactor code to make it terse while retaining easy comprehensibility
Iteration over creation: 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.
Use a bespoke component library and reuse it on multiple sites
Refine components to near perfection and then leave them alone
Organize code arrangement: Within CSS and JavaScript, use methodologies (like BEM) and systems like DRY to optimize the arrangement and output of your source code.
Forget BEM and DRY. Instead work to get CSS to the minimum.
Reuse components whenever possible without overly abstracting them.
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.
success criteria:
Semantic code: Ensure content is marked up semantically using the right HTML element for the right job.
All HTML semantically correct
Avoid non-standard code: Avoid using non-standard elements or attributes.
No non-standard or deprecated elements
All elements must degrade gracefully
Custom code: 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.
The dangers of scripting are well known, and vulnerabilities are discovered with increasing regularity. As such, it’s of ethical benefit for authors to ensure all code used regularly passes security processes.
success criterion:
Script security: Check the code for vulnerabilities, exploits, header issues, and code injection.
Every product or service is different, and each will require a different set of tooling to accomplish the most sustainable result. Deciding whether to go with a bulky framework or a Content Management System (CMS) takes careful planning based on client or service requirements.
success criteria:
Identify requirements: List (and choose carefully) the requirements of the product or service. A simpler technological implementation may use more human resources, but could have a smaller footprint. A prebuilt solution may use more system resources (and thereby produce more emissions upon render) but have a faster build-time (emitting less carbon during development).
Examine all SaaS to determine whether they are necessary or equivalent functionality can be created locally
Ensure that any SaaS is the most performant and sustainable available, cost permitting
Optimize methodology: As a general rule, coding from scratch is the best performing methodology (though if an existing solution is actively maintained, it may be better optimized than what you could produce). Therefore, prefer native components and file systems to a WYSIWYG editor or heavy framework, and be considerate of the impact of third-party solutions.
Use native components wherever possible
All HTML, no Web Components
No virtual DOM
No external libraries client-side
Semantic HTML, accessible
Minimal CSS
JS for enhancement only
Expandability considerations: Plugins, extensions, and themes have been carefully reviewed and selected to maximize interoperability, accessibility, and performance. They are regularly audited over time to ensure continued compatibility.
Investigate possibilities for expandability
Interface impact: Make sure all the components of the user-interface are the subject of special attention in terms of its sustainability impact, while respecting accessibility and the performance of such components.
Evaluate all components and general page architecture/design for full sustainability, resilience, and graceful degradation
The Web is full of dead, often proprietary code, created using standards which have been superseded or by groups which aren’t recognized. By following recognized coding standards, you ensure that your code will be rendered properly by browsers (and reduce the potential for added emissions occurring from unmaintained rendering processes).
success criteria:
Deprecated code: Upgrading or avoiding deprecated formats is important, the only exception being if consumer support demands maintaining older standards to provide a functional product.
No deprecated code at all
Outdated code: Don’t use an older standard if a newer recommendation will do the same job as or more effectively.