Sustainable Web Development For Building Well-performing Products

TL;DR

Sustainable web development is the key to creating high-performing websites while benefiting your business, customers, and the environment.

Introduction

In the pursuit of business success, the words "web performance optimization," "speed," and "conversion" often echo as vital mantras for those who rely on their online presence for marketing, services, and branding. However, what if I told you that these essential goals are intricately linked with digital sustainability, offering a win-win solution that benefits your company, your customers, and the planet as a whole? It might sound like wishful thinking, but sustainable web development holds the key to making this a reality.

What is sustainable web development?

Recently, we have discussed sustainable web design, how to create it, how to start, what to consider, and what profits it can bring to businesses. Now, it is time to look at the second stage of creating a digital product - its development. Whether you try redesigning your old website, building a new one, or providing your customer with a mobile application, you must decide which company you will cooperate with.

As a web development company will discover your needs, they will propose solutions, frameworks, programming languages, hosting options, and project roadmap that will respond to your needs and realize your business goals in the final version.

Here is the thing: you might naturally be drawn to companies that promise improved performance, faster loading times, enhanced security, and ease of maintenance. After all, these aspects contribute to a positive user experience and align with your business goals. That's understandable.

Let's face it: sustainability won't be the top priority for the company that wants a new website. What if I told you that embracing sustainable solutions could amplify these benefits? Moreover, it allows your brand to convey an extra layer of value – not just to your customers but also to the environment. You can make a meaningful difference by reducing your digital carbon footprint and adopting life-centered design principles that consider both human and non-human stakeholders.

So, what is sustainable web development? It's a holistic approach to creating digital products and services that minimize their environmental impact, reduce digital carbon emissions, and promote inclusive and accessible user experiences. This approach encompasses various sustainable practices, from setting page weight budgets to using efficient programming languages, maintaining clean and simple code, optimizing files, reducing the use of plugins and tracking scripts, and choosing green web hosting powered by renewable energy sources. In essence, sustainable web development places people and the planet at the forefront of its design and construction principles.

While you, as a product owner or manager, may not be the one writing code, you hold the power to encourage web developers and designers to embrace sustainable web technologies with minimal effort. Implementing sustainable solutions doesn't require a complex skill set and does not remain in scope of unattainable expectations; it's a choice you can make to contribute to Corporate Digital Responsibility (CDR), which encompasses social, economic, environmental, and technological practices.

"Green coding" refers to the practice of developing computer code and software with an emphasis on energy efficiency and environmental sustainability, aiming to reduce the environmental impact of digital technologies.

Incorporating sustainable and best practices for the development of digital products

Let's talk about the code. But no worries. We will not teach you how to code or go into detailed instruction on sustainable development tips. The web and literature are full of resources on this topic that can be easily found by web developers who work on building websites and software development.

From the newest one, we recommend to everyone who wants to start creating sustainable websites - Web Sustainability Guidelines (WSG) 1.0. This draft, rooted in the Sustainable Web Manifesto, includes 93 guidelines with 232 success criteria, references, examples, and more. It is a valuable knowledge resource for developers, designers, project managers, and everyone involved in building sustainable digital products and services. 

You will probably not code by yourself as an entrepreneur and business representative. Still, you can become an evangelist to your company who creates a space inviting people to open exchange of information and create shared value within your organization on becoming sustainable. The only (however, the most important) effort from your side would be encouraging others to follow those principles in their workflow.

Let's introduce you to some basic knowledge and practices within creating a sustainable web and, in this way, making a big difference with green development. Being familiar with them can help you set up the right approach to designing digital products that are resilient, respond to your business goals, and serve better for people but also for the whole planet.

1. Energy-efficient programming languages

Most of us imagine that the choice of the programming language for a particular project depends mainly on the use case, project requirements, development speed, maintainability, and the ecosystem of libraries and tools available. The factor such as efficiency in programming languages can be subjective and context-dependent. The efficiency of a programming language depends on various factors, including the specific task or application, the developer's familiarity with the language, and the platform or environment in which the code runs. What about energy efficiency? Regarding creating sustainable products or low-carbon websites, developers can choose programming languages that require less energy.

In 2021, a group of seven researchers from Portuguese universities investigated the most energy-efficient programming languages, and they published the results in the article "Ranking Programming Languages by Energy Efficiency."

According to their research, different languages have a wide range of energy efficiency, and although the results vary with context, the most energy-efficient languages are compiled languages. In brief, the researchers concluded from their in-depth examination that C, Rust, and C++ were the programming languages with the lowest energy consumption. At the same time, Perl, Python, and Ruby were the most energy-consuming. It is slightly concerning to note that JavaScript and PHP, widely used for creating websites, ranked 17th and 21st in terms of energy efficiency. This finding is worrisome because these languages are responsible for powering most modern websites.

This should increase our awareness about using JavaScript. While JavaScript may be more energy-efficient in solving algorithmic problems, it will always be less efficient than serving static files in scenarios where problem-solving is not required. An example of this is using JavaScript for animating elements in web design. CSS can now achieve many animation effects more efficiently than JavaScript by reducing the CPU's processing workload, resulting in smaller file sizes and reduced energy consumption during data transfer.

That's the theory, but what about the practice? When you work with developers, you will find out that the usage of programming languages will mostly depend on the kind of project. However, thinking about them in terms of their energy efficiency can primarily make us aware of those significant differences and encourage us to make a conscious choice and search for better solutions not only in terms of the project but also from a broader perspective to make a positive impact even at the coding level.

To sum up, while working with sustainable developers, keep an eye on these recommendations on how to create greener website and work with sustainable development:

Maintaining minified, clean, and simple code not only enhances website performance but also promotes accessibility, aligning with sustainable development principles.

Let's examine our coding approach while working on the website for our sustainable web design agency, Dodonut. The Bejamas team, a web development company with Dodonut as its web design sub-brand, was naturally responsible for the website's development. Bejamas chose the Astro JS framework for this project primarily because of its sustainability-focused features. One of the critical factors was Astro's small JavaScript footprint, which promotes efficient web development by rendering pages to static HTML and reducing unnecessary JavaScript. This improves loading times and minimizes data transfer, resulting in a more eco-friendly website. In fact, an Astro website can load 40% faster with 90% less JavaScript than a similar site built with Next.js.

Environmental sustainability was a top priority for Dodonut, and the Astro framework played a crucial role in achieving low CO2 emissions. Ultimately, the Dodonut website received a perfect Lighthouse score, reflecting its excellent performance in speed, accessibility, and SEO.

Bejamas also helped the Dodonut team create a calculator to measure savings in carbon emissions accordingly to change the website's size. By highlighting the reduction in CO2 emissions and equivalent environmental benefits (such as trees planted or cars taken off the road), Dodonut sets an example for environmentally conscious web design.

To fully follow this detailed case study on how to work on sustainable web development, read the article and check how the proper coding approach can lead to a greener website and reduced digital footprint.

2. Font and image optimization

Optimization of images and fonts plays a crucial role in creating sustainable websites. When images and fonts are not optimized, the website's loading speed can significantly slow down, leading to a poor user experience. Slow-loading websites often frustrate visitors and can lead to a higher bounce rate. By optimizing images, such as compressing them and using the appropriate file formats, website owners can reduce the size of the files without sacrificing visual quality. Similarly, optimizing fonts by using web-safe fonts or implementing font subsets can also contribute to faster loading times.

Not only does optimizing images and fonts improve user experience, but it also reduces the website's bandwidth consumption, resulting in energy savings. This is particularly important for sustainable websites that prioritize minimizing their environmental impact. Website owners can design and build faster, more efficient, and sustainable websites by implementing image and font optimization techniques.

When working on the proper file optimization, all companies can set up the page weight budget and establish guidelines for the maximum file sizes allowed on their website. This helps ensure that the website loads quickly and efficiently for all users, regardless of their internet connection or device.

The page weight budget is the total size of all files (HTML, CSS, JavaScript, images, videos, etc.) loaded when a webpage is accessed. By setting up a page weight budget, companies can prioritize and optimize their files to meet the budget and reduce unnecessary bloat.Establishing guidelines for file sizes can help teams prioritize their optimization efforts. For example, images can be compressed or resized to reduce their file size without significantly losing quality. Similarly, JavaScript and CSS files can be minified or concatenated to reduce their size and minimize the number of requests made to the server.

Setting up a page weight budget also encourages regular website performance monitoring and analysis. Companies can identify and address any excessive file sizes or performance bottlenecks by regularly checking the page weight and load times.Implementing a page weight budget and optimizing files accordingly is crucial for delivering a fast and efficient website experience, ensuring user satisfaction, and improving search engine rankings. 

It is a good habit to create internal guidelines for font and image formats used on the website, which can be later followed by developers, designers, and content creators uploading the content on the website. We have already written about several aspects of it in our previous articles:

To sum up those comprehensive guides on fonts, the best option (for the current moment) is to use fonts in the efficient formats of WOFF and WOFF2 and also make use of popular system fonts (preinstalled on the system so super sustainable), Variable and open-source fonts.

In the case of image format, each case has to be analyzed independently. But to simplify the results from previously mentioned articles, JPG is best for photography when WEBP is not available, PNG for graphics with transparency, SVG for icons, logos, and images with a limited number of colors, and WEBP and AVIF for images that require good quality and compression.

3. CDN (Content Delivery Network)

If you are involved in a company that won't limit itself to a local audience but spreads its impact and finds customers across the globe, CDNs can be especially beneficial for you.

In the analogy, CDN is like buying a carrot from a local farmer instead of importing it from another part of the world. That means that the carrot doesn't have to travel long distances to reach the consumer, reducing the global emissions of CO2 produced by transportation. Likewise, CDNs store copies of websites on servers located in different regions, bringing the content closer to users and minimizing the distance between the server and the user's device. This reduces the distance data travels, leading to faster loading times and better user experiences.

By reducing the distance data has to travel, CDNs can significantly decrease the amount of energy consumed and the carbon emissions generated during data transmission. This is particularly important in today's globalized world, where websites and online services cater to users across different regions and continents.

Furthermore, CDNs can optimize data delivery by routing traffic through the most efficient paths, reducing the overall energy consumption associated with data transmission. This benefits the environment and helps websites and online platforms save on infrastructure costs and improve their performance.

In summary, CDNs bring website content closer to end users, leading to faster loading times, better user experiences, and reduced energy consumption, ultimately contributing to a more sustainable digital ecosystem.

A CDN is similar to buying locally grown carrots, reducing data travel distances and global CO2 emissions, while also enhancing website speed and user experience.

4. Mobile-first layout

This recommendation for sustainable websites applies to almost all kinds of companies. Unless you are sure that 100% of your customers visit your website or web app only by desktop, your company should also consider this approach. Currently, 6.65 billion of the 8 billion global population are smartphone users. We know that those "little" devices don't serve anymore only for calling and messaging. Basically, they are handheld computers through which we can access the world and connect with the web.

In many parts of the world, especially in developing countries, smartphones are the only way to access the internet. The new algorithms of search engines also favor those websites that are mobile-friendly. That means that a mobile-first approach in design and development can benefit you in many ways:

How can you benefit from the development of a sustainable website?

In the realm of sustainable web development, nothing speaks more convincingly than real-world examples and practical use cases. Let's embark on a journey through two compelling case studies that vividly demonstrate the remarkable benefits of prioritizing sustainability in web development.

Our first stop is Starbucks, a global coffee powerhouse. Let's check how they reduced the environmental impact of their products. A pivotal moment in this transformation was transitioning from traditional mobile apps to Progressive Web Apps (PWAs). The ingenious minds at the web development agency Formidable spearheaded this transition, and the results were astonishing.

Of course, they worked a lot on making the whole ordering flow user-friendly by organizing the complex data and customizing the menu in the best way. By switching the approach to Progressive Web App that didn't force users to download heavy apps, they reduced the product by 99,84% (sic!), limiting its weight from 148MB, the size of the original iOS mobile app to PWA, which is 233kB.

Starbucks benefits not only by limiting its digital carbon footprint but also by improving its load time, user experience, and SERP ranking.

Similar results were obtained by Unilever, the global company that we shouldn't introduce possibly to anyone. In their case, the well-known sustainable web design agency Wholegrain Digital, with their main representative and creator Tom Greenwood (the author of “Sustainable Web Design” book), worked with Unilever and created a website carbon audit with recommendations for optimizing the website efficiency and making it more sustainable.

By carefully analyzing the most visited and heavy pages, they calculated with their Website Carbon Calculator that every time somebody visited Unilever's homepage, 0.80 g of CO2 was emitted into the atmosphere. By recommending actionable improvements on its website related to its code and design, the company could reduce four times the greenhouse gas emissions caused by its website to 0.20 g of CO2.

Those are pretty remarkable numbers, but most companies will ask, "So, what is the business gain at the end?" Recently, there has been a growing awareness of the tangible benefits that sustainable web design practices can bring to businesses in terms of cost reduction and profit enhancement. Let's take a closer look at some key aspects where adopting sustainable web development practices can translate into significant business gains while also addressing the crucial environmental part:

1. Performance: One of the most direct and immediate impacts of sustainable web development practices is improved website performance. Faster loading times not only enhance the user experience but also have a direct correlation with higher search engine rankings. A website optimized for speed can reduce bounce rates and increase user engagement, leading to higher conversion rates and, consequently, increased profits. Simultaneously, a faster-loading website consumes less energy, reducing its carbon footprint and contributing to a more sustainable digital ecosystem.

2. Conversion: Sustainable web design contributes to a faster website, which, as mentioned, can result in higher search engine rankings. This higher ranking can significantly boost a website's visibility, driving more organic traffic. With an improved user experience and reduced loading times, the chances of visitors abandoning the website decrease, increasing the likelihood of conversions, whether sales, sign-ups, or other desired actions. Reduced bounce rates and increased conversions benefit the business and lead to fewer wasted resources and energy.

3. SEO: Sustainable web development practices often involve optimizing a website's structure, content, and performance—all crucial factors in search engine optimization (SEO). A well-optimized website can rank higher on search engine results pages (SERPs), leading to increased organic traffic and better brand visibility. Improved SEO can directly translate into increased profits as more users discover and engage with your website. Additionally, eco-friendly websites tend to have a lower environmental impact, aligning with sustainability goals.

4. Reduced Costs: Sustainable web development also has economic benefits, particularly in reducing operational costs. By optimizing and compressing large files, websites can significantly lower their bandwidth bills, which can be especially advantageous for service providers. This cost reduction can directly impact a company's bottom line, increasing profitability and simultaneously reducing the energy consumption associated with data transfer, contributing to a greener internet.

5. Accessibility: Building an accessible website caters to a broader audience and results in cleaner, more semantically structured code. While accessibility may involve additional coding (such as ARIA attributes), well-coded sites are usually less bloated. This streamlined codebase not only benefits users with disabilities but also enhances website performance, reducing overall emissions and operational costs. An accessible website is also more inclusive, aligning with environmental sustainability by reducing disparities and promoting equal access to online resources.

6. Economic and Environmental Impact: Improving the user experience through sustainability and accessibility can ripple effect on a company's financial performance. By ensuring compliance with accessibility standards, businesses can mitigate the risk of costly lawsuits related to web accessibility. Furthermore, accessible websites can tap into new audiences, potentially increasing sales or donations. Additionally, enhanced user experiences can lead to better resource utilization, improving overall financial efficiency and profitability. All of these benefits have a positive environmental aspect by promoting sustainable business practices and reducing digital waste.

In conclusion, sustainable web development practices offer a range of concrete business benefits, from improved website performance and conversion rates to reduced operational costs and enhanced accessibility. Simultaneously, these practices contribute to a greener digital environment by reducing energy consumption, lowering carbon footprints, and promoting responsible online behavior. As the digital landscape continues to evolve, integrating sustainable web development into business strategies is not just a moral imperative but a smart financial and environmental decision.

Sustainable web development practices offer business benefits and environmental responsibility, making their adoption essential in today's digital landscape.

Conclusion. Prioritize people and planet - web performance, load time and user experience will be naturally improved

In conclusion, sustainable web development is more than a responsible choice; it's an opportunity for businesses to thrive in an era where environmental consciousness and digital efficiency are paramount. By embracing sustainable practices, companies can improve website performance, boost conversions, reduce operational costs, and contribute to a greener digital landscape. This synergy of business success and environmental responsibility is not just a moral imperative but a strategic decision that paves the way for a brighter and more sustainable digital future.

As we prioritize people and the planet, web performance and speed naturally follow, ensuring a win-win outcome for businesses, their customers, and the world itself. In this journey toward sustainability, green hosting, efficient programming languages, code optimization, and other critical practices play vital roles in forging a path to a more environmentally conscious and prosperous digital ecosystem.

In the next article, we will follow up with the related topic of green hosting, demonstrating how it is crucial to choose hosting providers run on green energy so use renewable energy.

References