Sustainable Web Development For Building Well-performing Products

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.

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."

"We were able to show which were the most energy efficient software languages, execution types, and paradigms across 10 different benchmark problems. We were also able to relate execution time and memory consumption to energy consumption to understand not only how memory usage affects energy consumption, but also how time and energy relate. This allowed us to understand if a faster language is always the most energy efficient. As we saw, this is not always the case. (...) As often times developers have limited resources and may be concerned with more than one objective, or efficiency characteristic, we established rankings of the best/worst languages according to a combination of different objectives: limited battery, limited time, and limited memory capacity. (...) Our work helps contribute another stepping stone in bringing more information to developers to allow them to become more energy-aware when programming."

Rui Pereiraa, Marco Coutoc, Francisco Ribeiroc,Rui Ruac, Jacome Cunhac, Joao Paulo Fernandes, Joao Saraiva, "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:

• Code should be minified, clean, and simple. This rule of thumb is good from a general and sustainable development perspective. Keeping code of the best possible quality, so clean and simple in both cases, speeds up your website, impact positively its performance, and makes it more accessible for people who use assistive technology as screen readers. Minifying the code, especially HTML, CSS, and JavaScript, can reduce loading time and limit bandwidth consumption. All this helps you reduce the complexity of the website and make it use the least amount of energy, so reduce its environmental negative impact. By implementing the tree-shaking method, you can also remove unnecessary code, eliminate waste, and reduce the file's size and potential processing time. 

• Code reusing vs. coding from scratch. While using some open-source code fragments and previously coded repeatable parts can make sense in reducing the number of created resources and not reinventing the wheel, from a sustainable point of view, coding from scratch is the best-performing approach. If developers create the code from scratch, they can be more aware of optimizing it from the beginning by properly selecting solutions, components, and so on. This way, the created product will follow efficiency principles from the Sustainable Web manifesto, which claims that "Products and services will use the least amount of energy and material resources possible."To sum up this recommendation, in the end, the developer must evaluate from a sustainability perspective whether utilizing code from an existing library or crafting it from scratch is the more efficient choice.
• Using semantic HTML correctly. Using semantic HTML correctly is crucial in web development as it improves the accessibility and maintainability of a website. Semantic HTML involves using HTML tags that clearly identify the purpose and meaning of different web page sections. Using semantic HTML and correctly marked-up metadata makes it easier for search engines to understand the webpage's content, resulting in better search engine optimization (SEO). It also helps assistive technologies, such as screen readers, to provide a better experience for users with disabilities. Additionally, semantic HTML enhances the maintainability of a website by making it easier for developers to understand the structure and purpose of different elements. This promotes cleaner and more efficient code, leading to better overall performance, ensuring sites will work the same across devices and platforms, and making future modifications easier. 
• Limiting tracking scripts and third-party services. Ah, the ever-present tracking scripts seem to follow us around the internet like a persistent shadow. Many websites employ these scripts to collect data about our online activities for various purposes, whether targeted advertising or analytics. Using different tools like advertising, chatbots, or maps, outsourcing your service to another provider can be advantageous in certain situations by saving time and avoiding unnecessary repetition, which can benefit sustainability. Nevertheless, relying on third-party services presents drawbacks, including limited control over emissions, potential delays, and large file sizes that could be avoided if you hosted or created the content yourself. For example, as we already investigated in our article about "5 Best GA4 Alternatives for 2023 - Sustainable Website Analytics Tools," standard Google Analytics script weights 17kb. In contrast, many other solutions, like Statsy, Plausible, Fathom, and so on, can weigh even less than 1 kB. By allowing users to control their data, you make the website user-friendly, privacy-first, and more lightweight, faster, and sustainable.
• Enabling page caching. Enabling page caching is crucial for a sustainable website for several reasons. It stores a static version of your web pages on the server or CDN (Content Delivery Network) edge servers. When a user requests a page, the cached version is delivered quickly, reducing server load and improving website performance. This leads to faster page load times and overall better user experience. It also reduces the number of requests made to the server, as the cached version can be served directly without executing resource-intensive processes on the server. This lowers the server load, making it more sustainable by reducing energy consumption and server strain. Caching helps websites to handle high traffic volumes and sudden traffic spikes more efficiently. Websites can handle more simultaneous visitors by serving cached pages instead of processing requests individually without degrading performance or requiring additional server resources.

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:

• Web Font Optimization For Web Designers
• The Most Efficient Web Image Formats. Use Cases For Different Types Of Images
• How To Choose The Best Image Formats For The Web?

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.

"A CDN is a network of servers in data centers spread worldwide. Every time the CDN receives a request, it starts by figuring out where the visitor is located and which data centers are closest. Once the nearest data center has been found, it checks whether a cached version of the requested data exists or if it has to download a new version from your server."

Michael Andersen, "Sustainable Web Design In 20 Lessons", 2023

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.

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:

• Mobile-first designs speed up your website's loading time and are usually easier to navigate because they limit the content to the most important. This can lead to increasing conversion rates and higher web traffic.
• Good page experience on the mobile version is extremely important for search engines like Google. Mobile-friendly websites are indexed higher in SERP rankings and improve their SEO.
• Users spend more time on mobile devices than on any other platform and expect more from them. That means your users and customers will be more likely to return if your mobile-first design is implemented.
• By applying a mobile-first approach, you also turn to more accessible design, following governmental recommendations and making your product achievable by a much wider audience, for instance, relying on assistive technology.
• When considering sustainability, designing interfaces that prioritize mobile devices and are responsive can help minimize energy consumption by enhancing performance and creating a seamless user experience. Moreover, smaller devices usually have lower processing power than larger devices, reducing screen energy consumption and potentially other hardware operations.

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.

"Following the Website Carbon Audit, we focused on reviewing the design and code of the most carbon heavy, and the most frequently visited, pages. Our team of design and development experts performed a thorough assessment, identifying areas where improvements could be made to enhance efficiency, user-friendliness, and sustainability. This in-depth review formed the basis we needed to create a list of actionable recommendations for the Unilever team."

Wholegrain Digital website

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.

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.