A practice that goes hand-in-hand with sustainable website design, green' or low-impact web development is a method of building online digital experiences at the lowest possible cost to the environment.
Typically low-impact web development is done by focusing on energy efficiency and partnering with sustainable service providers, but there are a whole host of techniques developers can utilise to help make their websites more environmentally friendly.
How do we put this into practice at Noughts & Ones? We've built a five-step framework called Conscious Development™ that guides everything we do, with a focus on crafting accessible Shopify websites that are always conscious of:
- Design - Reducing the environmental impact and carbon footprint of an e-commerce store, from the initial design right through to the live development.
- Code - Core code that is as streamlined and efficient as possible in order to have minimal impact on the planet.
- People - Crafting digital experiences that positively impact both the people that use them and the planet.
- Partners - Carefully selecting sustainable partners, apps and software that we bring into your tech stack.
- Content - Only including content that's absolutely necessary and ensuring that what is included is as efficient as possible.
🖥 Our tips for low-impact web development
To help website developers reduce the environmental impact of the projects they work on, the team here at Noughts & Ones have put together a list of our top tips for developing low-impact websites, including an introduction to W3C standards, the importance of page load speed, page weight budgets and much more.
By following the best practices listed below, your next website development project is more likely to be faster, smaller, and better for the environment than you may have previously thought was possible!
🗒 Follow W3C web standards
Low-impact web development is about more than just knowing the effect a website has on the environment. It's also about knowing the effect it has on those using it.
According to the World Health Organisation, up to 15% of the world's population (one billion people) live with some form of disability, and failing to consider the unique needs of these people when crafting digital experiences for your business means that you run the risk of losing both their trust and their custom entirely.
This is even more true when looking at the links between websites that have been designed with accessibility in mind and Google's ranking algorithms. While accessibility itself isn't directly tied to a website's ranking potential, there are a few common accessible design techniques that are shared with a great search engine optimisation (SEO) strategy:
- Navigation - A well-designed and easy-to-follow navigation make it easier for users and page crawlers to explore and map out your website.
- Page titles & headings - Optimised page titles written for real people instead of bots not only tend to index better, but are easier for screen readers to pick up.
- Sitemaps - Sitemaps provide a clear overview to a user of all pages on a website, alongside helping search engines find other pages on your site that are linked to far less commonly.
- Anchor text - Providing context to hyperlinks throughout your website to both users and search engine crawlers.
- Breadcrumbs - Allowing users to keep better track of their journey through a website, as well as giving search engine crawlers a better understanding of the structure of your site.
- Alt text - Providing text-based alternatives that can be read by screen readers alongside giving search engines a clue to the visual content of images uploaded to the website.
We believe that the internet should be a safe and accessible space for all. To help make this vision a reality, all the Shopify websites we develop adhere to a strict set of accessibility guidelines, including:
- Making sure that all text-to-background colours pass with at least a AA rating according to Web Content Accessibility Guidelines (WCAG).
- Ensuring all image content on our websites include alt-tags.
- Providing a community-focused customer experience.
- Developing screen reader-friendly content components for those who suffer from visual impairments.
🏎 Improve page load speed
One of the most immediate ways to achieve low-impact web development is to focus on improving the overall load times of individual pages across the website.
The less time a user spends loading a website, the faster they're able to achieve the goal they had for visiting the site in the first place. This reduces the energy they consume visiting the site and improves their overall user experience too.
There are real and measurable benefits to your business when you focus on improving page speed too. A 2018 Google study determined that just a two-second longer wait for a web page to load increased the probability of a user abandoning their visit by 90%.
Research by Portent in 2019 also supports these findings, showing a significant reduction in both goal and transaction conversation rates for pages taking longer than 2 seconds to load.
By turning your attention to reducing page load times across your site, you're more likely to improve your website's conversion rate and generate more sales for your business. We build ultra-fast Shopify stores by shrinking scripts, compressing downloads, setting appropriate caching times, and combining files to ensure seamless user experiences for our clients.
☁️ Utilise cloud hosting
Cloud hosting leverages a global network of interconnected servers in place of shared hosting or traditional, on-site hosting platforms. This approach results in more reliable server uptime and performance with increased backup and data recovery options thanks to shared liability across thousands of physical storage drives.
Not only is cloud hosting faster and more reliable, it's often cheaper too, as businesses don't need to invest in on-site servers with expensive power and cooling requirements. Server space is also more effectively utilised on cloud hosting packages, helping to mitigate wasted storage, a problem often suffered by traditional hosting platforms.
Alongside general speed and performance benefits, cloud hosting is often a much more environmentally-friendly way of managing and sharing online data, with one 2020 study by Accenture revealing that switching to cloud hosting can help reduce energy consumption by 65% and carbon emissions by up to 84%.
🍪 Disable cookies, analytics & tracking
While passive data collection can be an invaluable tool for businesses looking to learn more about their customers' behaviour and online browsing habits, user tracking and data collection can be responsible for a significant amount of data and energy use. One study by Gerry McGovern estimates that tracking platforms like Google Analytics produce almost 17 tonnes of CO2 emissions per year. Plus, with website traffic increasing year-on-year, the total yearly emissions of user behaviour tracking is only set to get worse.
In an experiment conducted by USA Today, it was found that stripping out all tracking codes and implementing GDPR compliance into a cloned version of the USA Today website resulted in a 90% saving in page weight and load times 1500% faster (from 45 seconds to just 3 seconds).
While this might sound positive, the downside is that completely eliminating behaviour tracking means that businesses are less likely to be able to effectively engage with their audience, and more likely to increase their energy and financial spending on poorly-targeted, less successful campaigns.
Instead, businesses with sustainability in mind should look for alternatives that enable them to strike a careful balance between the ability to track user behaviour while keeping their carbon emissions to a minimum.
🏕 Cabin
Cabin, a carbon-conscious privacy-first analytics tool, is an ethical alternative to platforms like Google Analytics. It focuses on a faster, lighter and greener method of tracking user behaviour.
The tool is fully compliant with all current data laws, includes no cookies or consent banners, and there is absolutely no sharing of data between third-party companies.
To keep their environmental footprint to a minimum, Cabin is powered by a sustainable cloud infrastructure that runs on 100% renewable energy. What's more, with a file size 22 times smaller than Google Analytics and a load time that's twice as fast, far less energy is consumed by both businesses and their customers looking to integrate the service into their online storefront.
💭 Plausible
Like Cabin, Plausible is an open-source alternative to Google Analytics that provides website tracking in a privacy-first, lightweight package.
Plausible promises completely autonomous data measurement that doesn't rely on tracking cookies or any personal data. Temporarily processed data is kept strictly within the European Union and no cross-site or cross-device tracking is used.
With tracking scripts 45 times smaller than Google Analytics, Plausible estimates websites with 10,000 monthly visitors can save up to 4.5kg of CO2 emissions every year by switching to their platform.
⚖️ Consider a page weight budget
As the name suggests, a page weight budget refers to a self-specified limit of how large the total file size of each page on your website should be.Keeping it low can increase overall page speed and reduce the environmental impact of the average page on your website.
There's no industry standard size and the specific limit is usually chosen by development teams. For example, we apply an overall page weight budget to all the Shopify stores we build, only including front-end features that have minimal impact on code.
Our friends over at Wholegrain Digital have also shared their own three-step guide to determining the ideal page weight budget for your next website project:
- Benchmark - Test the total page size of competitors in the industry and aim to be at least 20% more efficient to ensure a faster load and better overall experience for your users.
- Connection - If you're replacing an existing website that currently tracks user data, try and identify the worst connection of your target audience against average expectations of load times to help calculate your page weight budget. Tools like PerformanceBudget.io can be helpful here.
- Decision - After following the two steps above, try and establish a minimum baseline and an ideal weight for each page on your new website moving forward.
🧬 Write reusable code
It may seem obvious, but the longer a developer spends working on a project, the more energy they are consuming along the way. Writing reusable code is a great way of speeding up the process while keeping carbon emissions to a minimum.
Here are some top tips to bear in mind when writing reusable code for your next low-impact web development project:
- Functionality first - Consider whether reused code is the best approach for your current use case. Will your reused code work seamlessly across multiple projects, or will you need to make tailored adjustments each time?
- Focus on modularity - Avoid grouping all of your code into a single location. Instead, keep everything segmented into independent chunks and create unique functions and classes so that each block of code solves one problem at a time.
- Label everything clearly - Clearly label your code so that it's easy to identify what each class and variable does should you need to come back to the code in the future.
- Loose coupling - Trying to avoid coupled modules with high dependencies on each other. Aim to create modules that are able to function independently without any external support.
- Unit test classes - Write unit tests for each of your classes, but only test a single function at a time. Consider the preconditions for each function or method you're testing.
- Comment your code - Considered best practice amongst website developers for decades, commenting your code makes it easier for both yourself and other developers to keep track of the exact functionality your code performs.
👾 Use CSS Sprites
CSS Sprites are often used to speed up website performance while simultaneously reducing carbon emissions. They're a method of combining individual images into a single file that a web page can easily access.
Instead of loading multiple images on a web page, this single image is then loaded, masked and repositioned so that only the required part of an image displays at any given time, ultimately cutting down on requests to the server and the energy required to make them.
It's worth noting that improvements in the application layer of the Internet Protocol Suite (particularly multiplexing and server push) mean HTTP requests are far faster and more efficient than ever before. Images requested can be packaged up and fetched much more efficiently and at greater speeds, so it's worth conducting your own testing to determine whether the implementation of CSS sprites actually makes a significant improvement in your own website projects.