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 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 future 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 followup 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 performance of the site, 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 wasn't going to 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 doing this 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 how to build and put 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
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 who 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, the more likely they are going 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 in 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 code base.
- 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, this means 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 ended up deciding 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 in how I wanted the site to look. 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 are lacking (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 parts I struggled with the most was the CSS. Ironing out the placement for each element was difficult, and I kept on getting caught up with minor details that would take hours to sort out. If I was 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 that was 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 there are a massive number of 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
Using the New Custom Theme
This is where things started to get exciting. I knew 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 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 render of the page before that point. I'm very happy 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 when the site picks up steam, I would like to move to something beefier.
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 the performance of your website to its' knees!
I took a detailed look on every piece of JS and CSS that was 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 in order 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 be able to 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 have a negative impact on 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 good. 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 new plugins you enable, you should have most of the work taken care of.
What has changed on Money Stir?
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 the general look and feel of your blog.
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
- 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 that has fewer features, but everything you need, as it most likely will 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?