Design & Frontend

Description

Search Engine Optimization (SEO) is a key activity in the process of improving online visibility and attracting organic traffic via search engines.

What's the impact?

Incorporating SEO best practices leads to small improvements which, when spread across all visitors to the site, can accumulate to a meaningful impact. In addition to being best practice and an important capability in modern digital marketing, enabling users to find the information they need more directly via the search function reduces the traffic and energy consumed by users looking for information in several, often incorrect, places.

Description

For long pages or media carousels, it's often more efficient to load additional content only when the user shows intent to see them.

What's the impact?

On-demand loading helps to reduce the initial page/app loads size and network utilization for content which may not be required for the user. Playing media on load which the user has not requested can create a poor user experience, in addition to wasting energy. We strongly prefer only playing media when users have specifically requested it.

Description

A mobile-first approach is a design and development methodology where the design considerations begin with mobile-centric use-cases and expands to include larger devices and resolutions. It encourages designers and developers to consider how a holistic web experience can serve the widest audience of users and devices.

What's the impact?

Mobile-first acknowledges the global shift from desktop users to mobile users over the last decade, and in doing so, accommodates the specific device and experiential needs of these users. Not only has the battery, connectivity and processing limitations of mobile devices acted as a forcing-function for designers and developers to incorporate bandwidth and energy efficiency into their approach—but it has also forced device manufactures, search-engines and app marketplaces to prioritize and reward these efficient experiences over their legacy counterparts.

Description

Modern image formats, such as WebP and AVIF, often result in higher-quality and smaller file-sizes when compared to older formats like JPEG.

What's the impact?

Better compressed images will use less storage capacity and have a reduced network load when served. Browser support of image media has historically been a challenging topic for developers and creators alike. Recent modernization has seen the creation and adoption of file formats that are better suited for mobile devices which should be adopted where possible. In recent years, CDNs and similar distribution platforms have been used to optimize and serve the formats most suitable for the end-user's device—taking the guess-work out for developers.

Description

Using modern font formats can make a huge difference. One key tool to accomplish this is WOFF2. The second integration of 'The Web Open Font Format,' it greatly improves on compression rate of font data compared to the previous version and other legacy font formats. Its broad browser support makes it the de-facto format for fonts on the web.

What's the impact?

As fonts are one of the largest assets to load on a web page, the correct choice of font format can lead a significant improvement of page performance and reductions in network utilization. The WOFF2 font file format was designed specifically for the web—prioritizing high-compression and fast processing—making it the preferred choice for fonts on the web.

Learn more

Read more about WOFF on MDN.

Description

Mindfully considering the language or framework you use can have major impacts on page weight. For example, JavaScript currently accounts for a significant portion of overall page weight for modern apps and sites—so it should be used selectively.

What's the impact?

Optimizing JavaScript can help lower the storage and bytes transferred over the network, which in turn reduces the power usage of client devices. Not only is this good for reduced energy usage but it can help the user experience of the end-consumer.

Description

Including battery usage analysis in the design, build and test of mobile applications is key for enabling better visibility and control.

What's the impact?

Users will notice if an app is draining the battery, and most modern operating systems will report excess battery usage. Whilst unoptimized battery usage will frustrate users, it also has an environmental impact as it will necessitate more frequent charging and reduces the overall life of the battery. There are techniques and tools to measure battery analysis and this measurement should form one of the quality metrics when developing mobile applications.

Description

Product teams (POs, designers and engineers) working in tandem can set helpful performance budgets, benchmarks and limits for app/page load-times and sizes.

What's the impact?

By considering app/page load-times in early planning, it makes it easier to adopt sustainable and responsible technologies and processes into the design, build and maintenance of these apps/pages. Through awareness and monitoring of files sizes and load times we can build not only more sustainable but also highly performant applications.

Description

Service Workers are a modern JavaScript feature for the creation of Progressive Web Apps (PWA) and offline functionality.

What's the impact?

Principally, Service Workers allows for more specific localized caching of the resources needed to run web applications. This reduces overall network usage and the energy required to do so.

Learn more

Read more about Service Worker API on MDN.

Description

Considering sustainable and responsible platform providers is a great first step to a greener web. Switching to smaller, domain-specific component and service providers can offer an energy-efficient approach.

What's the impact?

If the existing software architecture allows, exploring providers such as Contentful or Contentstack for CMS may result in a low carbon footprint, energy-efficient approach.

Description

Third-party CSS frameworks have become commonplace for the benefits they provide in rapid development, especially for product teams without robust product design capabilities.

What's the impact?

There are many advantages to using CSS frameworks, however when a product reaches maturity, developers should consider opportunities to reduce the deployment of dead-code from CSS frameworks. CSS frameworks do not enjoy the same 'tree shaking' (removal of dead code) benefit found with JavaScript build tools or transpilers, resulting in the deployment of large code-bases with mixed utilization. Whilst this affords developers the freedom to utilize those features in the future, it comes at the added cost of page weight. There are techniques for dead-code removal for CSS, but they are not as robust or mainstream as other parts of web development.

Description

GIFs are sometimes assumed to have a smaller carbon footprint than video files, leading to advice to replace videos with animated GIFs. On the contrary, GIFs use a simple and dated compression strategy dependent on static images which often leads to very large assets.

What's the impact?

Recent modernization has seen the creation and adoption of file formats that are better suited for mobile devices. GIFs can have very large file sizes. Modern video formats, such as VP8/VP9 and H.264/H.265 offer higher resolutions and a smaller size than an equivalent GIF. Similarly, consumer devices are starting to incorporate hardware features for decoding these formats, improving overall performance and energy usage.