menu
close
.jpg)
Practical tips for designers and developers on how to drive Web Sustainability by adapting Green Code.
At Annevo, we prioritize green coding and web sustainability when developing solutions for our customers. It's not just about earning badges or attributions; it's about consistently working to reshape our entire perspective on digital consumption.
These tips and processes can be directly applied to your work as a designer or developer, to get started with sustainable web practices. Created by senior full stack developer Filip Åstrand, who is an expert in the area of green code and web sustainability.
The internet consumes approximately the same amount of electricity each year as the entire UK, and its usage is continuously rising. As professional developers and designers, we should take responsibility for reducing power usage on the web.
But what exactly consumes all this power? It primarily falls into four categories: the CPU (main processor), GPU (graphics processor), networking components (Wi-Fi and cellular radio chips), and screens. The equation is simple: higher performance often means lower power efficiency, leading to a high consumption of energy.
One general effective strategy to reduce power consumption is to minimize the time spent in high-power states.
Some solutions may seem like easy wins and quick fixes but could falter due to poor processes. Others may be more challenging to embrace and integrate into your project, requiring a visionary approach for successful implementation.
Good design not only makes websites easier and more enjoyable to use but also helps users find what they want more quickly. An effective way to incorporate sustainability early in the design process is to consider wireframing or rapid prototyping using paper and other "offline" tools, which can significantly reduce energy consumption.
To enhance your brainstorming approach, consider perspectives beyond just the human-centered. Think ecologically as well. Take into account the needs of the planet and the ecological costs involved.
Furthermore, make the lightweight option your new default. Whether it’s downloading, streaming, saving, printing, or accessing resources, always default to the most lightweight choice available. This not only improves efficiency but also reduces the digital footprint.
Attractive websites are appealing, but is extensive decoration necessary? Opting for a clean design can reduce rendering demands. Use decorative elements sparingly, and consider optional rendering features that are disabled by default to streamline the user experience.
Effective navigation is crucial for guiding users through a website. It's important to have a well-structured information architecture. Ensure your links are properly marked up and include an accessible navigation menu with search capabilities to enhance usability.
A clear sitemap not only aids users but also helps search engines better index your content. Always make sure new content and services are prominently displayed.
In managing user interaction, remember that time is valuable! Present information only when it's relevant and avoid distracting visitors or unnecessarily prolonging their visit. Allow actionable information, such as popups, to be initiated by the user rather than automatically. Steer clear of infinite scrolling and other techniques designed to keep users' attention longer than necessary. These strategies respect users' time and contribute to a more efficient and user-friendly browsing experience.
Effective SEO enables users to quickly find what they need, reducing energy consumption by minimizing page visits. Prioritize SEO from the start to boost content visibility. Additionally, honoring the client’s Save-Data request header and serving resources that decrease data usage will not only respect users’ data plans but also optimize the overall efficiency and sustainability of your application.
Design systems prevent the need to reinvent existing tools and reduce wasted time by promoting consistent interfaces that adhere to web standards, which in turn requires less energy and resources. These systems are typically highly optimized.
Using recognized design patterns helps visitors easily identify and navigate content. Focus on implementing clean design in familiar locations to boost user efficiency and familiarity. This approach not only streamlines the user experience but also conserves resources by leveraging common patterns that users already understand.
Minimizing animations is crucial as they can be processing-intensive and potentially decrease accessibility. Use animation sparingly and allow visitors to control animated content to avoid overwhelming them. For web assets, offer alternative formats for media, images, and documents. For instance, provide content in HTML alongside proprietary formats like PDFs and include alternate text for images and text transcripts for audio and video to enhance accessibility.
Notifications should be used judiciously—only send essential communications and allow users to control their notification settings and opt-out options.
When considering images, assess whether they add real value or convey essential information. Consider smaller images or different formats like vector graphics or CSS, and give users the option to adjust display sizes or hide images.
Audio and video elements should be carefully evaluated. Disable autoplay, reduce their length, and compress files to maintain quality while minimizing size. Videos consume significant processing power and user data, so offer multiple resolutions and set lower ones as default. Avoid embedding player plugins and provide comprehensive media information, including deactivation options.
Fonts can significantly impact load times, with some weighing up to 250kB per variation. Opt for modern formats like WOFF/WOFF2 which offer better compression than TTF/OFT/SVG. Consider subsetting fonts, using variable fonts, or system fonts to minimize load times and boost user experience.
Minification is key in optimizing web performance. By removing unnecessary whitespace, which holds no value, you can significantly reduce file sizes. Additionally, code-splitting allows for modularizing code so that it can be loaded on demand, in isolation. This approach ensures that users only download the code they need when they need it.
Respecting user preferences not only improves user experience, but also reduces emissions. Utilizing CSS preference queries can make a significant difference. For example, employing prefers-color-scheme allows users with OLED displays to benefit from dark mode, which is more energy-efficient. Similarly, using prefers-reduced-motion helps reduce the impact on CPU/GPU by minimizing animations.
Additionally, honoring the client's Save-Data request header can significantly decrease data usage, optimizing the overall efficiency and sustainability of your application.
Approximately 65% of internet pages are accessed via mobile devices, highlighting the importance of adopting a mobile-first approach in app development. Starting with mobile and then scaling up to larger interfaces proves to be more effective. By employing progressive enhancement and responsive web design, you can ensure that your solution functions seamlessly across all devices. This strategy not only optimizes user experience but also enhances accessibility, making your app universally adaptable.
To enhance web performance, it's essential to optimize and compress resources. Caching significantly reduces the need to constantly reload resources from the server. For Content Management Systems (CMS), enabling on-the-fly server-side caching using plugins can be very effective. Additionally, utilizing file-type cache with HTTP headers like expires, bfcache, or cache-control helps manage cached data efficiently. Progressive Web Applications (PWAs) offer offline support, allowing them to cache and serve files locally.
Compression algorithms, such as Brotli or GZIP, shrink the files transferred over the network, improving load times. Media should be compressed before uploading to a server or CMS, and using the most efficient file formats, like WebP instead of JPEG, further optimizes performance. Tools like TinyPNG and ShortPixel can assist in compressing images, ensuring minimal file sizes without sacrificing quality.
JavaScript can lead to high CPU load during rendering, increasing emissions. To mitigate this, remove unused packages from package.json and favor native APIs over open-source libraries. Investigate whether standalone modules can be used instead of entire libraries, and always check package sizes with tools like Bundlephobia to ensure efficiency. By managing your dependencies effectively, you can reduce the environmental impact of your web projects.
For developers focused on sustainability, selecting the right hosting provider is key. Choose those who maximize equipment use, recycle efficiently, and use renewable energy, offsetting emissions with Renewable Energy Credits (RECs). Monitor hosting efficiency with indicators like PUE, WUE, and CUE.
Streamline your development environment by decommissioning unnecessary setups and using the latest server technologies. Minimize server load with client-side and server-side caching, sending data only when necessary, and implementing asynchronous processing. Use sustainable CDNs and servers geographically close to your users for better performance.
Opt for on-demand cloud solutions like AWS Lambdas, Azure Functions, or Google Cloud Functions to reduce constant server use. Use autoscaling to match resource use with actual demand, and regularly clean up data storage to avoid waste. Remove redundant data, set expiration dates for retention, optimize log management, and compress downloadable assets to enhance performance and sustainability.
To improve power efficiency on web pages, it’s crucial to manage resource usage based on user interaction levels. Power should be actively used only when the user interacts with the page. Once interaction ceases, quickly return the page to an idle state to conserve energy. When the page is active but not being interacted with, minimize power consumption by removing timers and avoiding continuous animations.
Use CSS for animations and WebSockets for maintaining network connections without frequent polling. Ensure zero CPU usage when the page is inactive, such as when users switch tabs, the browser window is minimized, or the page is not in focus. In WebKit browsers, requestAnimationFrame is halted, CSS and SVG animations are suspended and timers are throttled when a tab/window loses focus.
On macOS, utilize features like App Nap to further reduce power usage.
Utilize the Page Visibility API to manage power consumption based on the visibility of the page. Reduce background activities and handle blur events to minimize wake-ups and CPU usage when the page does not have focus.
By adhering to these strategies, developers can create more energy-efficient websites that respond intelligently to user interactions and system contexts, thereby reducing the overall energy footprint of their web applications.
To optimize web performance and energy usage, ensure images are loaded correctly using CSS or HTML to avoid extra layout work. Accelerated Mobile Pages (AMP) decrease page load time on mobile devices and are prioritized in Google’s mobile search results.
Reducing JavaScript can significantly improve page load times, so monitor script performance with tools like Safari's CPU timeline and be mindful of third-party libraries. Painting, heavily influenced by scripts and CSS animations, can tax both CPU and GPU, so use visualization tools to manage what gets painted and minimize impactful animations.
For mobile devices, efficient networking is crucial due to the strain on batteries from wireless connectivity. Optimize this by utilizing browser caching, grouping network requests, and monitoring with tools like Safari's Network Request Timeline. Additionally, blocking unnecessary bot traffic can save bandwidth and processing resources, enhancing site performance and user experience.
In conclusion, adopting sustainable practices in web design and development is crucial for reducing the digital footprint. By embracing green code, optimizing resources, and considering the ecological impact, we can create more efficient and environmentally friendly digital projects. Let's make conscious choices in our designs, prioritize lightweight options, streamline user experiences, and manage dependencies wisely to build a greener web for the future.
%20(1).jpg)
can't get enough?
.svg)
.svg)
.svg)
.svg)
