Web Performance Optimization and Sustainability

Here’s why web performance optimization is critical to sustainability and reducing emissions while also providing other measurable business and digital marketing benefits.

Emerging technologies have made digital products and services increasingly accessible, cheaper, and faster. However, while the internet overall has gotten faster, webpage speeds have actually slowed.

This is partly because page weight—the data transfer required to load a webpage from a server to a user’s device—has more than doubled over the last ten years. The more code, images, media, and features that users need to download, the slower the page speed. Poorly optimized pages cause numerous problems for both the people who try to access those pages and those who own or manage them.

This article explores those problems and offers a variety of action items you can take to optimize web performance.

Our web applications continue to grow in their scope, ambition, and functionality — that’s a good thing. However, the amount of data downloaded by each application continues to increase at a steady pace. To deliver great performance we need to optimize delivery of each and every byte!

— Ilya Grigorik, Google

Poor Performance and Sustainability

At Mightybytes, we have seen this firsthand on client websites. At launch, a freshly redesigned site might load quickly and provide a great experience. However, over time, as people across client teams add content and new features, site performance suffers. A three megabyte image here, an improperly embedded widget there, it all adds up.

This adversely impacts user experience and undermines web sustainability. Eventually, if the performance issues aren’t addressed, the site not only becomes unusable, but also increases risks, such as data privacy or accessibility lawsuits.

However, web sustainability is way more than just performance. In the sections below, we explore how important it is to prioritize web performance optimization alongside other digital sustainability criteria when creating and managing digital products and services.

Additionally, we include resources to improve both sustainability and marketing benefits as part of responsible web optimization practices. 

What is Web Performance Optimization (WPO)?

Web performance optimization is the practice of monitoring, analyzing, and improving the speed and efficiency of your website. It involves various strategies and techniques focused on delivering fast, efficient, and engaging web experiences to users across a wide range of devices and network conditions. It is also a critical component of sustainable web design.  

Web performance optimization is not new. In fact, it’s been around since the dawn of the World Wide Web. Unfortunately, even decades later, too few organizations prioritize web performance optimization as a key component of responsible marketing and product management practices. 

Instead, they opt for flashy features, looping video backgrounds, and a mish-mash of off-the-shelf themes, frameworks, or plugins that, while time-saving in the short run, cause untold long-term problems. 

Slow-loading or underperforming pages frustrate users, undermine an organization’s ability to meet its business goals, and significantly damage the environment. This can also lead to technical debt, accessibility issues, and, if not monitored properly, security and data privacy risks.

Shaving off a single kilobyte in a file that is being loaded on 2 million websites reduces CO2 emissions by an estimated 2950 kg per month.

— Danny van Kooten, CO2 Emissions on the Web

The Ramifications of Poor Performance

Here are just a few issues that can arise from a slow or low-performance website:

• Environmental impact
• Poor user experience (UX)
• Higher hosting costs
• Digital marketing and SEO implications

Let’s take a look at each.

Environmental Impact

Accessing the internet triggers complex systems that contribute to rising digital emissions. With nearly 6 billion users across the globe, the massive amount of resources needed to provide internet service are intensified by slow websites.

1. Increased energy consumption

Slow websites require more server resources to handle requests. Servers need to work harder and longer to process and deliver content. In turn, this leads to higher electricity usage, which also contributes to increased emissions. This is especially true if a web host’s primary source of energy comes from fossil fuels.

Additionally, visitors to a slow site may engage in excessive clicking, reloading, or downloading, resulting in unnecessary data usage. This also leads to more energy use.

2. Extended server infrastructure

This demand on servers may cause website owners to invest in additional hosting infrastructure. Data centers in particular consume significant amounts of electricity and water for cooling and operations. Plus, the increased demand burns out hardware faster, leading to a significant e-waste problem.

Plus, this is further complicated by the addition of artificial intelligence. While AI can potentially improve efficiency, it also comes with its own high energy price tag. So, while including an AI chatbot may not add a significant amount to your page weight, there’s a lot going on behind the prompt field.

3. Increased internet traffic

Also, as page load time increases from one to five seconds, so too does the probability that a visitor will leave. Frustrated users who abandon slow sites will have to search for alternatives. This means more data and higher energy use across internet infrastructure.

4. Carbon emissions from user devices

Finally, users must spend more time on their devices when websites load slowly. Longer browsing sessions mean increased energy consumption for charging and operating those devices. 

All of this contributes to the internet’s increasing environmental impact and a rise in global emissions from the tech sector. 

Poor User Experience (UX) 

A bad user experience doesn’t allow visitors to accomplish tasks quickly or efficiently. Page speed affects a user’s overall experience by being disruptive, frustrating, and sometimes confusing. This is bad for business.

1. Decreased engagement

It is estimated that 40% of visitors will leave a website if it takes more than three seconds to load. Consequently, they can’t complete the actions you want them to take on your site.

2. Accessibility issues

Bloated webpages or those that don’t perform as expected often exclude people who use assistive technologies, those who live in low bandwidth areas, and those who use older devices. A by-product of slow sites is that they often don’t meet accessibility guidelines because many elements that affect page speed also align with accessibility and sustainability issues.

3. Poor brand reputation

Frustrated users who expect a seamless browsing experience may deem a slow site unreliable and untrustworthy. Furthermore, 44% of users said they would tell a friend about a bad online experience.

Higher Web Hosting Costs  

Plus, the larger your pages, the more bandwidth is needed to transfer that data. Depending on your web host’s plan, you could pay more to support a slower website.

Reducing page size will speed up your site, lessen data transfer payloads, and may allow for a lower tier cost plan. 

Digital Marketing and SEO Implications

Slow-loading web pages can also impact your business and marketing goals:

• Organic search rankings: Google has long stressed that page speed is a ranking factor. Its Core Web Vitals evaluate and rank websites based on their speed, responsiveness, and visual stability. Page weight can also affect how quickly search engines crawl your site and display it in search results.
  
• Reduced conversion rates: Many studies have shown that reducing page load time measurably increases conversion rates. By providing a good user experience (see UX above), visitors are encouraged to engage or otherwise take action.

Common Web Performance Optimization Techniques

We’ve established that higher page load times translate to more resource consumption and affect user experience, search engine rankings, and hosting costs. Next, let’s delve into how WPO can mitigate these effects.

Here are some steps that marketers, designers, and developers can take to start improving web performance today.

Tasks for Marketers & Designers

Most digital marketing and design strategies are designed to produce more traffic, more engagement, and more conversions. However, tactics used to achieve marketing KPIs can be at odds with sustainability goals, including slowing down websites and increasing carbon emissions.

Below are several ways marketers and designers can mitigate these impacts.

1. Focus on quality vs. quantity

Reduce the amount of data tracked and stored by your campaigns. Measuring the results of marketing usually requires data collection, tracking, and targeting in advertisements, which is responsible for significant energy use in many digital products and services. The more data that is collected, the more requests are made from a user’s device to where the data is stored, increasing latency, slowing down websites, and consuming more energy.

Plus, without good data governance, a wide array of data inequality issues can arise as you create, track, and manage your campaigns.

It can also be beneficial to audit your organization’s data needs. Delete unused or outdated data as part of a good data disposal strategy. This helps organizations minimize storage needs and related carbon costs. Learn more about designing a sustainable data strategy for your organization.

2. Optimize media

Next, images or media files that aren’t optimized can increase page load time and significantly contribute to rising digital emissions. Begin by removing all unnecessary media or images. Each asset should provide value and support the purpose of the page it lives on. Also, compress and resize each for optimal delivery without significantly reducing quality.

Finally, use modern image formats like AVIF, WebP, or SVG, which were created to reduce file sizes. This can significantly speed up slow-loading pages.

3. Create lean user journeys

People want to accomplish tasks or find answers to questions as quickly as they can without interruptions or distractions. User research and customer journey mapping exercises can help create more meaningful interactions with customers while reducing steps and promoting more sustainable behaviors on your site. 

For example, ask how a customer might finish a six-step checkout process in four or less steps. Research whether you have answered the most commonly asked questions related to your topic.

In other words, if you’re creating detailed tutorials or how-to articles (like this one), include a list of frequently asked questions and answers at the end. This can help people quickly get the answers they need. Plus, it could also help your content show up in AI Overviews.

4. Improve SEO

Improving SEO helps people find relevant content more quickly. Plus, it goes hand in hand with improving both performance and environmental impact. 

Content that adheres to Google’s quality framework for evaluating credibility, reliability, and usefulness is likely to rank better. More importantly, the E-E-A-T framework—which stands for Experience, Expertise, Authoritativeness, and Trustworthiness—can also serve as useful criteria for good storytelling. Find more info on E-E-A-T in the link above.

Web Performance Optimization Tasks for Developers

There are also many techniques developers can use to improve performance. Here are just a few: 

1. Reduce data transfer and server requests

First, reduce both the amount of data and number of HTTP requests made by a page to improve speed and sustainability.

Here are some techniques to make files smaller and speed up page downloads to web browsers:

• Enable caching: Caching involves storing frequently accessed website data, such as images, scripts, and stylesheets, in a user’s browser. Subsequent requests for the same content can be served from the cache rather than fetching them again from the server, resulting in reduced load time.
• Organize code: Keep code files well-organized to reduce the number of times a server must be called. For instance, a single stylesheet typically works better than multiple inline styles. Also, reduce the amount of third-party code your site or application must rely on (see #3 below).
• Minify code: Next, minification is the process of removing unnecessary characters from code files without changing functionality. This offers significant performance enhancements because it reduces the size of a script file, leading to faster downloads and improved page load times.
• Image sprites: While this technique is not a common as it once was, by combining multiple images into a single file, sprites can reduce server requests. This is useful for page elements like icons. However, there are also trade-offs, including potential accessibility issues.
• Compression: Also, media assets such as text, images, and fonts can be compressed, making them smaller and faster for web browsers to download. Many hosting platforms, CDNs and reverse proxy servers either compress by default or allow you to easily configure them.
• Image optimization: Finally, compress images to the smallest possible file size without noticeable visual compression artifacts. Also, use modern image formats like Scalable Vector Graphics (SVG), WebP, or AVIF. 

2. Lazy loading

Lazy loading is a technique where only the visible portion of a web page is loaded initially, and additional content is loaded as the user scrolls down. This approach offers many benefits, including speeding up initial page load time, reducing initial page weight, and also improving system resource usage by reducing the amount of data that needs to be processed.

3. Reduce the impact of third-party services

Third-party services such as social share buttons, analytics scripts, and embedded chat, CRM, or AI-related services can significantly impact load performance. Limit the number of redundant third-party providers and try to load third-party code after your page has primarily finished loading.

For optimal performance, conduct a full analysis of your digital supply chain to better understand how the services you use might impact usability, accessibility, and other important aspects of your product or service.

This is especially relevant to tracking and reporting on Scope 3 emissions, which is required in some regions.

Also, be sure to revisit this at a relevant cadence, which brings us to our next point.

4. Test, Test, Test

Finally, implement a comprehensive audit and testing program. Regularly assess performance and make improvements over time.

The monthly reporting service we offer our clients serves precisely this purpose. While it varies from client to client, the basic process is as follows.

1. Establish baseline goals and KPIs and craft a plan for continuous improvement.
2. Audit based on those to define a master set of tasks.
3. Check off list items as time and resources allow.
4. Measure and provide insights in monthly reports to focus on continuous improvement.

Good Governance

It is important to keep in mind that improved efficiency can also lead to increased adoption and usage. While this can be good for business, it is vital to continuously monitor performance and optimize accordingly.

To achieve this, organizations should put tools, practices, and standards in place to help understand, track, manage, improve performance, and reduce carbon emissions. More importantly, enabling teams do their best work over time means regularly revisiting these practices.

Finally, responsible governance can also include adopting the core principles of Corporate Digital Responsibility so responsible digital practices exist throughout your organization.

1. Performance budgets

First, set performance budgets when creating or redesigning a website or other digital product. This will help you and your team prioritize clear performance goals during strategy, design, build, and optimize efforts. 

2. Digital resilience

Next, digital resilience ensures products and services are available when people need them most. To accomplish this, make the following items ongoing priorities.

• Security
• Privacy
• Accessibility
• Honesty and transparency
• Ongoing maintenance and governance

Moreover, train and adequately resource your team so they can manage this over time.

3. Website and content governance

Similarly, good website and content governance policies will help you manage your product with the same rigor that you manage organizational policies. In turn, this helps teams build capacity and better deliver on your promise. 

4. Metrics & measurement

Next, in an environment where you can measure everything, it can be tempting to do exactly that. Instead, focus on the metrics that matter for your organization, product, etc. Set a baseline that focuses on desired outcomes (not outputs), then measure performance over time to improve your efforts.

Assess Performance with Ecograder

Finally, our website sustainability tool, Ecograder, is designed to help you improve performance and the environmental impact of your website. Ecograder single page and domain reports provide detailed information about data transfer, performance, hosting, image optimization, and much more.

More importantly, you’ll receive a list of specific actions you can take to begin making improvements right away. 

Frequently Asked Questions About Web Performance Optimization and Sustainability

Improving Performance is Good for People and the Planet

Optimized efficiency is inherent to all sustainability frameworks including sustainable web design principles. Understanding the entire lifecycle of a digital product or service’s impact is key to maintaining good performance and reducing emissions over time.

Taking the time to prioritize web performance provides many business benefits and ways to create shared value, not the least of which are supporting happier customers and a cleaner environment.  

Begin with the techniques and resources above. We also have many additional digital strategy and sustainability resources on our site if you’d like to learn more. Need help optimizing your site for sustainability, usability, and performance? Contact us. We’d be happy to help.