Let’s face it: bloated websites are a drag.
They take forever to load, they can leave your visitors feeling frustrated, they don’t do as well for SEO, and they emit more CO2.
Not great all around.
But what can we do? Websites are technical and made up of HTML, CSS, and JS. If we don’t know code, are we out of luck?
Not at all!! The majority of updates we can make to a site to make it greener require no coding knowledge at all.
This is a brief introduction to these concepts. If you have any questions, comment below! There are also extra resources at the bottom of this post to help you out if you’re looking for more.
Let’s dive in!
No. 1: Cut the fluff
We have a tendency to want to tell our life story to everyone, especially on our websites. We feel we have so much value to offer the world - and that’s great! But people are only going to read so much.
The tendency to add as much information as possible comes from a few different places.
It happens because we have imposter syndrome and we want to prove our worth.
Because we wonder, “What if someone has this specific question?? I need to answer it!”
But, mostly, it’s because we haven’t done the strategy work to know our target audience the best we can and so we cast a huge net out into the world hoping we’ll catch something.
In reality, too much information is hurting your website in many ways. It will cause people to become frustrated or bored with your website and leave. It will make it harder for them to find the information they actually need. And, it will bloat your website increasing its file size, loading time, and carbon footprint.
The absolute best thing you can do for your website is determine your target audience, map out exactly what they need to know, and cut the extra content that’s not helping them.
It’s a win for you, your audience, and the planet!
No. 2: Optimize the images
For most websites, images tend to make up the largest part of their file sizes and therefore, their carbon footprint.
We, as humans, are visual creatures. Images are super important for communicating information, feelings, and context quickly. But, they can also become big files pretty quickly.
There are a few things you can do to make them smaller:
Size them correctly. In the vast majority of cases, the largest you should save out any image is 1920px in width. That’s the full width of most computer screens, anything bigger is wasted. And non-fullscreen images can be even smaller!
Save them out as the correct file type. If it’s a photograph with no transparency, save it as a JPG. If it has transparent qualities or is made up of a few colors, like a logo, save it as a PNG.
Run all of your images through an online compressor like TinyJPG before uploading.
There are tons more file types and ways to size images than what’s mapped out above, but that’s the overview to get you started!
No. 3: Compress the videos
Videos are technically the biggest part of any webpage, even larger than images. However, most people use images while not as many use video. So it comes in third.
They’re a little bit more complicated to deal with, but can still be done by anyone and for free!
In general, there are two options you have when it comes to video: self-host them on your website or upload them to a third-party like YouTube and then embed them.
If you’re going to self-host, as in, upload them directly to your website, I recommend downloading HandBrake and running your video through there.
HandBrake is magic. I used it for compressing all of the videos in my Green Web Design Course and here’s a few before and after’s of some video file sizes:
Before: 278MB | After: 17.2MB
Before: 1.49GB | After: 64.9MB
Before: 2.15GB | After: 77.8MB
Absolute magic!
HandBrake might look a little complicated upon first open, but all you need to do is load in your video, set the Preset to “Fast 1080p30” or “Very Fast 1080p30”, decide where to save it to and what to name it, then hit start!
(There’s also tons of YouTube videos out there for more detailed, step-by-step guides. I used the Very Fast preset on the course videos to get the results above.)
Or, if you’d rather not deal with compressing yourself, you can upload your videos to YouTube and embed from there.
YouTube will compress your videos for you, possibly send more people your way if your video is public, and will caption your videos (although they’re not 100% accurate).
There are some cons to this route, though.
If ads are enabled on the video on YouTube, they’ll follow to the embedded one as well. You also run the risk of losing your viewer to a recommended video.
Whichever option you go with will save your website some load time and grams of CO2 compared to if you had done nothing at all.
The choice is yours!
No. 4: Limit your fonts
There are two kinds of fonts you can use on your website: system fonts and custom fonts.
System fonts are the “boring” fonts that are available on every computer. Think Times New Roman, Arial, Verdana, etc.
These add 0 file size to your website because they can be pulled in from everyone’s devices. They’re super energy efficient!
But they’re not on brand and can feel lackluster.
Custom fonts are the rest of fonts, whether they’re from Google Fonts, Creative Market, Adobe, etc. These are the on brand, visually appealing, and less “boring” fonts.
However, each one you use has to load in a new file to your site which can range from 10kb up to as much as 200kb or, in some cases, even higher. And these get loaded onto every page.
This is not to say don’t use them, because they are important, but be strategic in how you use them. Instead of loading them in for every bit of text, try loading them in for just your headings and subheadings.
Then, your body copy can be set in the less exciting system fonts. It’s harder to tell the differences between a custom font and say, Arial, for the average user, so it won’t affect your branding too much. Plus, legibility matters most for body copy.
This will keep your website on brand but more efficient. A win-win!
No. 5: Choose renewable
This might seem the most obvious, but choose a renewable energy server for your website if you can. If you’re using something like Squarespace, Showit, or Shopify, this option isn’t available to you, and that’s okay. But if you’re using WordPress, you can choose your own web host and make the switch to a green one.
You might be wondering why this is at the bottom of the list instead of the top when it seems it can do the most good. And it’s a valid question! But renewable energy servers are not as good as they’re made out to be.
Most green web hosts purchase renewable energy credits in order to claim they use “100% renewable energy.” And RECs are not perfect. They don’t actually stop fossil fuels from being burned and they don’t stop carbon from being emitted.
So while they’re a step in the right direction and RECs still fund renewable energy projects, it’s not the same as running your website on renewable energy.
Plus, green web hosts only solve half the problem. Most people accessing a site will be using electricity generated by fossil fuels, especially in the US as fossil fuels still make up about 60% of the grid.
Renewable energy servers also don’t help optimize your site which has tons of benefits. An efficient site is more accessible to those with slow internet speeds, they load faster which uses less energy, and they boost your SEO.
A renewable energy server doesn’t help your audience as much as the rest of the tips but it can be a nice cherry on top.
Overall, I hope these tips help you get started on your green web design journey!
Thanks so much for venturing into the Blue Raspberry Patch with me! I’ve enjoyed exploring these topics in longer form and sharing little berries of info with you all.
If you’re interested in learning more about green web design, check out these resources:
7 Days to a Greener Website Challenge: 100% free! Once you sign up, each day, you’ll get a task emailed to you with a video walkthrough + PDF guide to help. Works for any website platform. DIYers and designers welcome! No coding knowledge needed.
Green Web Design Course: Learn everything from the impact of the web on the planet to how to optimize all the details on a site. With seven modules, the curriculum gives a well-rounded look at what green web design is, why it’s important, and how to implement it in your work and marketing. No coding knowledge needed. Investment: $300 USD. Payment plans available!