Building sustainable websites without compromise

At Zifera, we offer a tool to analyse, optimise and compensate for the CO2 emissions of your website. We strongly believe that optimising or reducing your carbon footprint is the most important step companies should take to reduce their emissions.

Our website

We did our very best to make our website, www.zifera.io, as sustainable as possible. For example, our home page emits only 0.04g of CO2 per visit, which is 91% less CO2 than average. Our code is 100% efficient, meaning we are not wasting any data by having unoptimized images, unused javascript or unused CSS. Interested in testing your own web page? Try our free carbon test. The test gives you a short summary of how a page performs. For a full website scan and detailed tips on how to improve, try the full Zifera app 14 days for free. The fewer data that needs to be transferred on each page visit, the less CO2 is emitted.

No compromises

We are using the following guidelines to keep our page size to an absolute minimum.

Fonts

We try to use system fonts wherever possible. These are fonts that are already included on your device and this means there's no need to download fonts from our server or a third-party service like Google Fonts. Whenever we want to use a font, we make sure to only load the sizes we are actually using and make sure our designs don't have a lot of different font weights.

Vectors instead of images

We have a no-bitmap image policy for our website. Which means we only use SVG vector images. Vector images are created from geometric shapes and mathematical statements. This means they scale endlessly (no pixelated images if you make them larger or smaller) and are about 85% smaller than a PNG. We know it's not viable for every company to only use SVGs. If you have to use rasterized images, make sure you use the best compression method at your disposal. The best compression method currently is AVIF, but it's not supported yet by Safari.

Another way to reduce data consumption is lazy loading images. This means images are only loaded when they are getting into your viewport when you scroll. Recent browsers support the lazy loading tag, which means this can be implemented very easily and there's no excuse for not using it!

Lazy loading of external scripts

External scripts can be data consuming. But there is a way to minimize their footprint. For example, we recently installed a chat widget on Zifera to help onboard new customers. The chat widget was loaded on every page load. We recreated the chat icon and made sure the script only loaded when someone clicks on the chat button. This saves about 430kb for every visitor that is not interested in chatting with us. Our full-page size on the home page is roughly 100kb, which means having the chat on every load (ignoring caching) would make our website use five times as much data.

Another example of being careful using third-party scripts was using Stripe's new pricing table feature. A simple pricing table was loading over 100kb of javascript on our website, doubling our size of 100kb to about 200kb. Oops, seems wasteful for something you can create yourself. We inspected the widget and saw it made a call to a JSON file to load all the settings. We recreated the pricing table using AlpineJS (which we already use on Zifera) and our new pricing table now only uses a couple of kilobytes. Great!

Dark background

Websites with dark backgrounds use up to 20% less energy (depending on the technology your screen uses). That's why we decided to make our full website as dark as possible. It seems a bit scary at first. Most people associate sustainable websites with white and green colours. We have not investigated the impacts of having a dark-themed website but we feel best having a no-compromise approach to our product. Practice what you preach!

Note: using a dark website does not currently affect your score in our carbon test.

Serverless technology

All our products are built on "serverless" technology. The term itself is quite strange because servers are actually running. But the infrastructure is managed by your cloud provider (Google, AWS, Microsoft). The servers are shared and you only pay for what you use. This is a way to save cost, but also to reduce your footprint. When you rent a non-shared server, this means the server is always on and probably sitting idle most of the time. Having a computer sit idle is a waste of energy. Serverless computing means less idle time and therefore is better for the climate. There are some downsides, for example, it can take slightly longer for your service to respond (the serverless instance needs to be started up on a request of a web page, called cold start). However, technology is improving and cold starts are barely noticeable. This is a trade-off we are willing to make.

Need a hand reducing your website's footprint?

We'd be happy to help! You can use Zifera to get insights into how to improve the code of your website to reduce the footprint. We also send you a warning when a page is emitting more emissions than the month before. You can try Zifera for free for 14 days.

Having a sustainable website starts at the design phase. Are you working on a new website and want us to give feedback on your design? Feel free to contact us. It's best to tackle things early.

Want to build a new sustainable website using a no-compromise approach to sustainability? Contact us and we can help you design and code your climate-friendly website. Our websites uses 91% less energy than the average website. We'd love to build a similar website for you. Contact us at any time.