Submitted on

Sustainable websites

Sustainable websites

Disclaimer: this post is a bit different. We take pride in not talking jargon to our clients - our aim is that no-one feels like they should be an IT nerd to be able to get a website that is absolute top-notch. However, that does not mean that we don't know our jargon or know the inside and out of creating these websites that indeed exceed expectations - also in the field of ecological sustainability.

Nick wrote this post to showcase what we take into consideration when creating your resource-wise website - and to share the information with everyone else creating websites. We believe sustainable is the way websites need to be created in 2020's, and hope that this information will help some fellow developers out there to challenge themselves, too.

Let's dive into it!

We are exited to introduce you to Nick's Fast and Compressed check list for sustainable websites. It is available for you in order to help you make more ethical and environmentally-conscious choices in the digital realm.

This list is part of Nick's upcoming book, "Digital Permaculture," which elaborates on the integration of permaculture ethics and principles with technology and digital practices.

Nick's Fast and Compressed list for sustainable websites

  • Don’t use videos, especially not on the front-page and don’t use auto-play. Auto-play sucks anyway and every website that comes along with it gets banned for lifetime
  • Compress images as far as possible and use modern codecs that are supported by the browsers (non supported is kind of funky but sucks when you get mails that people can’t see your images)
  • Use lazy loading for images which are not in the First Contentful Paint.
  • Responsive images. Different image sizes according the browsers resolution
  • Compress js + css
  • Minify js, css, HTML
  • Optimize js
  • Optimize frontend used, more classes less ids, lean css
  • Use webfont formats like woff or woff2
  • Enable Gzip compression on your webserver
  • Usew http/2 for SSL
  • Long caching period for static content
  • Deliver static HTML where possible
  • If you want to go further
    • no loading of 3rd party plugins from remote
    • only static sites, no database in between
    • reduction of objects in the Document Object Model (DOM)
    • images dithering

Website size

  • < 400 KB = perfect
  • < 1 MB = good
  • < 4 MB = acceptable
  • > 4 MB = needs work
  • > 10 MB = unacceptable

You could also measure the loading time and set it in relation to the transferred amount of data. 

Feel free to get in touch with us regarding topics on the list. 

Tags
sustainability