Sustainable software development and design practices
Without timely intervention, it is anticipated that the ICT global greenhouse gas emissions relative contribution could exceed the 14% 2016-level of worldwide global greenhouse gas emissions by 2040, thereby being unable to meet the global agreement for the 2050 zero net emissions objective of the 2015 Paris global agreement, centered on containing climate change via sustainable development. This can be averted by adopting sustainable development practices across all sectors of the economy, ICT inclusive.
The amount of data delivered to your browser is the sole variable that has a direct impact on the carbon footprint of your website.
Data volume comprises CSS, JS, Fonts, and dynamic data exchanges like as form posts or restful API queries.
You may make a few changes to make your website more sustainable.
Using minification and exclusion, optimizing your photos, and decreasing the javascript and data you transmit to the client front end.
Some of the software development practices that improve performance and sustainability are:
1. Remove Unnecessary Libraries: Using libraries to make restful API requests is no longer necessary in modern web development. Because all recent browsers provide fetch api functionality, making axios, unfetch, and $.ajax obsolete.
MomentJS is a very large library that does not enable tree shaking. As a result, your code is automatically bloated with all of MomentJs’s capabilities, even if you don’t require them. My advice is that you use date-fns because it enables tree shaking.
Redux is frequently used in current web development using react. With the introduction of Context APIs in 2018, redux is no longer required. When you remove redux, make sure you also remove redux-saga, redux-thunk, and other “side-effect” handling middlewares, as your useEffect flawlessly handles side effects in react.
2. Heavy CSS bundling: The most significant speed inhibitor is your CSS, which frequently loads at the top of your page.
Steer clear of CSS libraries that group all CSS classes together. Use CSS chunking according to the routes in your application and remove any unnecessary CSS.
Use AMPs, which require that a page’s CSS be no more than 50 kb.
If you’re using React, choose an effective component library.
Styled components or comparable CSS-in-js modules are what I like. This guarantees effective CSS bundling and little CSS at the global or page level.
Code Chunking and JS Bundling. Only the necessary JS bundle loads on the page when the amount of JS code is minimized and properly chunked. Good news: This is something that practically all recent JS-based web development frameworks accomplish smartly. With Suspence and react.lazy(), you may modify the code chunking if you’re using create-react-app.
3. Image Optimization: If your website includes images, you should think about optimizing them. Resizing is one method of optimizing. If you’re displaying a 640x480 px image, utilize a 640x480 image rather than a larger 14-megapixel image and scale it on the browser.
Format. Webp is frequently a more efficient format than JPEGs.
Another option is Image optimizers. If you’re using gatsby or nextJS, you may use gatsby-plugin-image or text/image to optimize image bundling automatically.
There’s some nice advice here
4. Heavy Typefaces: Custom typefaces may be rather hefty. Use a limited number of custom typefaces.
You may use Google Fonts to provide only the weights you require.
5. High-level optimizations: Static Production
You won’t require as much javascript if you use static HTML.
Avoid using angular or create-react-app for non-dynamic apps. If you’re building a blog or personal website, use gatsby or nextJS for static generation.
Serve your content via static hosting, such as S3/Cloudfront. This saves money since no computation is done in the backend, and your content is delivered to the browser more quickly thanks to edge location caching provided by CloudFront.
with nextJS Dynamic sites can also benefit greatly from hybrid rendering because the first render occurs on the server. As a result, less data was delivered as opposed to an application that was entirely client-side displayed. However, as this requires the use of servers or backend code execution, it could be expensive.
6. Data Compression: Compression
Data should be compressed when it is served to browsers which can be done by using compression headers. All API gateways and content delivery networks offer gzip, which is the most popular choice. Although it is still relatively unknown, brotli is a superior alternative.
UX and Design also play a vital role in reducing network load.
Some of the UX Design practices that improve performance and sustainability are:
1. Mobile first designs
The design of a public website must be compatible with mobile phones and other portable devices. Additionally, the screen space in such gadgets is rather limited. For these devices, a lot of data transit may be optimized. for example.
image size optimization would be of great importance in designing for smaller screens.
Large texts can be condensed by using an ellipsis () or links that say “Read More.” When users click such buttons, the server will retrieve the entire piece of content.
When a user scrolls through tables with many rows, data can be retrieved gradually.
2. Supporting Dark Mode in UI can be helpful in drastically lowering the power consumption of newer mobile devices with OLED displays, even if it may not have an impact on network load.
3. Data-heavy web applications:
Instead of downloading and presenting the entire data set at once, it is preferable to include a proper sort or pagination to the UI when rendering a table with many rows.
In some circumstances, you may retrieve the required data without retrieving the entire data set by using a filter or a type-ahead search.
4. Digital marketing junk
Through tag management channels, a lot of digital marketing junk is put on UIs for Ecomm apps, and users frequently have no control over those. These frequently compromise privacy in addition to increasing network traffic. Although this data collection is frequently necessary to support users, the website provider must keep data collection to a minimum and take every precaution to lessen network strain.
A really sustainable future requires that we understand the challenges from the local to the global level, from farms to industries, from companies to individuals and are also capable of innovating, designing and implementing solutions that enable green and inclusive transition while making sure that no one is left behind — Software engineers for green deal
On a closing note, The performance of your online apps does in fact significantly increase when you try to lessen your carbon footprint. Network load and performance, however, may not always coexist under certain circumstances. To deal with such situations, pragmatism is required.
Thanks for reading,
