All of these approaches have similar end goals but use different tools and techniques to reach them. They all require consideration about what type of content is actually necessary, taking steps towards media austerity, and taking responsibility for the content we produce and consume.
Overall page size is the main determining factor that contributes to a power hungry website. A number of designers recommend starting with a target page size and designing with that target in mind.
Below is an overview of various power consuming aspects of a website along with some approaches that various designers have applied. In some cases there is a lot of overlap between elements based on how designers articulated their processes.
- Interactive Design
Interactive design that involved dynamic web pages is typically more computationally intensive than static content.
- Logos
Logos are considered to be a huge source of waste, because they are typically placed on every single page of a site. Designers can cut down on their usage, design for a hyper optimized aesthetic, or use pure CSS and HTML elements to create a logo.
- Icons
Icons can be optimized through the use of pure CSS and HTML design, rather than images or external libraries. There are a number of existing examples such as http://nicolasgallagher.com/pure-css-gui-icons/.
- Fonts
Web safe fonts or default fonts already exist one a user’s computer and don’t require transmitting or storing font data. Is there an functional difference between a default font and a web safe font?
- Automation, animation, and autoplay
Rather than presenting users with an animated image library, like a carousel, automatically displaying images, or autoplaying motion content, designers can give the user the option to open up an image or play an animation. This way heavy graphics that may be considered crucial can be used when the specific user actually needs them, rather than serving them to all users regardless of the demand.
- Tracking and ads
Tracking users and ad services greatly add to the carbon footprint of any web service. 3rd party ads in particular are hard to keep light weight. This issue was thoroughly explored in
- Content Management System (CMS)
Without taking proactive steps, many CMSs can include a lot of junk that can add to a websites bloat. Kirby is a system that can be configured to be very light and Susty is a WordPress theme that is very minimal.
- Static vs Dynamic
Dynamic pages are also opportunities for cutting down bloat, because each page requires at least some amount of processing on the backend. A number of designers mentioned that they develop a project as if it will be dynamic, using industry standard CMS tool and then use one of a number of services that will automate the process of turning dynamic pages in to static pages.
- Hardware Impacts
This aspect is harder to quantify, but it is important for designers to consider the demands that software places on the hardware. One consideration is designing software that maximizes an piece of hardware’s life span by not depending on cutting edge features.
- Backend
There are a variety of techniques for optimizing backend content, such as combining JS files and optimizing ram through less use of variables.
- Caching
Some designers have used interesting energy optimizing approaches for cacheing data so that it follows logical user paths.