Have you ever been to a blog with a crappy design but has excellent content? Most of the blogs I follow are in this category.
I'm not trying to reduce the value these blogs bring through their excellent content. But it makes me wonder how much faster they would have grown if they put more time into thinking about how their blog looks and performs.
Ever since I launched Money Stir, this thought has been at the top of my mind. Especially considering how crowded the personal finance blog space is, I was concerned about how difficult it would be to do well and how long it would take to start making money from the blog.
A few weeks ago, I implemented a new WordPress premium theme on Money Stir. What I had been using before at point left me feeling “blah.”. I felt pretty good about my content direction, but my design and site functionality left a lot to be desired. And given the number of plans I have for this site, I didn't feel like the design was communicating a brand I was proud of.
Take a look at the follow-up article called Stop Being a Cheap Ass: Spend Money on Your Blog!.
And Then I Started Over
I was happy with how the new website theme looked using the new premium theme, but when I took a close look at the site's performance, there was a ton I noticed that was slowing down the blog performance.
I've been a PHP developer for 15+ years, so I'm comfortable working with website code and WordPress. But using a premium theme, I was dependent on their code for the site. I could implement hacks to tweak certain things here and there, but if I wanted my site to be BLAZINGLY FAST and have full control over the theme, going with a premium theme wouldn't work long-term.
So what did I do right after launching the new WordPress premium theme? I started creating a new WordPress theme from scratch.
When I wrote the article talking about my new theme, my original plan was to hold off until later this year. But once that “itch” started, I couldn't ignore it for long. I focused all of my free time on creating this new custom theme, and it took a massive amount of time.
There were some nights during the weekend. I stayed up working until 4 AM. There were points where I wanted to bang my head against the wall in frustration. But I worked through this pain and what you see now is the result of my efforts.
Taking Advantage of My Strengths
Being a web developer and knowledgeable about building and putting together websites gives me an advantage over most personal finance bloggers. I could settle for something that was “blah,” but why not set my site apart from the many incredible personal finance blogs out there?
I didn't want how my blog looked and performed to be the primary reason people visited the site. But I'm also learning that sites that can do all of the following grow faster and larger:
- Great content
- Awesome logo
- Easy to navigate website
- Loads fast
The sooner I can achieve these goals, the more my readership should grow. When people enjoy your blog content AND love how your website looks and performs, they are more likely to want to come back and browse your site.
Why would I wait to do this and miss out on all of that growth potential? Once you already build a solid website foundation, that frees up time to focus on what matters most: content and blog marketing.
What I didn't know at the time was how much work it would be to re-create the site as a custom WordPress theme.
Creating a Custom WordPress Theme is Hard
The benefit of going with a premium WordPress theme is they spent a ton of time figuring out how everything comes together. The best themes have a lot of options to customize the look through admin config areas. WordPress has created systems to make this easier to develop.
Most premium themes are set up for people who have little to no website development knowledge. And I think this is a huge benefit.
But premium WordPress themes also come with some downsides:
- You are locked into their codebase.
- The cost of the theme includes things you will not use or need in the future.
- Since the theme has to support many different features, your site will take a performance hit.
- Customizations are harder to make in the theme.
- You have to worry about which plugins conflict with your premium theme.
- You run the risk of having a similar design/layout as other sites that use the same theme.
I thought the site looked fantastic using the new premium theme I purchased. It was easier to manage, and it complimented the new website logo. But I wanted the site to be blazingly fast, and there were things I wanted more control over.
I decided to try to get the site to look close to how the new premium theme looked but re-creating everything from scratch. This allowed me to optimize the code and improve performance.
Did I waste $60 purchasing the premium WordPress theme? Yes and no. Since I am not a designer, the premium theme provided a solid design example of how I wanted the site. If I had started off creating a theme from scratch, I can guarantee it wouldn't look this good. I am not a designer, and my visual creative skills lack (to say the least). I'm much more confident in code.
The number of problems I encountered re-creating the site in a 100% custom WordPress theme was daunting. The part I struggled with the most was the CSS. Ironing out the placement for each element was difficult, and I kept getting caught up with minor details that would take hours to sort out. If I were going to do this again, I would try to cover the basics first and worry about the more detailed aspects after the base WordPress theme code was solid. This probably would have saved me 25% of the total time it took to implement the new custom theme.
For every element beyond basic styling or WordPress functionality, I either had to find a custom JS library to handle that functionality (like the sticky main navigation, mobile navigation, etc.) or create custom code that accomplished the task. The good news is that there are many useful libraries, but tracking down which ones had what I needed and wouldn't slow down the site was time-consuming.
Blog Website Performance
The main reason I decided to re-create a custom WordPress theme from scratch was to increase performance. Did I achieve this goal? Let's look at some numbers.
Using the Premium Theme
From a general level, the site with the new premium theme was highly performant. Looking at GTMetrix, here are the performance numbers:
- PageSpeed Score: 97%
- YSlow Score: 98%
- Fully Loaded Time: 1.8s
- Total Page Size: 677KB
- Requests: 28
These numbers were pretty impressive. But things were slightly slower than the theme I was using previously (granted, the site looked MUCH better and had more features). What made me consider building a WordPress theme from scratch was taking a close look at the waterfall tab in GTMetrix. Why were there 7+ different fonts being loaded? Did the site really need to load a 75KB Font Awesome file? Trying to optimize the site further at this point led me to create a custom WordPress theme.
Using the New Custom Theme
This is where things started to get exciting. If I created a new custom WordPress theme, I would have more control over what was loaded. Performance could be improved by removing what I didn't need. I was hoping I could get the site to load in under one second.
Not only did I hit my goal of having the site load under one second, but I decimated that number! Here is the new GTMetrix report using the new theme:
- PageSpeed Score: 99%
- YSlow Score: 100%
- Fully Loaded Time: 0.8s
- Total Page Size: 413KB
- Requests: 24
These numbers are when the home page fully loads, but they will start to see the page's render before that point. I'm thrilled with the snappiness of the site. In fact, it exceeds my expectations by a significant margin. There might be ways I can further optimize certain aspects of the code, but I think the biggest improvement I could make going forward is switching to a faster host.
WPEngine is fast for a shared hosting provider, but I would like to move to something beefier when the site picks up steam.
WordPress plugins can make a huge hit on the performance of your site. Many of them add CSS and JS to the frontend that will bring your website's performance to its' knees!
I took a detailed look at every piece of JS, and CSS added from the WordPress plugins I was using. In some cases, I decided to re-create the plugin from scratch to improve performance. I also removed some JS and CSS that was being added by certain plugins.
This is getting into hyper-detailed performance work, and it is hard to figure out what you can remove and what you have to add to make things work. Given I do this kind of work almost every day, I thought the challenge was worth it. But it was still frustrating.
I highly recommend using WPRocket for a WordPress caching plugin. The JS and CSS minification and file combining functionality is massively beneficial. In most cases, you should enable the module and easily set things up without breaking your site. Their admin area is easy to understand and provides all the functionality I am looking for.
What benefits does loading one second faster have for your WordPress blog?
Having a website load one second slower doesn't seem like a big deal, right? Wrong! There are studies out there that indicate slow websites lower visitor engagement and ultimately reduce sales. Even if you don't sell anything on your blog, a slow site will hurt your bounce rates.
As quoted in this article:
Amazon reported that for every 100ms extra delay (quite literally a fraction of a second) lead to a 1% decline in sales; a sobering thought.tidycustoms.net
Bloggers often ignore website performance too easily. “As long as I have great content, the site will grow.” That statement might be true, but how much do you want to slow your blog growth rate?
Also, blog performance is not something you can handle once and forget about. You have to continually check to make sure you aren't loading 400KB images when a 10KB image will work just as well. And these problems are not easy to solve.
But with that said, once you set up a solid WordPress theme with proper safeguards (like resizing and optimizing images) and be mindful of the new plugins you enable, you should have most of the work taken care of.
What has changed?
More than 90% of the site looks like it did with the premium theme, but there are a few exceptions. It is one thing to increase performance, but it is another to increase performance AND still keep your blog's general look and feel.
These are the main functional and visual changes compared to the premium theme implementation:
- The mobile menu looks different but behaves similarly to the premium theme.
- The home page no longer has a slider.
- I removed the parallax feature on full-page posts. I had implemented parallax in the custom theme, but the extra JS and how the images were displayed didn't seem worth the cost, so I removed that feature.
- The mobile experience for the site changed. Not only are things faster, but the website looks better with full-width images and less “cruft” on mobile devices. I'm getting a significant amount of mobile traffic, so this is a big deal.
- Every image on the site, including images in posts, are now lazy-loaded. This increased load times dramatically.
Here is how the website looks on mobile devices:
Should you use a premium theme?
If you are not a web developer, I highly suggest investing in a premium WordPress theme. Your site will probably load faster and look better, and your visitors will thank you. But you will want to spend the time finding a good premium WordPress theme that prioritizes website performance.
Having access to a bunch of features in a premium WordPress theme is great, but make a list of the features that are absolutely critical for what you need. It might be better to go with a theme with fewer features but everything you need, as it will most likely make your website load faster.
You may want to consider going with a custom theme for the following reasons:
- You are a coder or have experience with web development.
- Or maybe you are a self-learner and love tackling problems.
- You have extra cash to pay someone to create a custom website design and WordPress theme (make sure they prioritize website performance!)
What do you think about the new website? Do you think the time and money investment was worth it for Money Stir?