Sustainability in Web Development

James Harrington

Hello everyone, and welcome to our pilot episode of The MAJOR Difference. Today we have a very special guest with us, Davs Howard, who is MAJOR's Technical Director. Davs is here to talk with us about the subject of sustainability in web development. So without further ado, let's get into it.

So to get us started, Davs, could you talk us through how long you've been involved in web development and how long you've been with MAJOR?

Davs Howard

Yeah, so I was thinking about this the other day, actually, I started experimenting with the web back in 2002, back when it was like Dreamweaver and all that kind of stuff. It was quite fun. And then professionally since 2009 - so a year before starting here at MAJOR. I joined as an intern back in 2010 - quite a long time ago now.

James Harrington

Is it that long?

Davs Howard

Yeah, I know. It's crazy. 13 years now. So I spent six weeks here as an internship and then joined as a web developer after that. Did that for 4 and a half years, about that, before becoming Head of Digital for a team of one, at which point then we kind of obviously hired more developers and kind of grew out a bit of a team. And then about five and a half years ago, I became Technical Director at MAJOR and now one of the key shareholders.

James Harrington

Could you talk a bit more about what your role as Technical Director involves?

Davs Howard

Yeah. So it's kind of in the title, everything technical. So that spans the entire life cycle of a project. So everything up front from gathering and understanding what a client needs before we've even actually formally engaged, helping with formulating and describing a solution to that and therefore creating proposals/pitches. And then once we actually get started working on a project, the scoping and architecting that goes in up front, working with the designers, working with the UX researchers and designers and then in many projects actually being involved in the coding and development.

If not, then obviously liaising with the development team on that to our implementation process, our quality assurance, UAT, content population, build, and then like the ongoing stuff, so that regular maintenance and continuous improvement of our web projects as well.

James Harrington

Yeah, so pretty much all the way through.

Davs Howard

Yeah, and then there's a lot of other things as well, optimization of our processes, how can we become better at the way that we work, involved in hiring, especially in the dev team, making sure to stay up to date on industry innovations and what the tech stacks are doing and whole load of stuff.

Yeah, it's definitely come quite a long way from the web developer that I started as.

James Harrington

So today we're talking about sustainability in web development. Could you talk us through what that means to you and why it's an important consideration for digital agencies?

Davs Howard

Yeah. So in all honesty, it's definitely a newer thing, I think for us as an agency and also me personally.

For many years, I remember seeing, you know, we get emails from clients of big business or things like that, and at the bottom would always say, like "save a tree, don't print this email". I was like, you know, it was always how much, how can we move more stuff online in order to do better for the planet?

Like that was kind of a side effect of it, but that was always there. And then definitely over the last few years, I think we've seen such a shift that way that now it's almost gone too far. We've put everything online that maybe we didn't need to.

I think the internet kind of produces, it's about 4% of global emissions. Now, it's more than aviation. It's a huge contributor to the carbon impact of the world.

James Harrington

I think that figure was probably an estimate.

Davs Howard

Yes, a good few years old. But I remember I did read when doing research for a knowledge article recently that was, they estimate by, I think it's 2025, so only a couple of years away that all global communication technology will be responsible for more carbon emissions than any country outside of China, India and the States.

James Harrington

Yeah.

Davs Howard

So like it would be the fourth biggest country in global emissions for basically the internet and global communications, which is massive. Like it's a huge amount of stuff.

So, you know, we've, we've done quite a lot of soul searching over the years and personally since becoming a dad, definitely kind of view on the world changes and I think there's definitely kind of, we've got a bit of a responsibility as creatives and creators on the web to minimize our impact.

Our impact will be microscopic in the grand scheme of things, but we can definitely act as megaphones. If we can be doing things that have a positive impact, maybe they will rub off on our clients who might rub off on their colleagues who might rub off on their friends/networks. And it's just about how far can you push that?

We are at an early learning stage on that at the moment, but it's been something we've been implementing quite consistently for at least a year now.

James Harrington

And we talked earlier, you kind of work end-to-end, so you oversee all of the web projects at MAJOR. Could you talk through how MAJOR integrate sustainable practices into the web development process?

Davs Howard

Yeah, so we've definitely, I wouldn't say piecemealed, but we've introduced new things as we get more comfortable in a previous thing. So, initially it was just being aware. What are the things we could be doing? And then it was building in carbon budgets into our specifications for projects.

So it was benchmarking like a client's existing site, for example, and saying, we want to hit the kind of recommended target of under a gram per page per view, and let's set a benchmark for this site for that.

Most of our development processes haven't had to change dramatically because we've focused on lean, fast websites for a good four or five years now anyway. So that has a huge impact into that approach, but it's, yeah, it's more knowledge and learning and then how do we get more visibility for our clients on those things?

So one of the things we've just started doing is introducing auditing upfront of engaging with a client. So benchmarking their site and showing it that's an area that we could help them on. Advising clients from green hosting solutions, seeing whether clients have similar commitment to Net Zero by 2030, for example, as we have, and whether or not our efforts in their digital real estate will help with that essentially.

And then just like kind of continual learning. As well, that's like such a key part of this is. Whether it is or not, it feels to me like quite an early, youthful part of the web industry. And I think there's going to be so much more that we learn about over the coming years and different practices and different auditing metrics and different processes that I think it's important for us to try and keep on top of that as best we can.

James Harrington

So to be a bit more specific. In terms of how you practically measure the sustainability of a website, could you maybe talk us through the core pillars and metrics that you use at MAJOR, and what they mean?

Davs Howard

So, at a fundamental level, there are a bunch of tools, like the websitecarbon.com, EcoGrader, and other tools like that, where you can go in, punch in your website's URL, it'll take a little while, and it'll come back with a calculation for you, which is an approximate estimate of the amount of carbon, per view that web page will, emit, essentially.

James Harrington

And that's doing it at a page level. So you're giving it a discrete URL.

Davs Howard

Yeah, because obviously every page on a website is different. Some may have more videos, more images, et cetera, more content. So yeah, there are varying degrees of that. That is performing essentially a crude algorithmic calculation on: bandwidth, speed, the amount of time it takes for the page to download, the size of the page, the types of hosting that it's using, things like that, to come up with the estimate.

Underneath that, a huge amount of research has gone in, into how to calculate how much energy a website uses, because it's so varied. There are three core parts you've got to consider.

One is the actual embodied energy that the things that you are using have required to be created. Like how much energy went into creating that hard drive and creating your phone and your laptop and all that stuff.

There's the energy required to deliver your website across servers, storing it on content delivery networks.

And then there's how do you, measure the energy requirements once you've got said website of it being used on your phone.

James Harrington

Or your desktop.

Davs Howard

Or your desktop. So the computational power it takes to parse that and render that page. Whether or not you're revisiting a site. Hopefully a large degree of that has been cached; that massively reduces the you don't have to retransmit tons of the data if it's already there.

So there is a collective between a whole bunch of companies including Wholegrain Digital, The Green Web Foundation and others that have tried to come up with this new open standard for estimating carbon emissions for digital products.

James Harrington

Yeah.

Davs Howard

So and that's the one that these tools generally use.

Where it becomes really difficult is understanding what the boundaries are for the different things that you want to consider its energy usage are. Because if your boundary is far too wide your estimates are going to be far too high, and everything's going to be terrible. Equally if they're far too narrow, you're not going to have an accurate representation of stuff.

It's the best metric we have right now. So it is one that will allow you to at least equally compare certain sites to other sites and will give you a benchmark in order to go "this is now better than it was before".

At a very crude level though, it comes down to how small/fast is your site and where is it hosted. Those are like the two biggest things you can do in order to actually produce a site that has a lower carbon impact than a different site doing the same things. That's kind of where it comes down to.

James Harrington

I guess another key factor for us as well is balancing the need to deliver visually appealing and feature rich websites whilst trying to manage that minimum carbon footprint. Can you talk us through how we do that? It's a balancing act.

Davs Howard

Yeah, it is. And thankfully most of the low hanging fruit in order of, for the tasks that you can do in order to actually minimize the carbon impact of a site are things that don't directly impact the visual design or the brand experience of a site.

Most of them are kind of technical optimisations, so things like image compression, making sure images are outputted at the right size, caching or the use of a Content Delivery Network, reducing third-party scripts. If you don't need the analytics tool, don't have it. If you're not using this tool, take it off. Choosing tools that are small, so choosing tools that favour smaller file sizes because that's only the functionality you need over bigger tools that do loads but you're only using 5% of their features. Again, it kind of facilitates that sending and storing fewer files, especially if it's things like database backups, or, you know, we're talking totally different scales if we get into the world of big data, the amount of files we're storing on client brochure sites is totally different than the amount of stuff Google or Facebook or Amazon is storing. Like it's totally different universes.

James Harrington

I think a lot of the tool sets we use as well have features, you know, for example, uploading a 2MB image on the fly. It will optimize that to minimize the stored footprint of that.

Davs Howard

Yeah. And there's this again, there's the, there's two factors to that. If you upload an image, let's say, yeah, it's 2MB in size, you could be outputting a much smaller image size to the user, which is probably 99% of the importance because that's the one that's going to be hit and used more. But then you are still storing a 2MB image on a server that maybe you only need a hundred kilobyte version in isolation. That's not important. It's not an issue. It's all about degrees of scale. If you've got a million of those images. That suddenly actually matters a bit more.

A couple of the other things, things like obviously geographically locating your server or your hosting near wherever someone is accessing it from, so hence the benefit of Content Delivery Networks.

And then there's a few more design things to consider, so avoiding lots of large autoplaying video. Like sometimes it's finding that balance between the message we want to portray or the feature sets we want to do, but it's, can you find a balance for minimizing that?

And then just avoiding large scales of unrequired data or files. Like years of backups of websites that you're never going to use again, or huge databases of users, or massive image file in like a digital asset management tool where you've got them stored there just in case. Can you minimize that or move it on to a cold storage?

I don't think to date we've actually had like a "design restraint" imposed by trying to make sites faster or more energy efficient that couldn't have been solved by a different technical solution. So it's not really anything that I think people should worry about.

There can be conversations around, there are colours that are more energy efficient but that is largely dependent on the screens that people are using and it becomes very difficult to actually quantify those.

And obviously you're always balancing function and feature as well. Platforms or products that do a lot more things will need a lot more things. So it kind of comes down to are those things required and are they required for that user at that time? Can you always offload things there?

James Harrington

I think from a client side as well. We quite often, I mean, historically, as we've gone through and delivered sites, there's that classic situation where a client will come to us and say, I need a CMS, I need the whole site to be delivered on a Content Management System. And then a year later, they probably managed it one percent of that site using a CMS.

So that technical overhead and footprint and ultimately a carbon impact was completely unnecessary for their requirements.

Davs Howard

Yeah, and for all of these things there is always the caveat of, is that impact really important?

Well in isolation it may not be, but collectively and at scale definitely is. If every agency out there has two clients who have done something, use the CMS, store tons of images, use loads of video that really they didn't need to do, and then there's 30,000 agencies that suddenly starts scaling up quite quickly. So, there's definitely things around that.

James Harrington

And also, when you think about a traditional, monolithic CMS versus the shift towards what we used to call Jamstack and now composable technologies, if that page hadn't been updated for a year, every time someone is hitting that page, if it was on a monolithic CMS versus a composable situation, the carbon impact is going to be significantly greater every time that server is hit versus a pre compiled page.

Davs Howard

Yeah, again, it comes down to scale.

James Harrington

Yeah.

Davs Howard

That's why, you know, there is a target set of per page view. But if your site is hit a hundred thousand times more than a different site, the optimization impact of that is going to be so much greater.

James Harrington

Okay. We're kind of touching on technologies and platforms, in terms of any specific coding practices or tools or frameworks that we use at MAJOR, could you talk through what we use and how we approach technology to ensure that we're delivering sustainable websites and maybe give us some examples?

Davs Howard

So a lot of the things are things I've kind of touched upon already. A lot of them I think are techniques rather than frameworks, so it is image optimization, file sizing, hosting, Content Delivery Networks, caching, that kind of stuff. I think that should always be the go to. That is what's going to deliver you the maximum benefit.

We really like the headless and the composable infrastructure. That's definitely where we've settled upon in the last few years.

James Harrington

What we used to call Jamstack.

Davs Howard

Yeah. So the idea of, rather than a more traditional CMS set up like WordPress or Kentico or Sitecore where your CMS is stored on a server, and when the user hits your domain, it calls off to the server, generates the page and sends it back, a headless environment decouples that content and front-end delivery.

You can still have the kind of server side on demand call, but you are still separating your CMS and front-end output into two different areas. And one of the big benefits is the ease at which you can do static site generation. So that is where you are essentially having your content stored in a system somewhere. That could be any number of headless's CMS is like Prismic, Storyblok, Contentful, Wordpress, for example, and then you call that data in a structured format and then output it as you see fit as the development team.

James Harrington

Just jumping in there for anyone. We mentioned the word Jamstack for anyone who's listening that stands for JavaScript, APIs and Markup. It's a phrase that's been used fairly frequently over the last few years and now seems to be retired. If you look on our website, there's a really good blog article about the technology but when we when we talk about Jamstack moving forward, we're talking about composable approaches.

Davs Howard

And that is a shift of, again, where the technology landscape is ending up. And it is, Jamstack is a term to explain a type of technology that has advanced and evolved beyond that now.

The static site generation approach is you have your code, you call off to your headless CMS or wherever your data is stored and you pre-compile every page and every possible page that you may need on your website.

For certain websites this is unachievable or infeasible because maybe user data or the scale of stuff but for lots of applications it will work. And that page being pre-compiled means it's so much faster. Because it's not having to be built on the fly, optimizations become a lot easier, you avoid that server overhead.

That is an area where you can get massive performance, speed, and website size benefits from. Obviously the deployment of that on Content Delivery Networks is easier as well, because you're not relying on a specific server. But there's always pros and cons with all these technologies.

I think other things there are, like obviously tools you can implement on a site-by-site basis.

So things to either help you resize or compress your images, either on upload and on delivery to users. lots of platforms offer those out of the box or allow you to integrate other services like Cloudinary.

Modular code frameworks, things that assist you doing that automatically as a developer are obviously delightful, if not, then manually implementing those practices. So let's say you've got a carousel or an accordion or something on a page, but that's the only page it's loaded to call that file only on that page. Similar kind of technique to lazy loading where you're offsetting the loading of an image or a file or something until it's needed. That could be as you scroll down the page or as you interact and click on a certain button or whatever it may be, things like that.

James Harrington

And some of these are just good practices regardless.

Davs Howard

Good practices regardless. They have multi benefits, but those are kind of general good practices for producing fast, more environmentally friendly sites.

There is an approach that's kind of gaining a bit of traction called "carbon aware design". And that is where you tailor the output of the website to the environment is being viewed in. So that could be if someone is on a low bandwidth or a low power phone that may be not showing images by default because the energy usage for them is going to be so much higher because of the time it's going to take to actually parse that page.

Equally, there are sites out there now that will tailor the output of their site based on the, either, the time of day on the region they're at or actually connecting to services, it will tell you like what the electrical grid impact is at the moment. So if there's a huge amount of electricity being used on the local grid, it will show you a more carbon aware version of the site where maybe it will reduce a bunch of features or images or whatever it may be. And still allow you those features, but they become optional. You kind of choose to opt into them by clicking and stuff rather than downloading them by default.

And I do remember there's this one site where you can, go to it and it's being powered by a solar panel that has a limited battery life. So if wherever that battery and solar panel is stored hasn't had the sufficient amount of sunlight over a certain period of time, and too many people are visiting the site, it'll go offline, until it recharges. And things like that.

James Harrington

A carbon aware website.

Davs Howard

Yeah, whether or not they become, they're definitely not suitable for every website.

They're definitely fun experiments and things that kind of are quite eye opening. But yeah, carbon design is definitely something that's out there. We've not done anything on it to date. I think it'd be quite fun to do a project on it at some point. But yeah, that's definitely something there.

And then you're kind of just looking back to what we do here. I think a lot of it is, again, baking all of this stuff into your process. So having some kind of optimisation process, and your developers and designers having this knowledge up front so that it's not coming in as an afterthought, I think is really important.

James Harrington

Yeah, that's a good point, actually. When you've got a new client and you're looking to educate them on the importance of sustainability and trying to convince them to prioritize it as part of part of the project, how do you approach that?

Davs Howard

It kind of depends on the client at the end of the day. I think there's definitely multiple avenues we can take on that. One is the fact that there are multiple benefits to all of these things. It's not like doing this is only a digital sustainability benefit. Faster sites are better for your SEO. They're better for your user experience. So there's always that multi benefit approach, that's definitely one way we can do.

One is what are they're the company net zero sustainability goals, do they have targets or commitments in place? In which case things like their website and their digital real estate, they all need to go in towards that.

And then the other is people's moral feeling of obligation, feeling they should do their part, however small, the same way that, you know, we all recycle now, that wasn't the case 30 years ago, whatever. If we can get to a point where just for every web project, people are just at the very least considering this and thinking, should I be doing this? Should I not? It's the easiest way.

James Harrington

I think that's, that's an important point. I know we're seeing a lot more of our clients, probably the larger clients who need to report of scope one, two and three emissions. They're looking down their supply chains and looking at how their suppliers are helping them achieve those goals in those, you know, in those tier one, two and three scopes.

I know we've certainly seen an increase in that level of interest. What would you say to people who are looking to integrate sustainability into their web development practices? Have you got any actionable tips or resources that you'd recommend they look at or adopt?

Davs Howard

So I think the starting places is to learn. So it's go away. I'm sure we'll add a bunch of things into the show notes, but there's a variety of different websites, that are really good. Some books are really good. There's a, newsletter called Curiously Green by Wholegrain Digital, which is brilliant. It's like a monthly newsletter with a bunch of things in the sustainability ecosystem.

I think regular reviews either internally or with clients. Include it as part of your ongoing service with them or your internal, however your agency or company internally reviews, essentially ensure it becomes part of that. Getting a degree of understanding as, as things change, trying to keep on top of that. Obviously that's where agencies like ourself, we kind of do that part on behalf of our clients. That's really good.

Teach where you can. So learn. Impart that knowledge on to other people, even if it's through soft methods of just chatting with your colleagues about it. Doesn't have to be like a formalized, you know, training schedule or anything.

James Harrington

Yeah.

Davs Howard

For actually running web projects, I think having benchmarks is really important. So targets that aim towards and, again, considering it at the start of a project, not either midway through or once you finished. And then try and yeah, use some of the tools that are out there to actually see how you do at the moment. Is it something you could definitely improve?

James Harrington

So, looking to the future, Davs, you've been involved in web development for over 15 years and I guess one of the things we've all learned is that new web technologies and trends emerge frequently.

How do you stay current and up to date with both the latest web technologies and those pertaining to sustainable web practices? And can you recommend any websites or podcasts or sources of information that you use regularly?

Davs Howard

So yeah, there's a few that I definitely follow or subscribe. Predominantly those that promote, positive digital sustainability.

So there's the sustainablewebdesign.org website, which is amazing. It's got so much information on there, especially specifics around design, development, critical thinking, that kind of stuff.

There's the Wholegrain Digital newsletter I mentioned, Curiously Green, that's really good.

I like to think our own newsletter and knowledge posts can. Doing a lot of research and trying to, again, impart a degree of that knowledge as best as we can.

EFWA, the Eco Friendly Web Alliance, their site's really good and they've got a variety of different posts that go up on there updating things.

And then anything relating to performance optimization, data reduction, things like that. So just try and have a wider touch point on the industry and wider web and digital trends and seeing what things maybe aren't directly considered as positive sustainability efforts, but definitely have that as a side effect.

James Harrington

And in terms of future trends if I asked you what you saw as the top three future trends in sustainable web development, what would what would your answer be?

Davs Howard

I think there's going to be just a general focus, and it's a much stronger focus on digital sustainability. Whether that's something people actively look for during kind of pitches or proposals, or if it's things that agencies other clients, and just it being more cognizant during a web development process. Kind of as we have been with data privacy, especially since GDPR, and a couple of years prior to that, it becomes just another aspect of that.

I think that's going to be the case. What else?

Green hosting. I think, definitely, it's such a, I say easy from a client and agencies point of view, it's an easy win, getting a website onto green hosting is only a benefit. So I imagine more companies will offer it. It may be even become the de facto standard eventually. So there's that.

James Harrington

You've got companies like Krystal Hosting. You know, they're totally committed to delivering all of their servers and hosting infrastructure on renewable energy.

Davs Howard

Yes, I think that's really important.

And then the other one are definitely data compression and, deduplication of things at scale.

So this always reminds me, and I did add it in our knowledge article recently. I remember it was about 2015ish when Google released their new logo the one we kind of know and see today. And I remember at the time there was a blog article about it and they were saying about how they tailored the vector so precisely that they managed to reduce the file size of that logo, by 9Kb.

And then I saw another article explain why that was such a big deal because at the time Google was getting like, you know, eight and a half billion searches or some really high number like that and just on their search things it saved it was like nearly 60 terabytes of data a day.

Yeah and I remember the article explaining saying based on the cost of bandwidth at the time that was saving Google £10k a month or something or £10k a day.

James Harrington

That's a really important point.

Davs Howard

It was viewed as this huge financial saving and like because they'd make, you know, they didn't change their logo because of that, but they were able to, through that simplification, make this massive saving.

And I wonder now if the same thing happened, whether the financial part would be the go to or if actually the potential carbon saving would be the go to. So imagine, I think I worked out was like 20 or 21 petabytes of annual data from that one small change at this one company. Imagine if lots of companies did lots of changes like that. That certainly has a huge impact. So, I suspect in the next few years we'll hear more about the changes big companies are making that have these kind of impacts and maybe we'll move away from a financial perspective on it and more to the sustainability aspect because it's only in their benefit to do so.

James Harrington

I think with the advent of Artificial Intelligence and the computational power required to power that step change in technology, I think how that's going to be powered physically from an energy use point of view is going to be I think quite important and at the forefront of a lot of people's minds.

Just wrapping up one of the things that we at MAJOR collect around is the thought of the belief of better doing things better, making things better every day. If you were going to recommend one thing that our listeners could do to improve the sustainability of their website, what would it be? That one thing.

Davs Howard

Definitely tackle that, like any of that low hanging fruit. Image optimization, removing non-critical third-party scripts. So any of those things where you can have quite big savings, immediately - those.

James Harrington

One of the questions that we ask all of our, all of our interviewees is, and this is going to be an interesting one, if you could imagine tomorrow you were given control of all advertising and media space in the UK for 24 hours. Every billboard, banner ad, TV ad, whatever form of media in the country, what would you say and why?

Davs Howard

I think mine will be probably the most boring answer we get so far. And it will be definitely a promotion of MAJOR. And it would be just "In the belief of better, majordigital.com".

James Harrington

Nice.

Davs Howard

So cryptic. But kind of uplifting at the same time and just kind of leave it there. Whether it's the best ad or not, I don't know, but that's, that's where I'd go.

James Harrington

Nice. Have you got any plugs or...

Davs Howard

This podcast, my plug is this podcast. We've been talking about it for so long, wanting to do it for so long to actually get started is really exciting. So, this podcast and our newsletter, it's going to be those two things.

James Harrington

Okay, how do people find our newsletter?

Davs Howard

Via our website, so majordigital.com/newsletter. And eventually we will get, when this all goes live, there'll be a page on our website for majordigital.com/podcast.

James Harrington

So, Davs, thank you so much for your time today, it was a really interesting chat, hope you enjoyed it.

Davs Howard

I did, it was really fun, I'm glad to actually have got this, got this started and got this sorted. f

James Harrington

For people listening, all of the resources we talked about will be in the show notes, and if you've enjoyed today, please do subscribe and let your friends know, we, uh, we really genuinely appreciate it.

So for those of you that've been listening, thank you for tuning in today to this episode of The MAJOR Difference. And until next time, stay curious and keep making a difference.