Skip to content
Home » Blog » The chaos of greening up my blog and what I learned from it

The chaos of greening up my blog and what I learned from it

Let me show you how I cleaned up my WordPress blog (yes, this website). You’ll learn what actions I took, the messy results, and the lessons learned. This is a good read to help you avoid making the same mistakes I did. 

A brief background 

My blog, previously called “The Craft Minded,” was born in 2018 as a hobby project. I wrote about coffee paintings, artwork, my cat, and my low-waste lifestyle. It is my online home, a place that collects my articles, reflects my interests, and connects with others. Now, it has evolved to become a mix of a blog and a portfolio.

I experiment with a lot of things on my blog. For example, I changed themes, tried out plugins, linked it with other software, and recently, applied sustainable web design principles. 

What’s the goal of improving my blog?

To reduce the website’s carbon emissions. Before the improvement, it was carbon-heavy (result shown in red.) I wanted it to turn cleaner and leaner, where the result on the carbon calculator will show in green like the image below:

Image: Website carbon clean result (Gift's blog)
This is my goal of cleaning up my blog (clean energy source and lightweight page)

What actions did I take? 

Action 1: Measured website’s carbon footprint

I measured my website’s carbon footprint and analyzed the results and suggestions. This first step helped me pinpoint where I was in the beginning stage. I used Website Carbon Calculator and Ecograder as measurement tools. My page was “dirtier than 50% of web pages tested.” The main solutions are to move to a green hosting company and reduce page weight.

Image: Website carbon dirty result (thecraftminded blog)
The screenshot shows my blog’s carbon emissions before the improvement

Action 2: Moved to a green web host

I moved from Bluehost to Dreamhost. At that time, I had an old portfolio site with Dreamhost (a green host on The Green Hosting Directory), while my blog was on Bluehost (a traditional host.) I saved the domain name cost by replacing my portfolio site with my blog site and ditched the blog domain name. So, my blog’s domain name changed from “thecraftminded.com” to my established nickname and first name, “gifttanakan.com.”

Image: reasons of changing web host
The screenshot of me chatting with a Bluehost agent about why I moved my web host

I searched for a way to move my site content to Dreamhost to replace the existing portfolio, but I couldn’t find a solution that addressed my situation. I was also too impatient to keep looking. So, I moved my site content manually. I copied and pasted articles one by one. I barely have any comments from readers on my blog; as a result, it made things easier to manage.

Action 3: Installed plugins

I installed W3 Total Cache and Smush plugins to help with optimizations. I learned about these plugins through reading Tim Frick’s Designing for Sustainability and Tom Greenwood’s Sustainable Web Design. W3 Total Cache helps cache files on the user’s browser, while Smush compresses images and performs lazy loading. Both made my website load faster and more lightweight.

Action 4: Changed theme several times (mistake)

My site’s emissions didn’t go down despite using the plugins to reduce them. It actually increased after moving the site. Without inspecting the page weight carefully, I guessed lazily and randomly. I assumed it could be because my theme was heavy. So, I changed the theme several times, but it didn’t solve the problem.

Image: Website carbon dirty result (Gift's blog)
The screenshot shows my blog’s carbon emissions increased

Action 5: Inspected page weight

I inspected a page weight on the Chrome developer tool and discovered the cause of the problem. The way I manually moved the site content bypassed most images from being optimized by Smush through the media library. Most of my copy-paste images were on the posts, not the library.

Image: Inspect unoptimized image on Chrome Dev Tool
The screenshot shows the unoptimized image on Chrome Dev Tool with the size of 204kB
Image: Inspect optimized image on Chrome Dev Tool
The screenshot shows the optimized image from the library with the size of 177kB

Action 6: Uploaded media to the library

I uploaded all the images into the media library, which were compressed properly by Smush.

Results

Result 1: My blog passed all low-carbon measurements

Moving to Dreamhost cleaned up the energy source of the website and W3 Total Cache and Smush plugin compressed the images effectively. What a gorgeous result!

Hit the goal of cleaning up my blog

Result 2: My blog loads much faster

W3 Total Cache makes the website load faster by caching files on the user’s device without fully loading in every repeated visit. Smush compresses images and applies lazy loading on each page. My website went from 5-6 seconds to 1-3 seconds loading time.

Image: Gift's blog homepage performance
The screenshot of my homepage’s performance
Image: Gift's blog homepage load time
The screenshot of my homepage’s load time

Lessons learned

Lesson 1: Don’t be sloppy

My sloppiness of manually moving the web content by copying and pasting saved me some time upfront, but it wasted much more time later on. If you want to move your website, do it properly. Here is a list of guides on how to move your website in various situations.

Lesson 2: Focus on fixing the main problem

When I looked at the weights of the resource on the Chrome developer tool, I got distracted by other factors that wouldn’t make much difference, such as the script files from the website theme. I wasted so much time testing different themes in hopes of finding the perfectly lightweight theme. But, no matter what theme I changed to, it didn’t lighten the page weight at all. The main problem was the uncompressed images, which were so evident on the developer tool that they were the heaviest.  

Summary

Now that you learned what it took for me to clean up my website. You can find the list of tools I used right here. I’m so happy every time I see that bright green result from the calculator yelling with pride that my blog is clean. However, this is not a one-time win. I just set my blog up in the right direction and will continue to apply the design principles throughout the blog’s life cycle. That’s the goal of sustainable web design to begin with. I’d encourage you to implement the design approaches on your project and share with me how it goes (tag me on Twitter, @Gift_Tanakan)

Leave a Reply

Your email address will not be published.