What's a low-carbon website?
Posted on:
I am a big advocate for low-carbon web development. Not only to address the environmental impact the web has on the planet, but also to make a positive impact on the user experience.
If the Internet was a country, it would be the 4th largest polluter.
If you’re worried that sustainability might limit your design options, don't be. Focusing on sustainability can actually lead to a cleaner, more focused design and a stronger brand identity. Here are some practical tips to create a more sustainable website without compromising on design quality.
Design with intent
Websites tend to use a lot of visuals that do not necessarily add value to the user experience or the brand identity. It is crucial to strategically place images and videos where they truly enhance your content and brand. By doing this you will also benefit from a cleaner design, better readability and an overall better user experience.
- Use strong typography, colors and vector illustrations to convey your brand identity
- Add images and videos where they truly enhance the content and not just for decoration
Optimize your assets
Naturally, you want your images and videos to be as sharp as possible. However, high-resolution media can greatly increase a website's carbon footprint. To mitigate this, it's crucial to choose the appropriate image format: use .svg for vector images and .webp for raster images, and ensure your video files are compressed.
- Optimize file size and resolution based on device size. You can easily achieve this by using the
<img>tag with the srcset attribute. - Make sure that videos from platforms like YouTube or Vimeo only load when they become visible on the screen. There is no need to load video content if it's not being watched.
- Avoid autoplay for videos, especially those with sound, as it can result in unnecessary data usage and may distract some visitors.
Leverage the modern web
The latest CSS features make it possible to create websites that exceed the designs achievable with Figma or Sketch while being faster to load. It might be a good time to abandon heavy frameworks and libraries in favor of a bespoke CSS theme.
- Use Figma or Sketch for initial design drafts, but expand your design possibilities with code.
- Abandon heavy libraries and utilize new CSS properties.
Load only what's needed
Many sites execute all JavaScript on every page, which is unnecessary and can slow down the site. By loading scripts only when a component is visible, you can improve load times and reduce client-side calculations, potentially saving your visitors' battery life. For example, mobile navigation is only needed on mobile devices, so load the necessary JavaScript only when the mobile navigation is visible.
- Split your javascript into modules and only load them on the components that need it.
- Do you really need all that third-party javascript?
Green Hosting
Green hosting refers to web hosting services that use renewable energy sources to power their data centers. These hosts invest in wind, solar, or other renewable energy projects, or they purchase renewable energy certificates (RECs) to offset their carbon emissions.
- Reduced Carbon Footprint: By using renewable energy, green hosting significantly reduces the carbon emissions associated with running a website.
- Support for Renewable Energy: Choosing green hosting supports the renewable energy industry, promoting further investment and development in sustainable energy sources.
- Positive Branding: Demonstrates a commitment to sustainability, which can enhance your brand's reputation among environmentally-conscious consumers.
Conclusion
Creating a low-carbon website starts with making mindful choices about how you display your content. Carefully selecting images and videos, optimizing your CSS and JavaScript, and choosing a green hosting provider are just a few of the many ways you can make a positive impact on the environment.
Even if you currently have a performant website, it's always beneficial to make a conscious effort to make it more sustainable.
Tagged with:
More posts:
- Previous: Which CMS is right for me?