When it comes to designing or redesigning a website, it’s easy to get hung up on the aesthetics. Some of the design choice could result adding the carbon pollution. The idea is to provide some techniques to reduce the the carbon pollution with webpages

Some of the consideration

Engineering Decisions

1. Font selections Though fonts can enhance the visual appeal of websites. The performance of web rendering depends on the choice of fonts. If the performance could be a proxy to the energy consumed and hence the carbon emission.

a. Leverage system fonts to the maximum as they do not need cache / files to render

b. Use less font variations through your webpage

c. If you have no choice but to use customs fonts, think about loading the font as early as possible. The Font Loading API (https://www.w3.org/TR/css-font-loading/) provides a scripting interface to define and manipulate CSS font faces, track their download progress, and override their default lazyload behavior. The chrome devtools can help you with font loading time

d. Understand how @font-face works and how this impacts font loading. @font-face declaration does not trigger font download.

e. If you are considering using self-hosted fonts, confirm that your site is using a Content Delivery Network (CDN) and HTTP/2.

1. Dark mode web design
   Dark viewing mode for websites has gained a lot of popularity from users worldwide. Designing the web pages with Dark mode toggle would provide the choice for the carbon aware users. Dark-mode displays emit less light than light-mode and hence consume less energy. This would mean less carbon emission. The mode toggle would enable the user to decide what the read mode should be as dark mode sometimes might add more eye strains

2. SEO optimisation
   The faster your web content are presented to the user for the information they are after the less they would spend time browsing. This means that less energy is consumed and the energy that is consumed is used to deliver real value to the user.

4.Page weights / Size
Page weight is nothing overall size of a particular web page which includes all of the files that are used to create the web page, including the HTML document, any included images, scripts, and other media. The smaller the file size of a page, the faster it will load for anyone who requests it.

• Optimise the media content: Images are one of the largest contributors to the amount of data transferred on most web pages. Leverage libraries that compress media files without visible loss of quality. Load images at the correct scale instead of relying on CSS to resize.

• Webscripting If you can avoid JS. Some functional code written in JS would be processed on the users computer or phone and increases CPU usage, which in turn increases the energy consumption of the device.

5.Clean code
Keep code clean and simple, avoid duplication and write efficient queries specially if we are using 3rd party libraries and framework. Tailor the use to ensure that we do not have code that is redundant and inefficient

Architecture decisions

1. Hosting Decisions
   Use Power Usage Effectiveness (PUE) measurement to measure the energy efficiency of the data center. Based on the non functional requirement explore the opportunity to leverage a data centre that has better PUE rating
   a. Use green web hosting services that are powered by renewable energy sources.
   b. Serverless architecture, which can reduce the carbon footprint of hosting the website
   c. Use a Content Delivery Network (CDN) to serve static assets such as images, videos, and stylesheets from servers closest to the user, which can reduce the carbon footprint of data transfer
   d. Choose a data centre close to your target audience will help reduce energy consumption

2. Progressive Web App (PWA)
   Progressive Web App (PWA) allows the content of the website to behave like native app-like behaviour but with local cache / memory. What this means is that the contents and assets do not need to be reloaded on repeat visits. It can also help improve load times and user experience with no real downsides

3. Blocking Black bots
   They are malicious bots that are used to perform a variety of harmful activities, such as scraping sensitive information from websites, launching Distributed Denial of Service (DDoS) attacks, and engaging in click fraud. They can also be used for activities such as automated account creation and spamming.
   a. Use a web application firewall (WAF) that can detect and block known malicious bots based on their IP address, user-agent, or behavior.
   b. Use CAPTCHA or other forms of challenge-response authentication to block bots that are unable to complete the challenge.
   c. Use honeypot traps, which are links or pages that are hidden from human users but visible to bots. If a bot clicks on one of these links, it can be identified and blocked.
   d. Monitor the server logs, if you see any suspicious or unusual traffic, investigate it and block the IP address if needed.
   e. Use of rate limiting, it's used to limit the number of requests from a single IP address, this way you can block the bots that are trying to overload your website.

Inspiration

• https://principles.green/

• https://patterns.greensoftware.foundation/

Further materials for reference

1. https://www.noupe.com/design/why-dark-mode-web-designs-are-gaining-popularity.html

2. https://www.wired.co.uk/article/dark-mode-chrome-android-ios-science

3. https://pagespeed.web.dev/

4. https://developers.google.com/speed/webp/docs/webp_study

5. https://blog.boot.dev/javascript/html-css-javascript/

6. https://amp.dev/documentation/