Eric Meyer 00:00
I don’t know about ruined; it would certainly ruin the experience of the web quite a bit. How we fix it is we make our sites smaller.
Gerry McGovern 00:07
Welcome to World Wide Waste, a podcast about how digital is killing the planet, and what to do about it. Eric Meyer is a passionate advocate of designing for humanity, of leaving no one behind when you create your design, of thinking deeply about how things work for everyone – not simply how beautiful they look. Since 1994, he has done pioneering work on HTML, CSS, and web standards. He has published many books, including Design for Real Life and Cascading Style Sheets: the Definitive Guide. With Jeffrey Zeldman, he founded An Event Apart. According to WHO, mobile traffic went up from 55% pre-coronavirus pandemic to 70% after the crisis hit. Yet the average web page has gone from about 400 kB to four megabytes in 10 years. A 2019 study by Backlinko found that the average time it takes to fully load a webpage is 10.3 seconds on desktop and 27.3 seconds on mobile. Have we ruined the web? And if so, how do we fix it?
I don’t know about ruined. We’ve certainly ruined the experience of the web quite a bit. Just from those numbers you quoted, it takes half a minute to load the average web page on a mobile device. And that’s probably on the average mobile device, never mind people who are in lower bandwidth settings, have less capable mobile devices, that sort of thing. How we fix it is we make our sites smaller. It sounds obvious and simple – and almost stupidly so – and yet that’s always been the answer. Right? People have been pointing this out for over the last decade; you have pointed it out, I know, and other people have pointed it out as well. Maciej Cegłowski of Pinboard has done talks about this, where sites have become bloated. In non-crisis times, where there’s a lot of bandwidth and you’re trying to load a news site to find out what the latest basketball scores were or the latest football scores were, people could kind of shrug it off, even though that wasn’t really the right thing to do. But now, this I think is throwing into sharp relief how much of a problem that can be that we have these bloated experiences.
It’s interesting. I was in a webinar with Cloudflare just recently and they said, in areas that have locked down – where there are shelter in place or stay at home orders – mobile traffic has actually dropped a little. Desktop traffic has gone up as a share, but the total amount of network traffic almost always goes up by anywhere from 10 to 50%, depending on the specific situation in a given urban area. This was not one of the cities that they talked about, but, as an example, Paris, the mobile traffic may have gone down, but the total network activity might be up 25%, which means there’s less bandwidth for everyone, which means that the bigger our pages are, the slower they’re going to be to load even on desktop. I mean, these desktop and mobile numbers that you talked about, those could actually get worse in this situation because people are at home and they’re using ‘desktop’ machines. I mean, a lot of that might just be streaming video, but streaming video takes up lots of bandwidth. It stresses the system. And so if we’re trying to deliver information, if we want to fix things for people, we need to be less stressful on the system by making your pages smaller. However you do that. If you have to go back and swap out all your images to be black and white for a while, if that’s the only thing that you can improve – I mean, I would guess there are other things that could be improved – that’s a place to start.
Gerry M 04:55
You know, you can imagine the sense of somebody – either a doctor in a ward in a hospital or else a mother at a bus stop or something – trying to figure this out under tremendous stress, and they’re waiting 20 seconds for a page to download.
Yeah. I would imagine that hospital system saw a lot of increased traffic from people because they’re providing information about COVID-19. People are looking for information about COVID-19. They’re probably going to look at their local hospital system, at least that’s how it goes where I live. I live in Cleveland, Ohio. We have three major hospital systems just in this city, which is probably a little unusual, but people are going to the Cleveland Clinic or Metro Health or University Hospital’s website depending on which hospital they usually go to to find out what are the symptoms. My kid has a fever, does that mean they have COVID-19? I have a cough, what are the other symptoms to see if I just I have a cough because I usually get a cough in the spring or, right, do I have this? And national health systems – the same kind of situation I’m sure for the NHS in the United Kingdom – had a huge spike in traffic. The WHO probably saw some, the CDC – the Centers for Disease Control and Prevention here in the United States. Instead of people who are in the field, instead of just epidemiologists, visiting the CDC, suddenly it’s everybody trying to find out what’s the latest news.
What can I learn and, yeah, sometimes under very stressful circumstances, I mean, there are a lot of people – I can speak only to America because, living here, I know the numbers better, but I’m sure this is the case in other countries as well – who their only access to the internet is mobile. They don’t have any sort of what we would maybe call landline communication. They don’t have broadband to the desktop in their home. They have a smartphone, right? Because they were able to get a smartphone through a two-year plan where they didn’t have to pay for it upfront. That’s literally their only internet access. And most of the people in that situation are impoverished in some way; you know, economically they don’t have the resources that a lot of people do. So that, in this situation, could literally be their lifeline. Right? Because my 83-year-old grandparent or my adult parents live with us and one of them is starting to show symptoms, I need to get information, and the libraries are closed here. There are no internet cafes. Those are closed too. You can’t go somewhere to get broadband. You have your Samsung Galaxy or Google Pixel or whatever that you got through your mobile provider, and that’s it. The cellular network is just as stressed as every other network. And so the that 27.3 second average load time could be 60, 90 seconds.
Gerry M 08:32
Even though people know it’s not a good thing, there’s this incredible force, whether invisible or otherwise, that is driving the web to get bigger and bigger and bigger and bloated and bloated and bloated. What is this invisible force, do you think, Eric?
I think it’s competition, to a large degree, because the more eye-catching or interactive or unusual you can make your website, the greater chance you can catch the attention of consumers and hopefully turn them into customers. I think in the commercial space, that’s a lot of it. We’re now very suddenly in a phase where cooperation is much more important than competition, and it will be interesting to see if that has any effect. I mean, my hypothesis could be completely off the mark. Maybe we’ll see a shift, but I think that’s been a lot of it. And I think the other half of it has been the same invisible force that keeps most of us from exercising as much as we should and eating more than we should, just laziness. In fact, I mean, it’s easier to do things with the least amount of effort, right? So when you’ve been told in order to catch eyes, we need that big splashy hero image, we need a big design, you create that image but maybe you don’t spend 20 minutes searching for every possible way to optimize that image down to the absolute minimum size that it could possibly be. You save it, and you’re like, ‘Eh, bandwidth, they’ll wait an extra second or half second, it’s not that big a deal.’ Or we’ve set things up so that images are lazy loaded, so that they’ll get the content but the image will fill in later and that’s good enough. We don’t have to spend a bunch of time optimizing it down. And some of the toolchain, some of the tools that people use are not optimized for the most efficient possible code in the most efficient possible markup and CSS and whatever. They are for developer convenience, not for user convenience.
Jeremy Keith has gone on about this too at An Event Apart – and I say ‘gone on about this’; that might sound a little pejorative. I’m not dismissing him at all. He’s been absolutely right that developer convenience should never take priority over user convenience. His point has been that if your tool is making your life easier, but your user’s life more difficult – and that includes through having a bloated site that takes them longer to download – then you should not be doing that. You should be figuring out how to make the inconvenience on your end, and not your user’s end. But I feel like those are kind of the two things that are happening. It’s because when things are good, when you’re in what now looks like, looking back, the golden years – we wouldn’t maybe have said that at the time. But, you know, even two months ago, could we go back to them, those sort of easy years and those easy times? It’s easy to say, ‘It’ll all work out. I don’t want to think about this that hard. I don’t have to think about this that hard.’ And now we’re in a very different time, and unfortunately all of that technical debt, that convenience debt that accumulated is still with us, and it will take a lot of work to overcome that. And I don’t know that everyone will do it, which is the sad part.
Gerry M 12:44
Maybe there’s all these wonderful stats that we’re not coming across, but when you actually see a lot of these e-commerce studies that I analyze, it indicates that the speed of the experience is a critical factor in the purchasing decision process. The slower the site, the less you’ll sell. I agree with your hypothesis; they think the eye candy is what will sell more, but the evidence in a lot of places is that a fast, really well optimized site – not that it has no images, but really good optimized product images, absolutely, and stuff like that. But that sometimes you think that they’re thinking that something will really improve things that actually dis-improving things. Maybe they grew up with a 70s mindset, with big billboards, and we brought that mindset to the web, and we think these huge, big, catchy attention things actually sell. And I’m sure they do in certain places. But I think there’s a lot of other evidence that says, when actually, if you don’t get the speed right, if you don’t get that fast download experience, you’re going to lose a lot of customers.
Yeah. Well, I’m going to bring in something that you’ve talked about, Gerry, which is institutional ego. If it doesn’t look good, how can we feel good about ourselves? And if we don’t feel good about ourselves, how will our customers feel good about it? Amazon has made it their mission to be as fast as they can be, and it’s obviously done very well for them. But the next person who wants to be Amazon can’t look like Amazon, so they have to look like something else. And I think the ego comes in. We are egotistical creatures almost by definition. And so it’s got to be the – you know, fast is good, but really, really awesome, great looking, that becomes as important. It becomes a question of, ‘Am I proud of, are we proud of what we have created?’ And the pride gets invested in things like ‘Is it an amazing user design experience?’ and not investing pride in ‘We shaved 20 milliseconds off of our average load time this week.’ Which sounds like nothing, right? And yet, if you do that every week, 20 milliseconds here, 20 milliseconds there, pretty soon you’re talking about real time saved.
Gerry M 15:46
Yeah. No, I think you’re right there. And I think a lot of organizations think they’re building a Ferrari, but really they’re building a tractor. To the customer, it looks and feels like a tractor, but they think they’ve built a Ferrari. If you had a Ferrari that, when you put the foot to the pedal, its maximum speed was 30 miles an hour, you wouldn’t be very impressed by it. But that’s the experience of a lot of sites. Okay, let’s maybe move on or expand from that. One of the things – I mean, this was a kind of a road to Damascus moment for me – and maybe this sounds incredibly stupid, but it was about a year or 18 months ago that I had this dawning realization that everything in digital consumes energy, and that energy creates pollution. I knew there was a problem with webpages and etc but I never thought that actually these sorts of issues were actually a contributor to global warming.
I used to think, ‘This global warming is a big thing, and I’m really lucky that I work in the web industry and in digital, because, if everyone became digital, we wouldn’t have a global warming problem.’ That was the way I approached the world, in the sense that I just had this feeling that digital was inherently green. And then the more I started doing calculations – I did calculations around the web pages, that if you have an average of a 4 megabit page, downloading that page 600,000 times essentially creates about 10 kg of CO2. And an average tree can absorb about 10 kgs of CO2 a year. So if you wanted to deal with the pollution of your pages, so to speak, you’d have to plant one tree for every 600,000 times that page has been downloaded in the process. I analyzed it’s about 2 trillion Google searches a year, and that would be the equivalent to deal with the pollution that that caused – even though they’re very, very optimized, Google’s data centers, etc – it’s still the equivalent of having to plant 19 million trees.
Gerry M 18:47
And e-commerce returns, right? E-commerce returns in the US alone takes 200,000 trees. Now, I’m not saying planting trees. It takes 200,000 trees worth of cardboard every year. And to deal with the whole e-commerce return environment, which is three times bigger than traditional returns – you know, walking into a Macy’s or whatever – well, you need to plant over a billion trees.
Yeah, it’s been interesting to see the tradeoff that happened. Because I think your first instinct was not 100% misplaced. I’m not in any way disputing your numbers. I’m shocked but not surprised, I think is the phrase, that it’s so much energy consumption and therefore, how much you would need to offset. In some ways, digital does have that promise of reducing pollution. We’ve seen this a lot with the lockdowns, right, taking cars off the road, the commutes that you see in the United States or elsewhere. Just reducing the amount of driving that people do, reducing the amount of industrial output has had huge beneficial effects on things like carbon output. Now, we don’t have a world that’s structured to do this permanently, like long term, right? That would take a lot more than then one pandemic, to put us permanently in this state. The thing is that hopefully once there’s a vaccine or once this is behind us – let’s think optimistically here – in six months or 12 months or 18 months or 24 months or what it takes, it’s not as though we’ll be permanently in this state. We’ll then go back to what we were doing before, which is all of the sort of pollution and CO2 output that isn’t happening while we’re all in lockdown will happen again. And digital will still be contributing to that problem.
I mean, the less energy we can consume, the better. It’s a little weird, as the thing I’ve been trying to teach my children – which sometimes they get and sometimes they don’t, which I understand because sometimes I get it and sometimes I don’t – is that the electricity doesn’t come from nowhere. Something had to produce it. And thus far, our energy production infrastructure has a lot of output, has a lot of secondary effects which are negative. If we could somehow wave a magic wand and have all of our energy, all of our electricity produced by wind, solar and other ‘renewable’ resources, we’d be in a much better place – although you do have to factor in the pollution outputs in producing all of those solar panels and those wind turbines and tidal generators and things like that. But over the long term, it becomes an investment that’s worth making. I think it will be very useful to present to people in terms of, ‘If your website is this size, and you get this many downloads in a year, this is how many trees you would have to plant just to offset the CO2.’
Never mind whatever other secondary effects there are from your particular electricity generation – if it’s coal plants, then all the coal dust that comes out. Hopefully that’s not the case for most people, although, I don’t know that; you probably know way better than I do. I am a proponent of nuclear energy for the most part, because it has effectively no pollutive effects – except, of course, for all the radioactive material that you have to figure out where to put. Now, there are ways around it somewhat; this isn’t the place to talk about all that. But I’ve been a proponent for years because it’s a damn sight better than most of our electricity production. And if it helps get us from carbon intensive to non-carbon-intensive, I’m largely in favor. I know there will be people listening who will not be happy with me having that position, but sometimes you don’t have good choices; you just have to pick the least bad choices.
Gerry M 24:03
Yeah. I mean, it’s a different debate, but I think there’s a logic and rationality at play in that debate. And as you said to your children, electricity doesn’t come from nowhere. Of course we see the maps of the smog clearing and stuff like that. And so digital has this capacity. But I did an analysis of video conferencing, and so, absolutely, you run a video conference between two people, and, in the equivalent of driving, that’s like driving a couple hundred yards. You’d create as much pollution in driving a couple hundred yards as in running a one-hour video conference. However, what happens is, yeah, if it’s standard video, but then if you go to high-definition video, well, you’ve multiplied it by three, but still it’s from a very low factor. So it’s still much, much better. But then what about if you stored a video? Okay, really if you store it for years and then etc.
Well suppose now there’s eight people on the call, because it’s just easier to join a meeting, and there’s only two in the traditional meeting, let’s say. I’ve often seen that happen. I’ve seen virtual meetings with 50 or 100 people, often working with larger organizations in the process. And then supposing you’re in a room and you decide to have two huge big screens, 60-inch Samsung screens or whatever you want for, for projecting the faces. All of a sudden, what was a tiny fractional thing begins to just get a little bit bigger and a little bit bigger and a little bit bigger. And while it’s still better, all of a sudden you have a lot more activity and then you have a ton more meetings and then, in a hidden way, digital begins to start building up from being a very good scenario to being less good of a scenario. And it always seems to happen in digital, we do more – you know, we do more, we store it and we never get rid of it. So we’ve got gigabytes of meetings, multiple terabytes of meetings, and nobody’s looked at them in a year or two years and they’re still being stored in the cloud. So there’s behaviors, I think, if we could do this right, digital – absolutely. But we always overdo it, don’t we, you know?
Yeah. Unfortunately, yes. We do, we always overdo. Without overdoing, I guess sometimes you can’t really learn, but at the same time I think we learn the wrong lessons. We learn how to do this thing more efficiently for us, and it becomes less efficient for the system. We don’t really talk about it. You’re starting to talk about it, which I think is fantastic. And I think a few people have made the point here and there over the years that hey, you know, this all costs something in electricity or whatever. Yeah, we don’t really talk about what are the data downsides, what are the consequences – not consequences in the sense of justice system consequences, just what are the consequences? Sometimes consequences are positive. Sometimes you do a thing and it multiplies in a good way. And sometimes you do a thing and there are negative second-order effects.
Gerry M 28:18
You know, humans just make me despair and they amaze me in equal quantities. Sometimes I think, ‘Oh, we never change.’ And then I think, ‘Well, over generations we do. In one way we’re not adaptable at all. Another way, we’re quite adaptable.’ So I think the way we approach our physical world, how we’re sorting our waste, how we’re becoming more conscious of organic food, all this sort of stuff, I think that consciousness has risen a lot. And if we could bring the same consciousness, the same sense, into digital, and I just want to give you an example. I asked you to listen to three audio files of the same recording before the session and you said you didn’t hear any difference, essentially. And I’ve asked a load of people to do this, and 99 out of 100 have said they didn’t hear any difference.
So, two of them are identical. So file A and B were identical. So identical in the sense of they were created in WAV format, and I edited them in WAV format, and then I saved them to an MP3. So it was identical, right? The third one was created in MP3, was edited in MP3, and was saved in MP3. Now, an audiophile would be having palpitations, a minor heart attack at the moment, and they’d be saying, ‘You can’t edit in MP3. Don’t you know WAV is a lossless format and that MP3 is compressed?’ and you know. Yeah, I know all that. I’ve been involved in this sort of stuff for a long time, and I know all that and I believe that. But then I said, let me do an experiment. Because I started reading – the philosophy I’ve tried to adapt or tried to build into my brain is, ‘What’s the lightest option to get the job done?’ You know, what’s the lightest option to get the job done? So I know if you were creating a song where you’ve got 60 tracks with all sorts of instruments, yeah, MP3 would be terrible for that because it clips and does all sorts of messy things.
But if you’re just doing podcasting, you’re doing pretty basic editing. You’re not doing much sophisticated stuff. And there’s typically two voices or more. So I decided to just do it in MP3. And most everyone I’ve shown it to has said, ‘I don’t hear a difference.’ So what does that mean? Well, it means that I can start recording in MP3, which means my file will be 10 times smaller – you know, instead of 150 megabytes or whatever, it would be 15 or whatever it would be. And that’ll have all sorts of small roll on effects in where I store it etc, in the processes. I think, could we get that sort of thinking that can we go for the lightest? Okay, this is more perfect, but sometimes nobody can hear perfect. Or our we’ve got an 8K screen. Yeah, but nobody can see the difference in an 8K and a 4K screen. Why are we doing this?
Yeah. So here’s actually a question. I don’t know if you’ve looked at this, is there a notable difference in the amount of CPU activity that has to happen when you’re recording MP3 on the fly versus recording to WAV on the fly?
Gerry M 31:56
Well, that’s a good – I actually hadn’t dug into that. Because you’d assume that if the processor has to handle 150 megabytes, rather than handling 15, you’d assume there’s less stress on the processor. But, you know, these are the – I don’t know the answer, and maybe not right, but aren’t these important questions we began to ask about, you know, is there a more energy efficient way? We say, ‘Oh, close the window, don’t let the heat out.’ We never say the equivalent of that in digital, like, ‘I wonder, could we, you know, how could we design–‘. Toyota did an amazing thing with their website. They created this orb, this light based orb about 12 inches in diameter. It looks like a UFO. And they connected it up to their web metrics. But the web metrics connected with page download speed. So they set a target that all their pages across their 26 European sites or whatever number of sites that they’ve got needed to all download an average in three seconds, or however number of seconds. And once that target was met, the orb would be white. But if something happened in Latvia, Germany or Italy and the server went down, or it really slowed, and the orb would begin to change color until it would become red.
What that did is it changed the whole conversation within the HQ about speed. People would be coming up to the manager and saying to her – they gave the orb a name; they call him Frank or something like that. ‘Frank’s getting a bit red. I wonder what’s happening?’ So she had been for 10 years banging the table about speed and couldn’t get any people to take her seriously or really listen to her, but when she started visualizing this thing that people could see, ‘Oh, it’s getting red,’ you know? If we could somehow say, ‘Do you really need WAV? You’re doing podcasting. Well, you know, 99% of podcasts you can’t really hear the difference if you edit in MP3. Why not go MP3 and say go MP3 save a tree?’ I don’t know.
That was a little bit better in Irish.
Gerry M 34:32
I know. It’s us that can’t pronounce our -ths and stuff like that. But can we as designers begin to think about designing for energy, and designing for – I’m still struggling and scraping at this; I don’t know if it sounds crazy, but is there a road we can build or model where we can develop a digital environmental consciousness.
Yeah, I mean, I would love to see it. I don’t the answer your question. I think it’s possible. I’m not sure I know how to get there. But I would love to see it if there’s a tool vendors could be convinced to build – a Frank, effectively – into their interface, so that it warns you when your project files are starting to build up past a certain point or – I’m kind of making stuff up as I go here. But yeah, having that awareness .We talk about the weight of a page and it usually just means, ‘How many bytes is it?’ But the energy weight – yeah, I’m not sure. How much does the – not just the serving of a page, but the creation of it and all that, how much does that consume? What is the consumption level of this: creating this page and then serving it over and over again, over a network? I feel like it would be relatively easy to add this sort of thing to corporate internet presence dashboards, whatever you want to call them.
I think Etsy, maybe it was Pinboard – but anyway, the places you’ve probably seen where people put up a status board on the wall of the open office that shows this is our average download speed in America, this is our average download speed in Europe and in Australia, and so on and so forth, so that everyone can see in big numbers ‘Our average speed is now 3.9 seconds, and we want it lower.’ Especially with the kind of research you’re doing, it should be easy to at least make a rough estimate – to say, you know what, we’ve served – because, doing the background, okay, so our page is this, we served up this many bytes – like literally just, ‘This is how many bytes we served.’ And so we’re going to multiply all that together and up on the status board, it’s going to say, ‘We served a small deciduous forest worth of offset planting.’
Gerry M 37:33
Yeah. I mean, that great.
Or put it on a map. That’s like, you know, ‘We would have to convert this much land around the headquarters, the office building where we’re sitting, into nothing but forest in order to have offset what we’ve done for the year.’ Maybe that’s not the right visualization, but you know where I’m going with it.
Gerry M 37:57
Absolutely, and this is the thinking that we need. So just in relation to – I mean, you’ve got such a breadth of knowledge in so many areas, but you’re kind of the Zen master or whatever in the whole CSS space. Is there anything in there that you think – is there any way, any approach that you think in the area that you are a master of that you could envisage somehow – because I’ve no depth in this, but I see that from what I read or whatever that CSS has bloated as well in many – not the stuff that you create, but that in so many other areas. Is there any way that somehow an environmental consciousness could come into CSS – and maybe that’s mad or crazy? Any sort of triggers there that somehow could nudge good behavior or something?
That’s a tough one. To me, at a first thought, I would have to reflect on this more deeply. And honestly, I would need to get a better handle on where the energy sinks are around CSS. As an example, in my free time over the past few months, I’ve been picking at a redesign. And I wrote it as just one CSS file for the whole site, even though parts of the site don’t use major portions of that CSS file. I was doing that in the development phase, and then what I did – actually, right around the time lockdown started happening – was I had gotten to the point where I took a chunk of it, and I had moved it to a separate file that would only be loaded by pages that needed it. So if you hit the site on the homepage, maybe it would load two or three style sheets. But if you hit one of the sub pages that didn’t need these styles that I moved to a separate file, then you would just have to download sort of like the core style sheet, which is an approach people use now for developer convenience to try to keep track of, ‘Okay, where are the styles? If I need to edit the blog portion of the styles for the blog portion of the site, then I go to this style sheet because it’s only loaded when you hit blog pages’, or, ‘If I need to update the video pages, I’m going to put all the video styles into just that stylesheet that only gets loaded by those pages.’
And with local caching that can work out really well, because browsers will typically download that page, that CSS file, once and then they won’t have to download it again; they can they can grab it locally. But you know, did I consume a lot of energy during my development in making the browser constantly have to parse the entire stylesheet again, and again and again? Someone would say, ‘Come on, that was milliwatts per reload,’ but milliwatts add up.
Gerry M 41:37
Well, if we’ve got 1.7 billion websites out there, and growing. But put it this way – well, the example you’ve given is you’ve been doing this either subconsciously before I asked you this question. You’ve separated that. Whatever logic drove you, it was also an environmentally friendly logic, because let’s say the compiled page takes 10 of energy – 10 units of energy. Let’s not talk about milliwatts per hour or whatever. And cutting it up into 10 pieces and sectioning it off when they need it, well, when you’ve got to that sub page, it’s taking one. So you’ve saved nine. Now it might be nine milli-milli-milli-millis, but it’s still nine. If you’ve only got 10 visitors, yeah, it wasn’t worth the effort. But if you scale that thinking and you’re talking about millions of pages, and WHO is dealing with millions of visitors a day at the moment – and maybe they’re a bad example, but there’s many websites where there’s huge volumes happening. If we could get that culture of thinking of just not throwing the kitchen sink at it when you just need the teaspoon.
Yeah, absolutely. And it would be interesting to know – see, this is where this balancing has to come in. And I don’t know what the balance is, I don’t think anybody does. Okay, so I have a style sheet that a serving of it to a user takes up 10 energy. And even if I just split it into two pieces, so it’s each one takes five – which, when I split the stylesheet I was working on, it was roughly in half – the processor demands on the browser, because browsers do a lot of work. It’s not all on the server and the network requirements, the transferring data from place to place to place – how does that all balance out? I don’t know, maybe there are situations where keeping it all in a single stylesheet is actually a small net win because it gets loaded once and it takes this many packets on the network, and then it’s locally cached. And then there are others where splitting it up into two pieces or 10 pieces or whatever is much more of a win. That’s what I would struggle to keep track of in my head. That’s where we kind of need tools to be able to do a little analysis and say, ‘Hey, if you split this file into two, given how much each file would be used, you would save two units of energy.’ You might say, ‘Oh, that’s only 20%.’ 20% is pretty good.
Some of the other things that I that I’ve been thinking about, one of the reasons I haven’t launched this design publicly, is that in order to make some of the visual effects I did some pretty heavy duty layered backgrounds where I was interleaving images with gradients, with other gradients, with sort of masks that are gradients but they don’t create visual gradients. I’m pretty sure that mobile devices will struggle with those. I haven’t tested it, because the site’s not public. But one of the things I was thinking I needed to do right after I split the stylesheet was to figure out ways to make those less processor intensive, so they won’t drain as much battery on a Google Pixel or an iPhone SE that somebody’s hanging on to for the last few years, so the battery’s a little wonky because they’ve had it for three or four years and mobile device batteries, for some reason, just get wonky after a few years – which is a whole other area of waste that I’m not happy about, but moving on. This this idea of, ‘Okay, I need to make this more user friendly.’ And I wasn’t thinking of it from the perspective of ‘I need to reduce my carbon emissions’ – although, as you say, I probably should have been. I was just thinking from the perspective of, ‘I don’t want my page to be shaving 1% off of somebody’s battery every time they hit a page.’ Ten pages, I’ve taken 10% off their battery. That to me is just not acceptable. Even looking at it from a user, I hate it when sites do that to my phone, so I don’t want to do that to somebody else’s phone.
I did a lot of image optimization. That was my first stop. Because I had pages that were in development were like a meg and a half, and I had a lot of PNG files in there. I think they’re all PNGs just about. And so I took those, first I ran them through ImageOptim, which is a pretty common tool people use to optimize images. First of all, when you throw a PNG at ImageOptim, it slams my processors – like, four of my processor cores just go to 100%. And it takes – it can be 30 or 60 seconds before ImageOptim figures out even one PNG. And it usually will save about 10% of the image size, which is nice. But then I took those same images – the originals – into Acorn, which is an image editor kind of like Photoshop, but it’s an independent company that does it, and I’ve really enjoyed it. But I took the images into there, and I did the ‘save for web’ function. Where in Acorn – and I’m sure other tools do this as well, but I know Acorn so I’m going to talk about it – there’s a slider for the bit depth of your PNG and it starts at like 2 to the 64th or something, right – like every possible color that could possibly be rendered in long integer values is represented. But then I started dragging the slider down until I got to the point where it started dithering the images – got a speckled pattern. And that might be like 8-bit bit depth. So I took it up one notch on the slider at that point so that it stopped dithering, And then I would save the file. I was literally getting 95% file reduction size.
So my pages that used to be a meg and a half, at least locally, are now 300 or 400 kilobytes total. And the automated tool that I had relied on for a long time – and which, in fairness, is very good at JPEGs; very quick, doesn’t slam the processors, in a couple of seconds it’s done and you can get like 50% optimization. But by hand tuning these, just changing the bit depth, it was saving them out at 3% of the size of the original. And then I could adjust the size down so that it wasn’t 4000 pixels wide, it was 1000 pixels wide or whatever, and that would save more as well. But if I hadn’t been so invested in ‘Let’s make this as lightweight as possible for the user in order to improve their user experience’ – that was the only thought in my head, just to improve their experience – I might not have gone to that level. I might not have tried to figure out, ‘Hey, is there another way that I can make these things smaller?’ Because I had a 500 kilobyte PNG and then ImageOptim was like, ‘All right, now it’s 470 kilobytes.’ All right, that’s better than 500. But I was like, ‘Isn’t there a way I could do better?’ and it turned out there was. So now, having talked to you, I’m like, ‘Oh, not only that, but I’m not being as wasteful.’
Gerry M 50:09
One thing I was thinking there – and sometimes they can be in harmony, which is wonderful – is you talk about the user experience, and I was thinking that, yes, I have promoted that a lot over the years. But also, we should have the earth experience. ‘What’s the user experience? Oh, it’s good. And what’s the earth experience?’ Sometimes they’re in sync, which is great, but sometimes there may be a contradiction. The user wants this, and it’s not so good for the earth, but in a great world, the earth experience and the user experience are in sync – and the business experience. But that we should consider the earth experience in our design thinking, which inadvertently – well, maybe not. You’ve done it because you’re that type of person. It’s the way you live. I know how you approach your life. You may not have articulated it, but you have a philosophy, you have a way of living, that have kind of led you down that path in a way – whether you knew it or not consciously, whether you had articulated it consciously, the type of nature of the way you behave and the way you live meant you were more likely to want to do that sort of thing, if you know what I mean. I don’t know if that makes sense.
Maybe. I think also coming from the pre-internet days, when everything – you know, 1200 baud modem or less, when every byte counted, and the early internet when 56 kilobits per second speeds was astonishingly fast. If you were super lucky, you might be in a situation where your organization had a T1 line. I have way better than a T1 line to my house today through fiber. But yeah, coming up from that where every byte counted. I think that I would probably—
Gerry M 52:17
But you haven’t lost that.
I would credit that more, I think. I mean, I appreciate what you said about my way of living, and I do, I try to live – I don’t live as minimally as I could, certainly, but I try not to be too over burdensome.
Gerry M 52:37
Can we somehow ingest that back into all these younger developers, who are passionate and who were out marching for climate change, because it’s the young generation that’s driving the need to address climate change. And yet, they’re often not as conscious of the impacts of them constantly been on their smartphone in this area. Kind of somehow bringing this thinking that is bubbling under. I know you’ve written about it recently, about the static sites, the thing for years I used to talk about that. Then I stopped talking about it, then I noticed my sites were all dynamic – not that I’ve got big sites or anything like that, but they’re from a database. But why do I have dynamic? How did this happen? I mean, I used to always say static was better. I went back to my developer, the guy who looks after the site, and said, ‘How come they’re all dynamic?’ And he said, ‘All sites are now.’ So then we did an experiment and you know, it just said, well, load two pages – one dynamic, one static. The dynamic one was taking four and a half seconds to load and the static one was taking 2.7 seconds to load. And I said, ‘I don’t need dynamic pages. I’m not in the dynamic business.’ So we brought them all – it’s still in a database, but it produces static pages. You talk a little about what drove you to come to that realization as well – or to talk about it or write about it.
Yeah, I mean, it’s really the present circumstances. It’s because network demand is going up very quickly. And, in a lot of cases, people need information as quickly as they can get it with as little drain on their time, energy and resources as they can get. I mean, my site is partly dynamic. It’s half a WordPress blog and the rest of it is hand built. To the extent that any other pages dynamic, I use PHP to create a static page, generally, if I have to load some dynamic data, but about half the site, I would say, is static. The reason I said ‘get static’ is for the exact experience you had, which is the static site is faster. Because literally all the server has to do is say, ‘You want these files? Here they are,’ instead of, ‘You want these files? Okay, I have to construct those files. And now here they are.’
So it’s much less of a burden on the server – whatever machine the server is, and if you’re in the cloud, you’re on somebody else’s computer. I mean, that’s what the cloud is. So it’s less of a demand on the server that’s serving up the page. It’s a very simple ‘look up the file, load the file, send the file’, or ‘look up the file in the cache, send it out of the cache’. Right? And so getting static sometimes can mean just being really aggressive with your server caching. So my WordPress section of my site, someone sort of poked at me. And I looked at it, and I was like, ‘Well, I have caching turned on.’ Actually, I didn’t; I had turned it off at some point and forgotten. So I turned it back on. So what that means is the server is maintaining static copies of pages locally in a cache and it sends those out. So it’s much faster now, and it’s much less server intensive. And then if the page gets updated, then the cache gets updated.
So I mean, that’s a first step: cache aggressively. Some sites, it’ll be the, ‘Well, we cache, but we don’t cache this area of the site because it’s so dynamic.’ It updates every minute or whatever. Yeah, no start caching those areas too. And if you can render things down to pure static so that you don’t even have to worry about the cache so much, great. I mean, understood, not every page can be that. If you’re the WHO and you’re serving up COVID-19 maps, that’s harder to make static. You can make it static, but then you have to set up a regular script to update the static. For all I know, maybe that would be more resource intensive than just having the dynamic map. It sort of depends on how many people are using a given resource, but it’s time to look at that stuff. And it’s time to look at that stuff because we’re in very unusual circumstances. People are stressed as it is, and we don’t have any business stressing them further by offloading our developer convenience onto them. We never had business doing this, but people could kind of wave it away in the past. Now you have no excuse, you have no business prioritizing your convenience over theirs – even if that means what we’re doing this week is we’re rebuilding this section of the site so that it’s more performant. And we had always sort of ignored it before because it felt ‘performant enough’. That doesn’t cut it anymore.
Like I said, I might have launched this redesign, except performant enough doesn’t cut it anymore. And when I do launch this redesign, it’s got to be as performant as I feel I can make it. And if it’s still not performant enough, I’m not launching the redesign until things are less stressful, things are less critical. And I’ll probably be reducing – reducing isn’t the right word. I’ll be converting more of my site to be static. I might make the homepage static. Right now it’s cached, but it still comes out of WordPress. I may switch that over, probably will switch it over, to just be a static copy of the of the homepage and then I will update it manually every time I publish a new blog post if I have to, if that’s what it takes. I mean, ideally, I can make it performant, I could get it to the point where I didn’t have to do that, where when I push a button to publish a new post that it also triggers a script that updates that static page. But if I can’t, then I just do it manually. That’s not ideal. It’s not something that scales over the long term. But if that’s what it takes right now, then that’s what it takes. I might have to do it for individual post pages as well.
The last I checked the caching was more than covering. My download speeds were something like 0.1 seconds or something like that – or the page surfing speed, excuse me, not the download speed. The page surfing was 1/10th of a second. And then it was up to the network. But again, I need to go back into my archives and I need to look at the images that I put on old posts to make them look nicer and find out if they can be further optimized. I know I optimized some of them at the time, but if I can do better, I need to replace them with those better copies.
Gerry M 60:29
A final question. Partly you’ve answered it in multiple ways, but say from a web development and design perspective, what’s the biggest thing you’ve learned from this moment in time – this very stressful moment, this crisis, this pandemic that you think you might bring into the next period, when we get through this, that isn’t just a thing you’ve learned to survive now, but something that you think that, ‘Hey, this taught me something that I really should have been thinking about before as well, and I’m going to try and keep thinking about this, even when things get back to “normal”.’
I think it’s the stuff we were talking about that, even if I was being unusually conscious of the burden that I was placing on users, I’ve already identified places where I could have been doing better and I wasn’t because I was being lazy about it. I was letting it go. ‘Well, I ran that image through ImageOptim. That’s good enough.’ And I didn’t think to myself, ‘Well, let me take it into a more customizable, more powerful editing suite to see if I can get that down even further.’ You know, it’s the make sure your caching is turned on, it’s figure out where you can make things lighter and better without – we don’t have to go back to 1993 and have it all be unstyled pages. Although in some cases, if I discovered that I had a page that people were depending on critically – like for life and death sort of thing – I would absolutely consider going back to no CSS, here’s your information. No images, except if it’s necessary. If I had a page that was, if we end up with a COVID-21 and it creates a skin rash, ‘Okay, here’s a picture of the skin rash.’ That is critical information.
Gerry M 62:55
That’s critical, yes. But you don’t need somebody blowing their nose.
Yeah, I don’t need the hero image, I don’t need the concerned doctor talking to a patient, right? That’s gone. And maybe I have a couple of styles literally embedded in the page to make the background color be the institutional color, and the text to be in Helvetica instead of Times, but I’m not serving up a big stylesheet that makes everything look super beautiful and it’s loading custom fonts and that sort of stuff. If people need to know, ‘Is this the skin rash?’ or ‘Are these the symptoms?’ and it’s getting hit so hard that the page load is dropping, then cut out the stuff. You can have a plain text link that gets them back to the rest of the site if they need to. You go down to, ‘Yeah, this page looks like it came from 1996. But guess what? Pages in 1996 were 10 times lighter than they are now. Here’s the critical information and get that page load as low as possible.’
Now, I don’t expect anything like that on my personal site, but I need to be paying more attention. And that’s the sort of thing I think I’m going to be more strident about, I’m going to be more hardcore about. I had a certain attitude of, ‘Well, this is what you should do. But I understand if you have situations where you can’t make that happen today. Think about it for the future.’ Now, it’s going to be more, ‘You know what? Do it, get forgiveness later.’ We don’t have any excuse for not doing these things appropriately and paying more attention to what kind of resource consumption, what kind of time consumption, we’re incurring. If suddenly the entire world is coming to your site and your page load times have dropped, get it down to static. The CEOs press release updates can wait this week, because suddenly everyone’s here and they need this information. We can do the press release about how we’re concerned about the community next week when we don’t have this level of traffic. Right now, the way we show concern for the community is serving the community, not telling them that we’re serving them, which is exactly you’ve talked about before; it gets back to the institutional ego.
But there’s a service aspect that I think large portions of the industry don’t adhere to, except at a surface level. There’s a lot of lip service paid to serving the user. And I’m not going to say everyone, hopefully people listening to this will say, ‘Well, that’s not me.’ I’m glad. I hope that you’re spreading that way of thinking. But I think there is a lot of the industry where it’s the, ‘We need to improve the business metrics.’ And if that also means improving how we do things from a performance standpoint, then, okay. But sometimes the business metrics might have to take a small hit because our pages aren’t as pretty and they’re measuring on prettiness. They’ve been doing NPS surveys where they say, ‘What did you think of the look of the site?’ or whatever, and maybe they’re not getting 10s anymore. Maybe they’re getting eights or sevens. Okay, but so what, as long as we’re getting 10s on the, ‘I could find what I needed in the time that I needed it.’
Gerry M 66:42
If you’re interested in these sorts of ideas, I published a book called World Wide Waste. You can find out more at gerrymcgovern.com/www. Thank you. I hope you enjoyed this episode. And if you’d like to be part of the conversation or community, hop on over to ThisIsHCD.com, where you can join the Slack community and help shape future episodes and connect with other designers around the world. Or join the HCD newsletter, where you can win books and get updates. Subscribe to our content on Apple Podcasts or Spotify, and listen to any of our design podcasts, such as Getting Started in Design, and Bringing Design Closer with Gerry Scullion; Power of Ten with Andy Polaine; Decoding Culture with Dr John Curran; ProdPod with Adrienne Tan; and EthnoPod with Jay Hasbrouck. Thanks for listening and see you next time.
We provide remote, flexible training options to help you grow your design and innovation capabilities. We also offer bespoke training programmes for teams and organisations on any of our courses.View all courses