6 key UX/UI factors for a lightweight website

Hello, hello and welcome everyone to today's episode of the Green the Web podcast, a podcast about ecologically and socially sustainable design. I'm your host, Sandy Dähnert, a UX/UI designer myself and a really, really big passionist for this topic.

And today, we will talk about the six key factors for a light weight carbon emission reduced website.

We will talk about videos, images, fonts, animations and interactions, click paths and third party tools. We will talk about which ones are the most important ones to think about, which are the ones that are usually the heaviest, which are the levers that we push, the easiest as well as need to push the most. Let's get into that.

Before we start, I want to say that we won't be talking about green hosting, choosing a lightweight content management system, integrating a lightweight tracking tool, or reducing the tech base such as CSS and JavaScript and stuff. We won't be talking about that, although of course those other things for creating a lightweight website. But I want to discuss more that your UX and UI factors for creating a lightweight website. Not so much the technical parts of it. Today in this episode at least.

And as I said, we want to talk about videos, images, fonts, animations, click paths, and third party tools. And what I see most of the times is images being the worst images are usually the heaviest of them all. So what I suggest is taking the closest look on your website on images. But. All six of them have a huge impact on the website's carbon emissions. Of course, videos even more than images. But usually you see a lot less videos than images on websites, which is why I say have the closest look to images because it's the most used visual element on websites and we will go through all six of those key factors in what to think about when creating and designing with those six elements and what to do and what not to do as well. So let's start with videos. First things first. Do you really need videos on your website? There are so many things to discuss when thinking about the usage of videos on a website. And the first thing that I want to say about it is every video is great when it reduces other carbon or energy emissions, period. Of course, videos are more data heavy than any other component or element on a website usually. But if it reduces other carbon emissions, go for it. This could be, for example, to reduce returns in an online shop to show this shoe or pair of jeans or dress or trousers or whatever in a video so the user knows how it actually looks like when it's worn by someone. It will reduce returns because then the user knows what it actually looks like. So this video is great to use, although it's a video and I would usually say in lightweight websites, don't use any videos. You see, every time when it comes to usability and the user journey and also reducing carbon emissions in other ways like delivery and returns. Then choose to go for it. Plus, videos can have a huge impact, especially with users that are neurodiverse or have struggles with reading long complex texts or going through complex forms or stuff like that. And then an explanation video goes of long way and actually making this process usable for someone because otherwise this is just wasted and frustrating and confusing for certain people. So yes, videos have definitely their place, especially in today's society with tremendous increase in YouTube videos and other things like that. But really think about, do you really need this video? Can reduce carbon emissions for other things as well as does it enhance the usability for certain people or certain aspects? Certain topics, then yes, go for it. And then you can, of course compress those videos and choose the size and location. Definitely not having autoplay videos on your website so it doesn't load before the user actually clicks on the video. Definitely no audio autoplay, so no audio that automatically plays. Please never do that because that is extremely frustrating and bad to do. But yeah, thinking about not putting a video on your home page first thing full with autoplay. That would be probably the worst. Practice that he could do. Think about smaller locations, no autoplay compressing them and really thinking about is this video actually helpful or is it not at all. The same goes for images. Pretty much everything we just said accounts as well for images. Of course, not autoplay, because images are no moving media, but same questions of do you really need images? Just last month we had a podcast episode only about images and the questions you should ask for images. So definitely listen to that episode. I will link it down below in the description, but if you scroll up the podcast episodes or down, depending on where you're looking at, then you can find this podcast episode as well. Images done right for it, lightweight websites. There's a huge discussion about what questions to ask and one is obviously, do you really need images? Also about every image is great that reduces other carbon emissions, same as witches said about reducing returns, for example, because if you have images of different models showcasing a dress in different they have a different height, they have different body aspects and all kinds of different looks, then that definitely helps in imagining it for yourself and reduces returns. So yes, those images are great, so use them. The other questions that we asked in this podcast episode is also about what size and location to choose the image styles and level of detail in how to reduce the pixel density of images so they become more lightweight in adjusting size and resolution and compressing them in lazy loading and caching. So there's a lot of technical things around images as well. But what I want to get mostly into is the creative side of images. You want to use images, Awesome. How can you creatively use those images and not have full width size on your page, but in more interesting creative ways? Introducing those images and making your brand shine and your shop or website or application, but still having it really lightweight, really well scaled, really well compressed, maybe even manipulated with like an image style or a level of detail of just having monochrome colors, for example. Then immediately the image size is reduced heavily. And there's so many creative tricks we can use to make those images lightweight other than just scaling and compressing them or not using images at all. I highly recommend checking out this podcast episode, but definitely wanted to mention it here and mentioning again to look at your images on your websites because most of the times that's the big factor for bad performing websites because there's images of three megabyte on one page and it slows down your website tremendously. Just look at it and scale and compress them correctly as a first step. Then you're you're good to go already. But there's so many more creative ways around images. And if you're wondering how to find out if your images are heavy or not, you can also check out the latest podcast episode, which was about an intro to measuring a website's carbon footprint. And I definitely recommend as the first step to checking out Digital Beacon as a tool to put in your website there. And then it tells you how heavy your images are in total. It doesn't tell you every single image, but just checking that out already is going a long way. Okay, so videos and images. Most of the times, the ones that slow down your website heavily and bring on the carbon emissions. That two other ones that are competing and are more and more competing actually with images and videos are fonts and animations and interaction fonts. I'm sometimes surprised how many different fonts one website can use. There is websites with 12 different fonts. And that definitely increases the page size and the carbon emission of the website massively. Yes, it does. Fonts. Simple fonts. And what I use as a rule of thumb usually is no more than two different fonts for a website. Best case is even using only system fonts, which means only the funds that are already preloaded on the device's system that displays this website. That's like ARIA for example. I actually use that for my website, but it also means that your website is most likely different on different devices, as different devices usually have different system fonts. So Apple has different system fonts than Windows does have. There are a couple of funds that are widespread among systems, but not all of them are on every single system. So just so you know, it definitely limits like system fonts to limit the creativeness of a designer. And it also changes the visual feel of the website depending on the system and the system fun that is displayed with. I don't have that problem for myself with the the website. I think it looks nice on every single system with every single system font. But of course I also do use special fonts in other website projects when I want to have a certain brand feel for it. And if you use no system fonts but actually special fonts, then download them, compress them, and then upload them to your own back end. Compressing them helps a lot in reducing the websites data, plus using only one or two fonts, especially using a special font for your headline. That is definitely where the brand awareness is big, but you usually don't really have to use them for your copy text. So for your small copy text print, you can use system funds for that because it's not that obvious, it's not that visually present, but for your headlines, yeah, go for a special font and then compress it and then upload it to your own back end. You can also use variable funds usually. I would go for a variety of funds and heard of other designers using variable funds only for projects that need a lot of different font styles. So it's one font, but we do have all kinds of different styles in one font and different font sizes, and then a variable font is really helpful to use and reduces the carbon emission of it. I will definitely have a podcast episode about wants to go even deeper into that. But just so you know. Check, for example, with Digital Beacon as well. Whether you're using tons of fonts and if that is slowing down your website, you can also see it in the developer tools of your browser. How many fonts you are actually using and then reduce them. Just simply reduce them because yes, they can slow down your website and increase your carbon emissions surprisingly heavily. Really, depending on the amount of fonts that you're using. The fourth key USA factor for a lightweight website are animations and interactions. If you're checking your website out with Digital Beacon, then you will find script as one type of content. And behind that is animations and interactive components with using JavaScript and other script forms. So what it means, if that is really a bummer for your website, that you have a huge overflowing animations or like really intense interactive components and elements that could be. Data heavy accordions that could be sliders. Like, do we really have to still talk about sliders not being cool? They are not cool for the user, but they are definitely not cool for carbon emissions. It could be about sliding product carousels in online shops. All those little interactions and interactive components add to the script of your website and onto data heaviness of your website. So really think about do you need the interaction on this element or component or do you not? For example, you have FAQs and accordions like Expendables, but you have 3 to 4 questions in your FAQs, your frequently asked questions, and they are really short in text, so don't put it in an interactive component, but actually just displayed it as text because then the user doesn't have to click it open and close it again. But I actually just see and read it. Like there's little questions that we should ask. How crafty does a website need to be? How animation creative does this website need to be? If that's your style you want to go for. Okay. But then really think about compressing and reducing the data effect of those animations and interactions. Or do we just go for those little micro interactions on buttons, images and products and little details here and there that don't drastically ruin your page weight of your website? Or do we really need all of those huge overflowing animations and interactions? They ruin your speed, they ruin your data weight, they ruin your carbon emissions. Is it really worth it? Question Mark. I'm not against animations and interactions, don't get me wrong, but I'm more into micro animations and those little details that bring. Joy and really help the usability other than just having it for the sake of having it. Okay. And the last two key factors are third party tools and click paths and third party tools. That's really easy to go through every single Instagram feed, booking calendar for meetings or accommodations that it's a third party, every Pinterest, Facebook, TikTok, Snapchat, LinkedIn, integration, any social sharing tools, any event tools that you bring in from outside onto your website have an impact on your carbon emissions. Yes, of course. So every form, every calendar, every feed, they do slow down your website. They do bring data onto your website. Yes. And most of the times. Big time. So the easiest thing is to ask again, do I really need it? Do I need this constant Instagram feed? Most of the times, no. Then just put the four or five six most viewed Instagram posts, save them as an image and put them on your website as an image with here. Go to my Instagram. Instead of having this constant feed on there because most of the times we don't need the feed. But actually just a little visual element to showcase like some of the postings. Have a look at booking calendar integrations, which tools are actually heavy and which are not. Which slow down your website and which do not. Same goes for social sharing tools, the same goes for event tools, the same goes for all kinds of other third party tools that you're integrating into your website that are hosted from somewhere else. Cool. And last but not least, click paths. This is a huge topic or can be a huge topic in itself. But I just wanted to mention really quickly as one of the key factors for a lightweight website, because every click counts, every click as a data service somewhere else to send over content to show on the user's device. And one thing that I really want to say over and over and over again is we're not in a supermarket when it comes to websites. We're not in a supermarket where the things are placed in a certain way. So you have to do longer runs to pass certain products. A website is there to find the things in an easy, usable, really flowy way. Not to go from A to F to B to X, and then back to A. Don't do it. Really Think of easy to use websites, a usable click pathway to bring your user to exactly the point where he or she gets the information, gets the product, gets the whatever, and can leave onto a checkout, can leave onto reading a book or reading the e-book, for example, or reading the blog post or doing something else. Not to make it harder than it needs to be, because that increases the carbon emissions because more clicks have to be done by the user to get to their goal. Not to even mention the frustrations and the nerves and everything else from the user's perspective. But if we are just talking about carbon emissions, then don't make it more complex than it needs to be. That's all I wanted to say about it in today's episode. So to go from top to bottom, again, it's videos, images, fonts, animations and interactions, third party tools and click paths. Those are the six key factors for a lightweight website. Images being most of the times the big problem and the easiest to to conquer. But yeah, videos, fonts, animations being close second, third and fourth really heavily depending on how you created your website or what's like your main. Factor your main aspect on your website. Just check it out. For example, with Digital Beacon. I will link it below in the description as well. So you know more about the heaviness, the data heaviness of those different kinds of elements on your website. All right.

That's it for this week's episode. I'd really love to hear your opinion. Let me know on Instagram or LinkedIn at Green the Web. You can find me there. Subscribe to the podcast if you want to get the next juicy episodes as well. It's all about ecologically and socially sustainable design. Share this episode with everyone who you think should listen to it and rate the podcast on Apple or on Spotify or on any other platform. You're listening to this really goes a long way to helping others, finding this podcast and listening to it as well. If you feel like this is a topic that more people should listen to, then please rate it. Please share it. I'd be really honored to see and hear about you and yeah. Other than that, check out the resources on my website. There's lots of tool lists and blog posts and all kinds of things that you can find there for free. Spread the joy as always, and see you in the next episode.