-
-
-
Sustainable Web Design: Things you can do without asking your clients permission
I have been getting the question "How can I make websites more sustainable without my clients knowing" over and over the past few years, and now I have finally found time to sit down and answer it in a way that I hope will help many find a way to practice sustainable web design, even though their clients aren't ready to invest in the environment.
The good news I have for you is that you don't need a large sum of money to make a difference. There are many things you can do while you are designing or developing which will make a big difference in the long run, and these are the things we will be talking about in this article.
This list is actively edited as new topics surface. If you know of more ways to make websites more sustainable, please don't hesitate to comment them in the section underneath the article.
#1 Automatically compress images.
CMS (Content Management System) systems such as WordPress are widely used on the internet today, and if you are working with clients currently using this or similar systems, then you can implement a natural way for them to upload images to their website, and automatically compress them for the web.
Services such as TinyPNG are specialized in compressing the most used image formats without noticeable difference, and their service can be used when your client upload images to their website as well. They wont notice the difference, but the images they upload might be up to 70% lighter than the original.
The TinyPNG API have a free tier which allow you to compress 500 images per month completely free of charge, and after that it will cost a small amount. Most websites don't upload 500 images per month, so in most cases and for most clients this will be completely free. You can read more about the their API and the image formats they accept here in their developer portal: https://tinypng.com/developers
#2 Automatically resize images for the content
Another great way to optimize content behind the scenes is to automatically scale images to the page. So, if you for example need to add an image to a news list and the maximum width of each list item is 350px, then you can resize the image used to 400px.
Doing so will make much smaller images compared to using the full size images. In a list of +20 items you will see a massive difference in the amount of data required to view the page, and the result would be a mix of a faster page and also a more sustainable solution. Usually when I build card lists, puff lists or any other type of list containing images, I first analyze how they are used, and then I implement a function that will ensure images are sized perfectly. Lastly I add the loading attribute which will lazy load images (read more about that in step 16).
#3 Automatically convert images to WEBP or AVIF
Many things have happened since WEBP came out 10 years ago, but one thing that haven't really changed is that the majority still use JPG and PNG on the web despite the benefits of using WEBP and AVIF.
A great way to optimize behind the scenes is to automatically convert JPG and PNG images to WEBP. The format supports transparent backgrounds and even GIF. Just by converting to WEBP in lossless you will see smaller sizes compared to the older and more used formats, and if you further compress the image you will see great savings.
A newer study made by Fershad Irani in the Firefox Profiler shows that there are small benefits of using WEBP compared to JPG. WEBP will consumes less energy in the browser, and shockingly AVIF despite being a newer and even smaller file size will consume even more. This could be because of more advanced technology, but the test clearly show that the best format for now is WEBP. You can read the full test here: https://fershad.com/writing/power-consumption-jpeg-webp-and-avif/
#4 Optimize elements and section to be accessible and use optimized content
When you are developing you can use proper HTML5 syntax. This will ensure your code becomes more accessible to people using helping tools such as screen readers. A div with the class "Footer" will still be interpreted as a div. But if you instead use the HTML5 tag Footer, tooling will know that it is a footer.
Optimizing and increasing accessibility is an important step toward making the internet more sustainable. There are approximately 1.6 billion people worldwide with some sort of disability, and it should be just as easy for them to benefits from the internet as it is for the rest of us.
You can read more about the available HTML5 tags here: https://www.javatpoint.com/html-5-tags
#5 Convert fonts to WOFF and WOFF2
Fonts are often overseen, but they also account for a big part of the weight. If the fonts are in the TTF or OTF format, they will usually weigh from 350 kilobytes and up. But there is a way that you can reduce the size with 7-10 times, and that is by using the newer WOFF2 format.
According to CanIUse, WOFF2 is supported in all the major web browsers except for Internet Explorer which no longer is supported by Microsoft: https://caniuse.com/?search=WOFF2. This means you can use WOFF2 fonts without worrying about whether some users wont be able to see them.
Any TTF or OTF font can be converted to WOFF2, and this can be done using one of the numerous services online that will do the job for you free of charge. The one I mostly use is called FontSquirrel: https://www.fontsquirrel.com/tools/webfont-generator. There you can both convert your fonts, and also remove unnecessary languages and characters.
#6 Cut down on animations and transitions unless it improves understanding
Animations and transitions are cool, but they can also ramp up the energy consumption and that way make your website less sustainable. I've tried many times visiting websites that would within seconds turn on the fan and make my Mac hot because of the resources it was using. Usually the websites looked amazing, but the downside is the increased energy consumption and also that many users with low-end devices would be left out because of the demand.
Animations and transitions are great to use when they improve understanding. But they should be used wisely, because if done wrong it could worsen the experience.
#7 Add server caching
There can be many reasons why the energy consumption would increase on a server, but an example could be when getting a list of blog posts from the database and sending it to the front end. Every time that someone is visiting the page, this would have to be done. But by adding server caching you would only have to get the blog posts from the database once in a timeframe of 10 minutes for example. So the first time someone is visiting the page the server will request the posts from the database, format them and send them to the front end. But the next time it will take the already formatted list from the cache and send it to the front end.
This form of caching is easy to add, and can save your server lots of computational energy if done correctly. You could add this form of caching to calculations or statistics that are calculated by the server.
#8 Add service-worker caching
Service-worker caching is a very powerful form of caching, but it becomes more complicated. If you are running an online web application with returning users, then you can cache files and images in the users web browser to reduce the data consumption and data transferred every time they login.
So, let's pretend that you own a cake selling business where users can sign up and create their own web shop. Each shop will show a picture for each product, and every time you navigate to the shop you will download the images again. But if you add a service-worker cache you have the option to cache those images in the web browser, so that next time the user is logging in they are retrieving the images from the browser cache instead of the website.
#9 Load static content or content that only updates once in a while via localStorage API
Using the localStorage or sessionStorage browser API can be quite powerful if done correctly. A while back I developed a function that allowed me to store API data in localStorage and also add an expiration date. This meant that users only had to ask for data once in a timeframe, and if they refreshed the page the data would come from localStorage instead of the database.
When using this approach you will have to think about how to handle when data updates and when data needs to be available to the user. Loading a chat history from localStorage is not so useful because new messages needs to be available instantly. But a list of blog posts for example wont have to change within a short timeframe, so this type of data can be cached for a period. To use this method effectively you will have to analyze your application or website to find right data to cache and for how long.
#10 Use a lightweight web server
This one can sometimes be helpful, but you will probably not always be able to choose the web server you want since it depends on the other technologies in your stack. But if you get the chance to choose, choosing a lightweight server that requires less RAM and CPU is preferable. This way you can reduce the idle percentage of your server which could help data centers host more websites on a single server.
#11 Host the website close the user-group/visitors (If the grid is green)
When it comes to the hosting of a website or web application you can really make a difference by choosing a hosting company running on renewable green energy. You should not be choosing companies that only throw money at the problem by investing in renewable energy. Instead you should choose data centers that actively run on renewable energy, since that will cut your emissions.
Choosing the right company can be hard because you will have to ask yourself where your users are located and what data center is the greenest. Besides that you will also have to comply with numerous laws around the world such as GDPR if you or your users are residing within Europe.
#12 Block spammy bots
This is something that can really change the energy consumption of your server, because on the internet you will find lots of bots that are buggy or intentionally spam websites. A spammy bot can for example unintentionally spam a website while it is checking for something, and others will bombard your website with queries to check for vulnerabilities.
If you keep track of your website statistics, then you will be able to find suspicious IP addresses and block them from entering your website.
#13 Add DDOS protection
Writing a DDOS protection from scratch can be quite hard, but there are ways you can add this protection to your website or application without much work. If you add your website to Cloudflare you will out of the box get DDOS protection.
What happens is that when someone browse to your website it will first go through Cloudflare, so if you are being bombarded with requests it will be an attack against Cloudflare and not your website server. You can read more about Cloudflare's free DDOS protection on their website https://cloudflare.com
#14 Limit the number of times an API can be called from the same IP within a timeframe
API requests can be abused in many ways. One way is to brute-force access to accounts on a website or application, and another is to increase the energy consumption and possibly take down a service.
To both secure your users and to better secure your server you can add a limiter to certain API calls. This will allow IP addresses to call an endpoint a maximum number of times during a timeframe of for example 10 minutes. Once the limit has been reached the user will have to wait till it renews.
#15 Add the lazy loading tag to images
This one might seem small, but it can make a big difference in how much data your visitors have to download when they visit your website or application. Adding lazy loading to images used to be time consuming and it required the use of JavaScript to function. But now you can do it by simply adding the loading attribute to your image elements and set them to lazy.
Using the lazy attribute will not fade in the images, but it will stop them from loading until right before they scroll into view at the users device. Without this attribute users will download all the images on a page even though they never scroll to the bottom, but with the attribute they will only load the images near the viewport.
Conclusion
Thank you for reading this article, and I hope you enjoyed it. Please share it with your community to spread awareness and to help making the internet more sustainable.
The list provided in this article will get updated when more tips and tricks surface. If you know of more helpful things to do behind the scenes, please share them to spread as much awareness as possible.
Author
Michael Andersen
Michael Andersen is the author of Sustainable Web Design In 20 Lessons and the founder of Sustainable WWW (World-wide-web), an organization teaching sustainable practices. With a passion for web design and the environment, Michael solves puzzles to make the internet more sustainable.
Michael Andersen
Michael Andersen is the author of Sustainable Web Design In 20 Lessons and the founder of Sustainable WWW (World-wide-web), an organization teaching sustainable practices. With a passion for web design and the environment, Michael solves puzzles to make the internet more sustainable.
