Developing a website or web application typically goes one of two ways: strictly MVP mindset with baseline features, or the mindset of “this software needs to land us on the moon and cook my family dinner”. In other words, software with every possible functionality. At AppEvolve, we’re happy and equipped to build software either way. Regardless of project type, there’s a new top priority for us in the process: web page optimization to reduce the site’s carbon footprint.
Each unique web page of every website has a carbon footprint. Every time someone visits a web page, there are carbon emissions associated. With the billion websites that exist, and the 5 billion people visiting those sites, that carbon footprint has become quite impactful. In fact, the technology sector’s carbon footprint is equivalent to the aviation industry’s, at 3% of global emissions. This fact is surprising, but here’s the empowering part: Technology has the ability to reduce global emissions by 17%. We have a tremendous opportunity to make the world a better place.
This is why it’s important to ensure your website, and especially, your most visited web pages, have a minimal carbon footprint. So, how do we do it?
Tools to Analyze the Site’s Footprint
We utilize two tools to analyze and validate the factors that contribute to a website’s carbon footprint: EcoGrader and Google Lighthouse. Both tools quickly gather insights into performance, accessibility, implementation of best practices, green hosting, and SEO. They supply the exact files or practices that weigh the site down. From there, we figure out what optimizations we need to employ.
Website Efficiency Factors
Page Weight
This facet focuses on the size of the web pages and the amount of data transferred when a user visits the site. Larger page sizes typically require more energy to load, especially for users on mobile devices or with slower internet connections. EcoGrader assesses factors such as image compression, code optimization, and file minification to determine how efficiently the website delivers content to users.
User Experience
User Experience (UX) is crucial for both environmental sustainability and overall website performance. Websites that provide a smooth, efficient browsing experience tend to consume less energy because users spend less time waiting for pages to load or navigating complex layouts. EcoGrader evaluates factors such as page speed, mobile responsiveness, and accessibility to assess the overall user experience and its impact on energy consumption.
Green Hosting
The hosting provider of a website plays a significant role in its environmental impact. Green hosting refers to hosting services that use renewable energy sources or implement energy-efficient infrastructure to power their servers. EcoGrader examines the hosting provider of a website and assesses its commitment to sustainability, identifying whether they use renewable energy, offset carbon emissions, or implement energy-efficient technologies.
Recent Use Case: Bravanti Ignite
In 2020, we developed Bravanti’s "Ignite" web application, a robust platform that serves Bravanti employees as well as the individuals they support. Their login page is the most visited page of the application since our SSO implementation allows all users to access their respective portals from there. As we’ve embarked on our own sustainability journey, it was time to start revisiting some of our existing clients' sites to implement our sustainability-focused best practices.
Bravanti’s login page originally emitted 0.97 grams of CO2 per page load. Of all sites, 0.97 grams is not a tremendous amount. However, considering the volume of users over the several years this application has been in use, the carbon footprint becomes substantial. The platform is hosted on Amazon Web Services (AWS) in the U.S. East (Northern Virginia) region which is powered by 100% renewable energy. Green hosting is the low hanging fruit for us, and it was taken care of by AWS. As an AWS Advanced Tier Partner, we always recommend AWS for hosting and infrastructure. That leaves Page Weight and User Experience for our development team to tackle. Here’s a look at how we assessed and updated this web page, decreasing its carbon footprint by 87%.
Reduce Page Weight
There were 3 primary factors of Page Weight that were ramping up Ignite's emissions: Unoptimized Media, Unused Code, and Page Performance. We came to understand that the background image of the login page was very heavy, so we swapped out the design for a lighter and more responsive image, utilizing an SVG file for the image instead of JPG. We updated the font file to a Google Font instead of a custom font, which requires less resources to render on the page. We removed some legacy JavaScript, minified the necessary JavaScript, and eliminated the unused CSS rules we had in place. With all of those adjustments, our new EcoGrader score is 85/100, up from 48/100.
Improve User Experience
The UX footprint of the page was mostly due to page rendering, cache policy inefficiencies, image width and height attributes, and excess server requests. Fortunately, some of the changes we made from the Page Weight fixes inherently resolved items like Largest Contentful Paint and image attributes. We originally had quite a few static assets that caused the page load to slow down. By caching those and eliminating render blocking scripts or stylesheets on the page, we were able to bump our score from 69/100 to 91/100.
Like everything with software development, we’ll continue to iterate over time. The Bravanti and AppEvolve teams are thrilled with the results of our web optimization efforts that minimized the Ignite Login page’s footprint to just .13 grams per page load.
As developers and global citizens, we have a responsibility to prioritize sustainability in our work. By adopting best practices and leveraging tools to optimize website and web application efficiency, we can make a positive impact on both the digital landscape and the planet. What’s the footprint of your website or web app? At AppEvolve, we're committed to leading the way towards a more sustainable future, one web page at a time. Let’s create a more sustainable world together.