Reclaim Open “Your website is a slow, bloated, carbon-belching monstrosity” presentation details

This was a 15 minute presentation at Reclaim Open. I botched the timing because I didn’t put in enough timed practice. I would have been better off reading the blog post that generated the presentation and led to the creation of this page for our environmentally-focused Digital Detox.

Why work on energy-efficient websites?

I wanted to be honest here. We aren’t going to make any difference in global energy usage. The number of websites we influence, the audience scale, and the amount of energy we will save is tiny. I want to make sure I’m not taking part in something similar to the BP-funded carbon footprint scam. There’s a good chance that one round of AI training would more than erase any positive energy savings I could create over my entire life.

However, there are lots of reasons to do it anyway.

• Energy-efficient sites tend to be fast sites and fast sites tend to be simple sites. I’ll likely mix those terms throughout this post because they tend to blend in my head . . . fast = energy-efficient, simple = fast. Simple sites are more accessible to screen readers and other accessibility software.
• Accessibility also has economic aspects. If you care about people using phones and being charged for data being able to access your site. Make it small. Make it efficient. Not everyone has unlimited data plans.
• People like fast sites. No one wants a slow site. There is a reason that Flash loading pages are not remembered fondly. There is all the data you could ever want on people leaving sites that are too slow.
• Making something efficient forces you to really think about what matters. This helps streamline navigation. It helps streamline purpose. Too many sites resemble this Swiss Army knife.
• I also just like to do things well and design constraints (as was frequently referenced during the conference) often help me do that.
• And while it won’t impact global warming in any significant way, it is something you can control. It won’t create additional harm. It feels like the right thing to do for me.

Imagine a different world

In a fairly incredible coincidence, Bryan Alexander gave a great keynote immediately before my presentation and mentioned the site I hold up as the most impressive example of energy-efficient websites. It’s worth reading how they thought through remaking their website way back in 2018.¹ The commitment to go without giant batteries and to be willing to have the website go down if there was insufficient sun for too many hours is the kind of commitment that I love. You don’t have to make the sacrifice, as this Swarthmore solar server project shows, but I feel it proves a certain level of commitment. It’s also beautiful to see how they turned design constraints into an aesthetic that is attractive and that powerfully reinforces their message across the site.

Common causes of slowness and bloat

You can look at how the size of websites has changed (at least since 2011) over time across a variety of aspects. It’s a pretty good index to the things that cause problems.

“This is part of a regrettable trend, made possible by faster networks, of having ‘hero images’ whose only purpose is for people to have something to scroll past.”
The Web Obesity Crisis

• Media – Big giant hero images, video content, etc. I’ve definitely been guilty of this and on this very blog. Seeing it play out on our Domain of One’s Own installs as people upload giant phone pictures, videos, huge Unsplash images . . . and end up using all their storage has made this very real for me.
• Requests – Each time the website has to load media, custom fonts, external css/js, ads, tracking scripts, etc. things slow down. This can get crazy fast, especially on WordPress sites with lots of plugins.
• Embeds/Ads – These can be pretty ugly in terms of being their own entire web pages inside your page with all the same problems I mentioned above only you don’t make the choices and it’s easy not to think about what other people are doing when you embed that video/tweet/toot.
• Libraries – People will use large CSS and JS libraries while using very little of the overall framework. It’s a bit like taking the overhead of driving a school bus when you have only one passenger. Or maybe it’s like buying the giant Swiss Army knife mentioned earlier, but only for the corkscrew. You end up with an inferior tool with tons of negatives given the scope of your goals. I’ve been guilty of this as well. Many is the time I’ve used Bootstrap just for the mobile layout patterns.

Every Mastodon Toot (embed) loads React. It loads Font Awesome. It loads two version of Roboto and it self-hosts all of those.
The 10MB Blog Post

Look in the mirror

There are lots of ways to look at site speed because it impacts SEO in Google-land. There are sites like Pingdom and Google’s Speed Insights. You can also use inspect elements in the browser of your choice and look at the network tab or performance insights. I tend to just refresh the page when in the network view to take a look at things. That gives me a quick look at total requests, total size, and the load time.

I did this on Facebook and Instagram for this presentation and really was astounded. I highly encourage you to take a look. These endlessly scrolling, media-heavy sites load astronomical amounts of data and encourage energy-intensive viewing. It’s really grotesque. I could probably save more energy by never going to those sites again than I could by removing every website I’ve ever made.

There are also some sites that attempt to correlate your site with a carbon footprint²

Things you can do

Depending on your role and technical knowledge there are different things you can do.

Considering when you use media and the size of that media is something everyone can do. In WordPress, plugins like Imsanity can help make image re-sizing happen automatically.

Consider when you add external request to your site and for what purpose. That can be tricky in WordPress as certain themes and plugins will do that more than others. Taking a look at the impact on requests after activating something new is a good idea. Plugins like WP Super Minify will condense, cache, and combine CSS/JS from other plugins. That’s more treating the issue than addressing the cause, but it’s better than nothing.

Consider whether your site needs to be a CMS like WordPress. Is it three or four relatively static pages? You have some other options for a site like this. Maybe it’s a great time to dust off some old HTML skills. Maybe it’s worth checking out some of the static WordPress hosting options that are popping up like Simply Static.³ Maybe you want to mess around with some headless options that allow you to keep using WordPress for editing, but display the data with javascript.

Simply being more aware is a big step. All these choices have impact on the people who use your site. There is no audience who will be angry that your site loads faster and uses less mobile data. Awareness tends to lead to changes of action and the pursuit of more knowledge. It can be a fun game to make the fastest site possible.