I recently read about how Low-tech magazine made their website entirely solar-powered. To the point where their site even goes down in cloudy weather.
That is hardcore.
I applaud their initiative and the message they’re sending about increasingly bloated websites and how they’re harming the environment.
However, the “down when it rains” model doesn’t work for most businesses, who need their site to always be available. Luckily, there are other, less-extreme ways to get your website to be more environmentally friendly.
But first, let’s take a look at what kind of impact websites are even having on the environment.
Data centers massive carbon footprint
When you visit a website in your browser, the server it’s sitting on has to deliver images, videos, text, and files that are stored in their data center to you, on demand. It takes energy to deliver every piece of data and every file.
Now think of the the millions of websites and the billions of people trying to access websites and requesting billions of files every day. That requires a whole lot of energy to power those data centers.
In fact, the amount of energy being consumed by data centers “are set to soon have a bigger carbon footprint than the entire aviation industry”. Crazy, right?!
Another fun fact: Did you know that the internet doubles in size every 2-5 years? So there’s that to contend with, too.
Bloated web pages
The average web page today is 56% heavier than it was four years ago and it’s continuing to rise.
If you’ve ever been on a CNN post, you can get a sense of all the excess that can bloat a webpage. Here’s my experience of trying to view this post about a bottle of whisky going for $1.1 million at an auction.
I click on the post from the homepage.
I start scrolling down.
An ad starts following me down the page.
The news-related video about the whisky on auction starts playing on the side as I scroll down.
The video finishes but then another one starts immediately playing.
I scroll down and see a literally never-ending list of news items, interspersed with paid content that has my city in the title or diaper ads for my little one that leave me feeling too-targeted and stalked.
Then I try to leave and there’s a huge popup asking me to subscribe to the newsletter.
At this point, I’m not sure what’s crazier – the sensory overload on this webpage or a bottle of whisky going for $1.1 million.
Get me out of here.
And that’s only the interactions happening in the front-end. The backend has dozens of scripts tracking my every scroll, and click.
A lot of computing power is needed to serve all this extra “stuff” to the end user. Multiply that by thousands or millions of content-hungry users.
In addition, these bloated websites take longer to open, especially on mobile, which means we’re draining more battery from our phone and need to charge more often.
To top it off, all of these extra features that are taking over the site to “enchant” users, are most likely annoying them. So before adding some cool new widget or extra tracking tool, consider the ramifications both to the environment and to the user.
For those who want a website with a reduced energy footprint, there are many ways to make your website more efficient without having to go to solar-powered extremes.
The key to making your site have a lower carbon footprint is by optimizing it which will help reduce the amount of energy needed to load your site.
A happy byproduct of a green, optimized website is that it will load faster, which is great for your SEO and for your visitors!
Before you start optimizing, you can get a benchmark of your current annual carbon emissions of your website with this Website Carbon tool.
And you can track your site’s “bloat” with the Page Weight tool.
Gimme the tips already
And now for the meat (or seitan) of it, here are some powerful ways to optimize your site, making your site more efficient and environmentally friendly.
1. Make your site static
WordPress sites, or pretty much any open source CMS based website, are dynamic and fetch data for each web page from a database. Each time data needs to be fetched, more computing power, or energy, needs to be expended. However, with a static site, your website is pre-rendered, so there is significantly less computing power needed. There are even services that convert your site to a static version of itself and let you keep using your beloved CMS in the backend (I’m lookin’ at you Strattic).
2. Image Optimization
Images are usually the biggest assets that need to load on a website. You can use tools like Pingdom to see what resources are taking the longest to load. Make sure you’re optimizing your images for the web. You can use tools like Short Pixel to help automate the process.
3. Use an eco-friendly hosting provider
You can check if your host uses green energy here: Green Web Foundation (GWF). “Green” is defined as a hosting provider who either uses renewable energy or uses standard electricity but offsets their emissions. This definition is a bit murky so feel free to be in touch with your hosting provider for more clarity.
Caching creates a static copy of your site so that people who visit your site a second time will have a much faster user experience. There are a lot of caching tools such as WP Rocket. Just be careful when you set up your caching plugin because if you over-cache, it could mess things up such as causing your CSS to break and your site to display quite funkily.
At Strattic, we don’t use caching plugins since we convert sites into a static version of themselves, which is the ultimate cache.
HTTP/2 allows browsers to use multiple TCP connections to issue parallel requests, thereby requiring less http requests. You can think of it like a highway with more lanes for the information to pass through. The result is your site being faster and more efficient. Make sure your hosting provider offers HTTP/2.
You can check if your site is using HTTP/2 with this tool.
6. Plugin and Script Efficiency
It’s important to rummage through the scripts and plugins you have added over the years, and get rid of as many as you can, including unneeded scripts and inactive plugins.
Try to move as much plugin functionality as possible to functions.php instead of using plugins so that you are utilizing more efficient code. You can use the P3 Plugin Profile plugin to check which plugin is using the most resources with their handy pie chart. Just remove the plugin after you use it since it’s really outdated.
Keeping your site lean and mean in the backend will help reduce the amount of energy needed to power your site.
7. Coding Efficiency: Minification and Concatenation
Instead of calling ten separate JS or CSS files to perform a certain function on your site, you can create a combined version that is more efficient and helps your site load faster. There are lots of caching and optimization plugins, like WP Rocket that offer minification options. You can also use CSS preprocessors, which have many other benefits besides optimization.
GZip is a form of data compression that can help load time by compressing your assets so that people visiting the site will be downloading smaller files. It can compress files up to 70% for faster delivery. However, don’t get carried away and compress already compressed files – you may run into trouble and end up with bloated file sizes!
To see if your site is using Gzip, you can use this Gzip Compression checker tool.
9. Theme Diet
Many ready-made themes offer way more features than you could ever possibly need. Make sure to run a new theme through the Query Monitor plugin to make sure it doesn’t have too many database queries, which can slow your site down.
To wrap up
Making your website environmentally-friendly isn’t only good for the earth – it’s also good for you since it generally means your site is faster and more user-friendly. Implementing some or all of the above tips can help you to be the proud owner of a site that does its bit for the green.