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

Transcript

1. http://www.joomlatools.com @joomlatools The journey of a html page The world wide web is build to be sustainable, here is how.
3. How the web works … Let’s start with the beginning.
4. HTTP, the communication protocol
5. 1 https://www.climateaction.tech/blog/letsgreentheweb-together/ The URL, referring to a speci fi c fi le on the server
6. 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
7. also email client From server to client … 80% of the websites HTTP caching ‘should’ happen here
8. 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
9. A HTTP conversation Initial request Next request Cache for 120 secs Use the page in cache
10. 4 For more history: https://climateaction.tech/blog/letsgreentheweb-together/ No caching
11. 4 For more history: https://climateaction.tech/ Time to retrieve the fi rst byte from server average time 300 ms
12. HTML, the markup language
13. 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/
15. 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.
16. 6 For more history: https://httparchive.org/reports/state-of-the-web#bytesTotal The average webpage size is 2MB and has increased 5x since 2010
17. 7 For more history: https://httparchive.org/reports/state-of-images A webpage consists for 50% out of images for a total of nearly 1mb average
18. 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.
19. 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
21. 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.
22. 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
23. 11 For more history: https://web.dev/image-cdns/ automatically generate images content delivery network
24. 12 For more history: https://web.dev/serve-responsive-images/ load different images sizes based on the device screen size use responsive images
25. 14 For more history: https://web.dev/browser-level-image-lazy-loading/ Load only those images that are visible and likely to become visible when scrolling
26. 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
27. 13 For more history: https://climateaction.tech/blog/letsgreentheweb-together/ use a CDN cache Use local browser cache
29. 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!
30. 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.
31. A case study, joomlatools.com
32. https://www.joomlatools.com/blog/developer/sustainable-web-design
33. Johan Janssens
 Joomla Co-Founder / Former Lead Developer http://about.me/johanjanssens @johanjanssens johanjanssens johanjanssens
34. More Info http://twitter.com/joomlatools http://github.com/joomlatools http://facebook.com/joomlatools http://developer.joomlatools.com