Can you make your website green 🌳♻🌳?

Posted by on

Did you know that any website (including yours) produces CO₂ ⛽🤔?

A couple of years ago, we interviewed Xavier Vásquez: The Future of Research

Xavier shared with us that he was analyzing the electricity consumed ⚡ by every app we ran on our devices 💻📱.

Indeed, every swipe in Tinder or Bumble 💘 affects the environment 🌍, so be careful how often you swipe!

Coming back to the serious part, last year before COP 28 ⛽, I saw a considerable trend of companies and startups offering new solutions that could "help" you become more sustainable ♻.

I felt them like buzzwords since I saw even politicians moving from their previous roles to become "ecopreneurs" only to have a spot at COP 28. No harsh feelings, but I felt most of these initiatives were trying to profit from the UN event, not trying to save our planet.

That's why, I decided to wait until the hype was over to analyze some solutions. I was particularly curious about the ones provided for supporting websites' eco-transformations. Before 2017, I was mainly a backend developer, but after I got into web development heavily. That's why I wanted to test these websites' carbon footprint calculators:
Most solutions were not exactly very helpful since their suggestions were vague:
  1. Your website consumes 88% more CO₂ than the others we have analyzed!
  2. Your website produces 2.88g per visit! It's a bunch per year.
  3. Ups, you're not running on a Green Hosting!
  4. Your images or code are not optimized!
That pretty much summarized their results (if you didn't pay for an audit). I even requested an audit from another provider, and the results were not better.

Ecograder, on the other hand, gave me extremely valuable insights, Ecograder report:

Ecograder report

Potential improvements

Thanks to Ecograder, I learned the following 15 lessons:
  1. To make my website more efficient and beautifully crafted on every device, watch, mobile, tablet, desktop, etc, with minimal impact on its performance.
  2. To create custom Icon Fonts. It reduced the complexity of my website and improved its accessibility.
  3. To identify where I had some technical debt (unused code).
  4. To use modern code. I used too much legacy code that was convoluted and complex. In short words, heavy.
  5. To prioritize which Images I can compress and resize and which I cannot.
  6. To remove plugins that never worked.
  7. To use modern image formats like WebP instead of JPG or PNG only.
  8. To resize images to their appropriate sizes.
  9. To lazy load images that are not visible (to scroll to see them).
  10. To reduce the amount of calls to the hosting. I tried reaching a maximum of ten by combining some files into one.
  11. To organize my files in a logical way. Using inner functions and assigning the constants or variables in the right locations saved significant space in all minimized files.
  12. To use dark themes. I already used them since I like them more. However, it was a nice knowledge to acquire.
  13. To load scripts dynamically until the website is fully loaded.
  14. To lazy load images in internal invisible iFrames.
  15. To use CDNs (Content Delivery Networks) whenever you must use full 3rd party libs like Bootstrap or jQuery.

Can this be automated? It seems like a lot of work ...

Indeed, it's tons of work. Some parts can be automated, and some parts cannot be fully automated. Also, there are several considerations if you want to go as green as possible. Let's analyze some of them:
  • Ecograder can help you identify which JS or CSS files have extra code. CSS can be "cleaned" with PurgeCSS. But JS is more complex and might involve a lot of re-engineering. Also, most solutions will suggest you remove Google Analytics (I highly doubt you want to do it).
Google Analytics
  • Generative AI solutions like GitHub Copilot or ChatGPT might help you find code improvement points, but they are bulletproof and a small change can break too many things. I used them to refactor some sections of my code, but it was a mess.
  • Modern solutions like SPA (Single Page Applications) will be more efficient in new cases (mainly for complex websites) since you will make fewer calls to the server and the code is cleaner and nicer. However, if you didn't build your website with these solutions and your budget is tight, you must consider a different process. Additionally, SPAs are not always so great at handling unused 3rd party CSS files since you would need to do some magic with PurgeCCS.
  • PNG/JPG images can be auto-converted into WebP via APIs. Also, some APIs can resize and compress them automatically. So, you have the full package. However, you must be very careful with your brand images. Any image that is at the beginning, should never be pixelated. Heavily automated optimizations might damage them if you don't exclude them.
Unoptimized brand image
  • Changes in your website can be detrimental. No website is static, your brand evolves, you change over the years, etc. If your new image or text is large or heavy, it might have a bigger impact on your score.
  • Moving to a Green Hosting might have considerable consequences if you don't know its architecture. As a hosting user, you often have monthly or yearly contracts, so you cannot easily change it overnight. Additionally, what if you move it to a service that is not poorly accessible from a farther location? Let's say you have new clients from India, you are located in Sweden, and your new green hosting is in Ireland. Your website might become slow since it's far from India. This will be hard to optimize if you don't know about software architecture and your new providers don't have edge locations near India.
  • The calculators don't analyze each scenario. My website has four different user experiences: Desktop, Mobile, Tablets, and Watches. Each experience has specific UIs and optimized images. Therefore, I don't think my website will produce the same amount of CO₂ if a user accesses it from their mobile as from their desktop.
Is there anything else I did and didn't mention? Indeed, I "lazy" loaded sections based on the user's scroll location. However, this might or might not benefit your impact since the calculators analyze the full loading, not only the first impression. I see it as nice to have, but might not be as eco-friendly as we think. I might need to have a longer research to analyze its results.

This pretty much summarized my experiment to transform my website into a Green one ♻. The best result I got yesterday (Feb 15th, 2024) in the 1st solution:


I was able to move from D to B. The only greater improvement I could make was to switch hosting providers. However, that's something I wouldn't do. For now, GitHub is transitioning to be a Green company for 2025 and be carbon-negative for 2030. So, they are already on the way. I can wait for a little longer.

Hopefully, this article can help you in your Digital Ecotransformations and bring the best of them to your websites.

Update 2024-02-28:
I reached an A in the Website Carbon Calculator after some adjustments without a Green Hosting:

Website Carbon results

Update 2024-04-11:
I reached an A in the Ecograder after several adjustments without a Green Hosting:

Comments

Post a Comment