http://www.joomlatools.com @joomlatools The journey of a html page The world wide web is build to be sustainable, here is how. 

No content

How the web works … Let’s start with the beginning. 

HTTP, the communication protocol 

1 https://www.climateaction.tech/blog/letsgreentheweb-together/ The URL, referring to a speci fi c fi le on the server 

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 

also email client From server to client … 80% of the websites HTTP caching ‘should’ happen here 

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 

A HTTP conversation Initial request Next request Cache for 120 secs Use the page in cache 

4 For more history: https://climateaction.tech/blog/letsgreentheweb-together/ No caching 

4 For more history: https://climateaction.tech/ Time to retrieve the fi rst byte from server average time 300 ms 

HTML, the markup language 

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/ 

No content

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. 

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 

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 

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. 

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 

No content

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. 

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 For more history: https://web.dev/image-cdns/ automatically generate images content delivery network 

12 For more history: https://web.dev/serve-responsive-images/ load different images sizes based on the device screen size use responsive images 

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 

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 

13 For more history: https://climateaction.tech/blog/letsgreentheweb-together/ use a CDN cache Use local browser cache 

No content

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! 

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. 

A case study, joomlatools.com 

https://www.joomlatools.com/blog/developer/sustainable-web-design 

Johan Janssens
 Joomla Co-Founder / Former Lead Developer http://about.me/johanjanssens @johanjanssens johanjanssens johanjanssens 

More Info http://twitter.com/joomlatools http://github.com/joomlatools http://facebook.com/joomlatools http://developer.joomlatools.com