 Hello World Camp Kochi and welcome to my talk how better performing websites can help save the planet. My name is Jack Lennox and this talk is being delivered remotely. My hope was that I would be able to do this live but unfortunately we've had some issues get in the way with the internet and so this is a pre-recorded version but rest assured that I only recorded this a few hours ago so you are seeing this almost live and I will be around afterwards to answer any questions you may have on Twitter and maybe in some other format we'll see how that works but I'll certainly be following along as this gets aired. So as you can probably tell this is going to be a talk about sustainability and the internet. This is what's at stake this is the the blue marble that we all live on and I'm going to introduce this by talking about how I came across this topic. This is a project known as Blackhole and this came about I think in 2007 was when it was first launched and it came off the back of the idea of how much power could Google save if it had a black background instead of a white background. There's quite a long story to it and there's some interesting data around how the newer types of screens that we're using these days actually use more power to produce black than produce white so it kind of applied more to CRT monitors and the older monitors that we used to have than it does now but there's a whole thing it's it's really worth checking out it's quite an interesting project. And then bringing us up to the present day or more or less the present day earlier this year a university in the UK carried out a study of YouTube and we're looking at design changes that YouTube could make that might cut the CO2 emissions of the platform and I'll talk about that a bit later on in this talk. A bit of a background about me I've been working as a kind of freelancer and then within agencies and then within startups from 2009 to 2013. Since 2013 I've been working at Automatic and I've been on the webpress.com VIP team since 2016 actually that data's wrong and I should have updated that but never mind. And then another really kind of strange thing that's become a part of my life is that I've become quite political and in 2017 I stood as a parliamentary candidate for the Green Party of England and Wales and actually as we speak I'm doing that again. So we have our general election which some of you may know about on the 12th of December and where I live I am our parliamentary candidate for whatever that's worth. So having seen projects like Blackhall I first became more involved in the idea of the sustainability of the internet at the Mozilla Festival which is an annual event which kind of rotates around it's actually been in London for quite a long time now but it the idea was that it would move around and I think it's due to move next year. It's a big open source festival and I attended it in 2017 and saw a talk by a guy called Chris Adams who has done a lot of fantastic work on internet sustainability and he held this session called how to build a planet-friendly web and it piqued my interest and I went along and heard a lot of the information some of which is now in this talk that I'm going to present to you and a lot of that's evolved as well since 2017 but I haven't really thought about the internet not being planet-friendly so it was a really kind of interesting thing for me to hear. The problem as you may have guessed is that the internet has an enormous carbon footprint. To give you an idea of how big there was a study as part of the Greenpeace click clean campaign which I'll talk about again throughout this talk in 2012 they estimated that the IT sector has the if it were a country it would be the third largest country on earth by its electricity consumption and this electricity consumption is rapidly growing. This was carried this was part of a study in the journal Nature carried out earlier this year and as you can see the internet is forecast to be using up to 21% of projected electricity demand by 2030 and you can see how that breaks down here it's quite scary and the reason this is bad is that the world's energy mix is not very clean basically we're producing a lot of carbon dioxide for the electricity that we use this is a fantastic project called the electricity map there's a link in the slides and I will share all these slides so don't worry about trying to follow along too closely but electricity map org they're gradually getting more and more data so you can see there are a few states within India that are now being tracked they sort of come on and off it depends if the API's are available and what information they can get but yeah this kind of gives you a sense of how we're not producing energy very cleanly some countries are doing quite well but lots of countries aren't doing so well including the UK I'm sad to say sometimes we're better because this is also live data so when the winds are blowing and a lot of our offshore wind is being active then our carbon intensity gets better the internet produces about 1 billion tons of CO2 every year and to put that into perspective that's about the same as global air travel which is quite bad and because of that energy mix that I just showed you the internet is the largest coal-fired machine on earth or it can be thought of at least in that way which is quite a scary thought. This was put into stark contrast by Mozilla again they didn't they do an annual internet health report and they did one in 2018 where they shone a particular light on this problem and one of the quotes in that article is that sustainability should be a bigger priority especially as the internet expands into new territory. Now as a world many of you will probably be aware of the work that's going on to try to deal with this big CO2 emission problem and the climate change that it's causing the Paris Agreement is the kind of the thing that everyone is now working together on or almost everyone it's that's been in place since 2015 there is one country that sadly is not currently involved in the Paris Agreement however the good news there is that there's a project called America's Pledge which I think is primarily led by Michael Bloomberg and this basically represents more than half of the US economy and population still keeping to the pledges of the Paris Agreement so that is still kind of being followed by almost every country and half of the country that more than half of the country that isn't currently involved. There are more closer to home there are other efforts going on within our industry specifically to try and sort this out so one of the best ones of the best campaigns that I'm aware of is the Greenpeace Click Clean campaign where they look at all of the big internet companies and hold them to account for their sustainability and you can download the 2017 report I believe there is a new one due to come out there wasn't one last year but there is a new one that they're working on at the moment but it's really good to look at the one from 2017 and all the work that's been going on since then. Poorly performing websites are bad for the environment I'm afraid to say and this gives you some idea of how this problem is getting worse so this is a graphic showing page bloat as you can see in 2011 the average web page was just under a megabyte and at the start of 2017 the average web page had grown to just over 3 megabytes and this graphic kind of breaks down what's going on there so you can see in 2011 the vast majority of the weight of a page was images there were some scripts as well mixed in with that and then everything else is really quite small you can see in 2017 images are taking up a lot more but also there's new contenders coming in that really didn't factor in 2011 like video and I think this unfortunately this graphic this data isn't being tracked in the same way so we can't actually look at exactly what it's like now and I'll explain that in a bit but I would imagine video in 2019 is an even bigger chunk a much bigger chunk than it was in 2017 but there's some other interesting things going on there so you can see a lot more JavaScript is coming down as well now as we download webpages so a projection that was made when this data was taken from the HTTP archive was that the average web page by last month would be about four megabytes the HTTP archive switch from using averages to me to median as a measure so we don't actually know for sure if that's the case but looking at the way the median has grown it probably is the average web page probably is now about four megabytes which is pretty big so coming back to that University of Bristol study that University in the UK that I was talking about they studied YouTube and they were looking at design changes that might reduce the energy usage of the website and therefore reduce its environmental impact and the paper you can actually go and read it if you like it's actually not too bad it's not too long and it's quite interesting to read through all of the things that they considered and how they came with came to the conclusions that they come to but the they focus on some very interesting ideas which I hadn't previously heard about and so the first one of those is sustainable human-computer interaction now sustainable human-computer interaction is where you design services that promote more sustainable behaviors so this is an example of a website which has actually recently been rebranded it was really it was called loco to it's a website for booking train services across Europe and one thing it does is it shows a carbon calculator as you're checking at the point that you're actually buying the ticket showing you how much co2 you're saving so this is like a design design factor which would hopefully promote more more sustainable behavior by making you realize that in the process of traveling by train you're saving co2 versus flying co2 emissions within the UK there's a website called well this is great Western Railway which is one of our railway operators and they have a similar thing although instead of using the European thing of comparing it to flying they show you how your co2 emissions compare to going by car so you can see there's that there and this is again this shci sustainable human-computer interaction idea there's an app called MoBike I didn't know if MoBike are in India yet but I know they're in I think it's a Chinese company they're in lots and lots of countries now and this is one of these bike renting apps and one thing I like about MoBike is that they show you how much carbon you've saved by taking bikes as this is from my my personal account and I just noticed this when I was using the app I quite like this and then there are other ways that this sustainable human-computer interaction can work so you can see on this website Untold which is a coffee roaster that at the point of check out you can potentially pay for a co2 neutral delivery now this does this kind of is an offset thing so there's still some complexity in the extent to which this is necessarily that good but it is at least promoting the more sustainable behavior like a better option potentially for people that are buying coffee but yeah there's ethical things about whether it's right to make this like something that people feel bad about make them pay for it I'm not saying this is a great way of doing it but it's an interesting idea so another idea that's hit upon within the paper is sustainable interaction design and this is where we actually change the way that our products are designed to make them use less energy so the thing that the paper highlighted was that if YouTube switched off video playback while watching music videos there's potentially quite a significant energy saving and therefore quite a big emission saving as well now many of you probably aware that one of the things that people use YouTube for now is just listening to music and most of the time when people are doing this the video is still playing and like no one's actually watching it and it doesn't need to be happening interesting the YouTube have actually packaged this in the premium service where you can turn off video playback so it's kind of strange because you pay money to get less but the paper was saying that this is something that YouTube should make standard because it would save potentially a lot of energy if you could just listen to things rather than have to have the video playing so this now comes to the niche that I'm interested in and what we're going to be talking about which is sustainable web design and the real point here like if I haven't made this clear already is that every byte transferred represents energy being consumed now if we want to try and understand how much energy is consumed by the data we're transferring there are various things we can look at one particular thing here which I find interesting is from the ACEE which is the American Council for an energy efficient economy they did a study in 2012 and the link is on this so if you want to look at this yourself that's you're very welcome to and this kind of shows you how much power goes into getting the bytes down the wire or over the wireless networks to your device and I'll cut a long story short this is how they break it down so it can vary a huge amount depending on how you're actually getting this data but this is a this is an average estimation so you can see almost half of the energy is the data center providing the content to you and then a significant chunk probably about a third is your just over a third sorry is your device that's kind of the thing you're using to download to view that data or watch the video or look at the images or whatever and then about just under 15 percent 14 percent that's the transportation that's all of the switches and relays and everything else that are in between you and the content you're getting from the data center and to cut a long story very short it basically comes down to about five kilowatt hours per gigabyte so that's about five watt hours per megabyte now let's do some math let's kind of work out what this actually means so an unnamed VIP client one of our clients I was working on their homepage takes about 10 megabytes to download which is pretty big as you know from earlier that's more than double the average and so I thought it'd be interesting to work out roughly how much co2 is produced by working out how much power it takes us to get that bit of content to us so this is just loading the uncashed homepage now unfortunately Kerala is not currently on the electricity map but the neighboring state of Kanataka is so I've taken their carbon intensity which is actually pretty good it varies quite a lot I've noticed from looking at electricity map that there's a lot of solar energy in Kanataka and so that means that when it's sunny obviously the carbon that you know the energy production is quite low carbon but it it changes overnight when it gets dark for obvious reasons so anyway the point is 255 grams of carbon dioxide are produced for every kilowatt hour of energy that comes out of Kanataka at this particular moment in time which was 545 a.m. I think that's UTC anyway doesn't matter so let's do some maths so the way we can do this we can first work out how many grams of co2 are produced per watts because we're not talking about kilowatts when we're looking at webpages it's you know as I said it was a watts per megabyte so we divide 255 by a thousand which gives us 0.255 grams per watt as we know it takes 5 watts to sorry it's 5 watts per megabyte so that we know that there are 10 of those so that makes it 50 watts to get our 10 megabytes so we can now multiply our 50 by 0.255 which gives us 12.75 grams of co2 our 10 megabyte web page produces 12.75 grams of co2 each time it's loaded and I have added the caveat that that's when it's uncashed so on on repeated views it wouldn't be as much but to put this into perspective the American publishing industry estimates that producing a page of paper takes between four and five grams of co2 so loading this web page once is about the equivalent of two pages of paper that's a very simplistic example but it kind of shows that actually digital services have a much bigger carbon footprint than we might be thinking you know we have this whole thing there's obsession about like not printing things off and people put it in their signatures please don't print this email and all that kind of stuff but it's actually very interesting to realize that by sending say a 10 megabyte attachment on an email that's like two pieces of paper every time you do it in terms of co2 another interesting thing to think about here is that the average laptop uses about 30 watt hours so it'll get through 30 watts in an hour so given the owl page at downloading that one page once was 50 watts that's like an hour and a half more than an hour and a half of using the average laptop sustainable web design what what does it mean how can we think about it so I've kind of tried to create a model here of ways that I think we can apply this to the work that we do and so it's cutting digital waste improving user experience and using renewable energy so let's focus on that first one cutting digital waste what does this look like there's this really interesting idea called the rule of least power which I only came across relatively recently but it's something that Tim Berners-Lee has been talking about for quite a long time and it's one of the one of the ideas that the internet is kind of based on so computer science spent the last 40 years making languages which were as powerful as possible nowadays we have to appreciate the reasons for picking not the most powerful solution but the least powerful and this is one of the kind of guiding ideas behind html the idea behind html is that it's a really simple language which means it's really easy for devices to download it it's really quick to pass it's very easy for such engines to crawl it it's very easy for you know it's theoretically easy to make accessible because of the way it's semantic and the way it's laid out and obviously it's evolved to be better in all of those different ways but it's not a complicated language and it's not a complicated protocol at its basic level so a translation for how that what we can think of when we're doing our our work as web developers and people who work on the web is that we shouldn't use jQuery when we don't need to for example that's a load of extra weight and also we shouldn't use javascript and css will do we often see tricks that are in javascript for things like drop-down menus and there's ways of doing that now with css there's a really great website called you might not need jQuery.com I recommend checking that out as a starting point if you're not familiar with it and a translation of that translation is that we should be transmitting as few bytes as possible in any way that we can so obviously there are extremes to which you can take this and i'm going to talk about that as this talk goes on but there's loads of different ways which i'm going to highlight that we can put this into practice for example we can simplify the user interface do we really need background videos social media embeds or carousels and i've picked on these three things because these are three things that various studies have shown users don't generally like background videos are generally you know most users would rather a site just loads quicker than there's some fancy background video playing social media embeds there's been various studies of websites that found that by removing the social media links from their articles their articles were actually shared more often on social media and so people generally don't like those buttons that people feel they need to stuff everywhere and then carousels there's a website called should i use the carousel.com i won't give away the answer but check it out it's quite funny we also then want to be focusing on reducing code so we want to be creating lean html we want to be avoiding divitus and unsemantic stuff you know all these extra elements that don't need to be there try to cut that down as much as possible keep it as clean as possible and obviously each individual element is not necessarily that big but if you're building a plug-in that has a gallery or something in there are loads of ways that that's going to get multiplied and multiplied and multiplied and so we it's it does matter to try to keep these things as lean and clean as possible and the same applies to simplifying our css there are obviously all these fantastic css preprocessor languages that we use now things like sass but we have to bear in mind that things like sass produce css which is can get quite messy sass has got better and better at this but there are still things to be thinking about when you're nesting and you know keeping your sass relatively sane if you're using sass and looking at what css actually gets produced and then finally using less scripts and there's loads of ways that can that can go on obviously not using javascript if you don't need to but also thinking about sorry i'll stay on the slide also thinking about the services that you enqueue and if you're using a library for something you know and then you're loading it on every page when maybe it's only needed on one page or all sorts of things that we can be thinking about with that so this is a quote that i really like from a guy in the uk called hayden pickering the most performant accessible and easily maintainable feature of a website is the one that you don't make in the first place and i would add sustainable to that list of things as well another concept which we can look at with some of our code is something called tree shaking there's a particularly a good way of doing this with css there's a tool called purge css and this will actually check if you have unused css on your website there are also coverage tools now within chrome and i won't go into them in this talk but if you look up google chrome coverage it will show you where you have unused javascript and css on your pages this article is fantastic there's a link to it by sarah diane talking about how she removed 250 kilobytes of css with this tool with with purge css what's particularly amazing about that is that her original css bundle was 259 kilobytes and she dropped that down to nine kilobytes with this tool it's pretty amazing as i'm talking about using last script which i was saying earlier things like the twitter follow button uh people you might not think about this but this button weighs 50 kilobytes and a plain sex link uses almost zero bytes and again to put this into perspective in 1969 when nasa managed to get a man on the moon they had about 50 kilobytes of data storage to play with and in 2019 that gets you a twitter follow me button images i won't go into too much detail there's lots of great talks on webpress.tv about this use the correct image compress images as much as possible and lazy load them if any of these things are not things you're familiar with if you just google you're going to find all sorts of information about what you could be doing here again with fonts i won't go into detail but we should be sub-setting our fonts for the characters we need we should be sparing in how many fonts we load preferably maybe maximum three preferably two preferably one sometimes zero you could just go with the system fonts um and serve them only in the waf2 format if possible and it's important to realize that webpress has been pretty good here for example the wp admin dashboard no longer uses any um fonts that need loading it just uses system fonts uh and it's pretty cool if there's a there's some good uh there's a good post about the process that led to them doing that which i think is is great back and stuff again i won't go into detail these are kind of googleable things but use https over http to h sorry http to um use engine x with fast cgi cache if that sounds really technical and you don't know like that requires server level access there are plugins like wp supercache which you can use on pretty much any hosting i'd highly recommend checking those out and again look at gzip and brotli compression some hosts enable these by default but not all hosts do and it's worth looking into whether your host does or not all of this is covered in a lot more detail in a fantastic tool called web performance 101 by a guy called Ivan akulov i'd highly recommend checking this out it's like a it's a talk as a website that you can just scroll through it's really nice next we want to be focusing on improving user experience now the thing is this is kind of all the things that we already talk about and there's probably going to be oh i think there are other talks at this work camp that are going to be covering these subjects so search engine optimization and accessibility first mentality and following rest practices in theory all of these things play into making our websites more sustainable and the reason for that is that when people have to waste time looking around your website because it's hard to use then they're wasting energy like every extra page load that doesn't need to happen is a page load we should be trying to prevent so improving user experience saves energy alongside all the other things which are great about improving user experience so making websites accessible and following best practices mean that people are going to get to the content quicker so finally using renewable energy this is the third idea well the third concept i think is really important with sustainable web design so this is the green web foundation which is probably the best directory of green web hosts that you're going to find it's not brilliant and it's great for finding certain things but for example i was trying to see if there were any indian green web hosting companies and there are two listed on the green web foundation website but neither of them seem to be active maybe they were active at some point but they're not anymore unfortunately so i'm there may well be that that doesn't mean there aren't any green web posts in india and i have had a look and i'm so far been unsuccessful but there may well be some so i'm not saying there aren't any but in the absence of a green web post in india a really great article i recommend checking out is this how to build a low-tech website by low-tech magazine this is an amazing website that is hosted on a raspberry pi on a balcony in the spanish city of Barcelona and there's a solar panel on the battery that keep the web keep the site online it's a fascinating read there's all sorts of other really amazing techniques that they've used to make the sites as sustainable as possible and to make the images as small in size as possible there's this old fashion dithering technique they've used which kind of looks like those old games from like the 1990s and the 80s actually as well but yeah definitely check this out it's really cool coming away from sort of local web hosts within the WordPress space dream host is one of the hosts that is listed on the green web foundation's directory and they have a load of information on their website about how they provide green hosting and the offsetting they do it's not all coming from renewable energy but yeah they explain it it's really worth checking it out on the kind of enterprise level if you do want to be doing big enterprise stuff Google is the best company in terms of their sustainability credentials I have other ethical issues for Google so I'm not saying they're a fantastic company at everything they do but certainly from a sustainability perspective they are pretty good and Alphabet the parent company of Google is actually the largest corporate buyer of renewable energy on the planet which is pretty cool so putting this into practice and taking it to an extreme I know I'm actually slightly running over so I'm going to go through this as quickly as possible I have a little project which I highly recommend everyone checks out I took this really far I went with no images no sidebar no embeds no menu navigation and almost no additional HTTP requests this project is called Sustee WP and it's www.susteewp.com I took underscores the base theme that was produced by automatic and has kind of become a standard for building themes for WordPress and I basically just removed almost all of it and made it as lightweight as I possibly could and this was what I ended up with so you can see we end up with with the compression that's on the site we end up with about three kilobytes of effectively html two and a half kilobytes of css and five hundred and eighty eight bytes which is the svg that are all kind of speech bubble with the leaf inside it so it's six kilobytes of transfer and thirteen point eight kilobytes uncompressed so that's gzip and broccoli which are compressing those assets as they come to you wherever you are this does pretty well this is the google lighthouse tool for auditing to see how performant your site is and as you can see it does very well on all of these things there is actually an accessibility issue with the menu because the menu loads on its own page so I know that's not actually perfect and that is something I've been meaning to fix which I haven't done yet I'm quite bad at just making a project and then abandoning it but I haven't abandoned this I just need to come back and do some more work on it it also does very well on web page test this is another tool you can use for seeing how your site's performing I'm guessing a lot of people will be familiar with this but as you can see it's a straight a's on this one as well and you can see you get a time to first byte of point one six one seconds which is pretty fast for time to first byte you rarely get sites that are much quicker than that so in summary it's 93 lines of html two and a half kilobytes of css three requests per page the css and the svg logo zero kilobytes of javascript and 0.01 grams of co2 per page view to get an idea of how your sites are performing there are some other tools you can use I highly recommend ecograder this has a whole lot of information and is produced by an american agency called mighty bites um which is yeah they're a great company highly recommend checking them out and check out this tool another new tool on the block is website carbon which is produced by an agency in the uk called whole grain digital you can type your url in and it will give you some fun stats about how much co2 your website is producing and then coming back to that coffee roaster I mentioned at the beginning there's a service called cloverly and they do carbon offsets on demand this is kind of a separate thing but if you are thinking of building some of those things into your services if you are delivering products for example and you maybe want to have people offsetting the carbon of the delivery this is something you could maybe look at it's quite interesting in the real world people always say to me oh well you know um yeah these examples are great but like I've worked for my boss and you know there's there's no way we can actually do this like it's all great in theory but there's no way this can actually be applied to the work I do well I would counter that with webperf.xyz which is this great article performance leaderboard um I highly recommend checking out the website they show you a whole bunch of top publishing companies and how fast their fastest articles are at loading and therefore kind of implied in that is how few kilobytes they're using so I took the top example from thought company so the thought company this article which has images it has all sorts of you know all bells and whistles of a typical website and this page loads in 201 kilobytes now when you compare that to the 10 megabits I was talking about at the start that's pretty impressive 0.2 megabytes gov.uk this is the big um it's an enormous website a network of websites that the British government have um it's they've one of the good things that has happened in the in UK politics uh in the last sort of 10 years or so is that a lot of money was spent on the government digital services program which employed lots of very good web developers and web people to do lots of work and make basically completely overhaul all of our services that you can do online long story short the homepage for gov.uk only that only takes 417 kilobytes to download whole grain digital the company that make website carbon they've recently renovated their website and it loads in about 213 kilobytes this is Justin Tadlock's exhale theme Justin Tadlock is obviously a legend in WordPress theming and he's been really focusing on performance recently um and this new theme the demo homepage is 423 kilobytes there's images and everything else in it low-tech magazine that example i showed you there's might sound quite big at 435 kilobytes but if you check out that page it's actually there's like loads of images and all sorts of other content in there so to fit all of that into just under half a megabyte is quite impressive and this is one of my favorite examples this global warning website this was put together for the 10k apart 10k apart challenge where you have to fit as much as you can into a 10 kilobyte project um it's just 11 kilobytes which considering that that's only just under double like basically my project but does way more there's like animations there's all sorts going on with this it's really exciting and i recommend checking it out there's a link in the stuff at the end in conclusion we need to set performance budgets i would say that 500 kilobytes per page is a good starting point if you can't quite keep to that that's that's fine but we shouldn't be producing home pages that take 10 megabytes we should be adopting the rule of least power and most importantly no one will care about the websites if we're all fighting over water this is a serious issue and we should take it seriously everyone should sign this petition this is for the sustainable servers by 2024 this is being run by the industry highly recommend reading about it there's a link at the bottom everyone should sign the sustainable web manifesto there's a great conference that's all about this so if this really interests you it's going to be going on next year this is actually quite an old screenshot but yeah sustainable ux i spoke at the one that happened this year that in february of this year it's going to be going on again next year and i highly recommend uh that people get signed up if this is of interest to them there's a great slack community um and a community of people that care about these issues at climateaction dot tech and in conclusion sustainable websites are more performant more user friendly more accessible more server friendly and more planet friendly we're hiring if you go to wpvip.com slash careers if you want to come and work for us i think i actually have closed the thing down i've probably just completely murdered uh your language and i'm really sorry but this should say thank you very much and i hope it does but uh if there are any questions i'm available on twitter and you can also email me jack at automatic.com and i think that's all that's my oh this is my bibliography yeah so if these slides will be available and you can download all of the stuff that i talk about from these links um this is where this will stop i may now be live in the room in some way answering questions or i may not and i'm sorry i've run over slightly thank you very much i hope you have a fantastic word camp and i hope to see as many of you as possible in person at some time in the future thank you