Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sustainable Webdesign - The journey of a html page

Sustainable Webdesign - The journey of a html page

CAT (https://climateaction.tech/​) member and co-founder of Joomla Johan Janssens highlights some of the biggest issues around sustainability on the web. He outlines how the web works and how solutions around caching and image optimisation can vastly improve web sustainability.

Video: https://www.youtube.com/watch?v=e-_rO3CDL5Y

Johan Janssens

February 25, 2021

More Decks by Johan Janssens

Other Decks in Technology


  1. http://www.joomlatools.com @joomlatools The journey of a html page The world

    wide web is build to be sustainable, here is how.
  2. 2 At the most basic level, whenever a browser needs

    a file that is hosted on a web server, the browser requests the file via HTTP using a URL. 
 When the request reaches the correct (hardware) web server, the (software) HTTP server accepts the request, finds the requested document, and sends it back to the browser, also through HTTP. 
 If the server doesn't find the requested document, it returns a 404 response instead. From: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_web_server Hypertext transfer protocol Uniform resource locator
  3. also email client From server to client … 80% of

    the websites HTTP caching ‘should’ happen here
  4. 3 A static web server, or stack, consists of a

    computer (hardware) with an HTTP server (software). We call it "static" because the server sends its hosted files as-is to your browser. A dynamic web server consists of a static web server plus extra software, most commonly an application server and a database. We call it "dynamic" because the application server updates the hosted files before sending content to your browser via the HTTP server 
 From: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_web_server For example Wordpress, Joomla, … Manually crafted html uploaded by FTP
  5. 5 The Hypertext Markup Language (HTML) is a simple markup

    language used to create hypertext documents that are platform independent. HTML documents are SGML documents with generic semantics that are appropriate for representing information from a wide range of domains. 
 HTML markup can represent hypertext news, mail, documentation, and hypermedia; menus of options; database query results; simple structured documents with in- lined graphics; and hypertext views of existing bodies of information. From: https://www.w3.org/MarkUp/html-spec/
  6. De fi ning the problem Improving web sustainability is as

    much a technical challenge a challenge in changing our habits how we create and consume information online.
  7. 8 For more history: https://www.lifewire.com/how-many-emails-are-sent-every-day-1171210 HTML weight Image weight 27KB

    948KB 45KB 2.5MB HTML Webpage HTML Email Lets not forget about emails … • More than half of the world population used email in 2019. • The number of worldwide email users is expected to grow to more than 4.3 billion by the end of 2023. • The total number of business and consumer emails sent and received per day exceeded 293 billion in 2019 and is forecast to grow to more than 347 billion by the end of 2023. • Email click rates increase by up to 42% if an image is included.
  8. 60% of all websites use a CMS, 40% of all

    the websites use Wordpress, that is 3 out of every 5 sites. 
 1. At least 60% of all the web pages are dynamically generated 
 2. At least 50% of all the web pages lack proper HTTP caching 9 For more history: https://w3techs.com/blog/entry/40_percent_of_the_web_uses_wordpress tested the top 5 systems
  9. De fi ning solution(s) If we can reduce the page

    weight by 30% and increase cached requests by 30% the web would become a whole lot more sustainable.
  10. WebP is a modern image format that provides superior lossless

    and lossy compression for images on the web. Using WebP , webmasters and web developers can create smaller, richer images that make the web faster. 
 WEBP (pronounced as “Weppy”) is an image format developed by Google. This format was designed to be used specifically on the web. WebP uses features of both lossy and lossless compression algorithms which greatly reduces the file size while retaining the quality of the original image. 
 WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25–34% smaller than comparable JPEG images at equivalent SSIM quality index. 10 For more history: https://web.dev/serve-images-webp/ Use a better image format
  11. 15 For more history: https://tools.keycdn.com/speed Use a CDN to reduce

    average time 50 ms Webpages are served close to the client requesting them
  12. How to “sell” sustainable web design The changes you made

    to make a website more sustainable, make it also faster, cheaper and more search engine optimised. It’s a win win!
  13. Less is more! Making the web more sustainable is an

    effort we can all participate in by thinking more about the content we create. Creating less articles, less newsletters, … less noise while generating more value.