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:
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.
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.”
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.
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.
Action 6: Uploaded media to the library
I uploaded all the images into the media library, which were compressed properly by Smush.
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!
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.
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.
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)