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.
   

   View Slide

2. View Slide

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

   View Slide

4. HTTP, the communication protocol
   

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. HTML, the markup language
    

    View Slide

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/
    

    View Slide

14. View Slide

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.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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.
    
    
    

    View Slide

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
    

    View Slide

20. View Slide

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.
    

    View Slide

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
    

    View Slide

23. 11
    For more history: https://web.dev/image-cdns/
    automatically
    generate images
    content delivery
    network
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

28. View Slide

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!
    

    View Slide

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.
    

    View Slide

31. A case study, joomlatools.com
    

    View Slide

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

    View Slide

33. Johan Janssens

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

    View Slide

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

    View Slide