The Argument Against Pre-built WP Themes
Getting a custom WordPress theme can be both expensive and a great way to give your users a custom experience. But is it really necessary? I mean, there are some 10,000 themes out there already that can be purchased for a $100 or so, instead of shelling out thousands of dollars for your own theme. Why go the custom route?
Themes are Meant to Be Customized to Your Needs
When you buy a prebuilt WordPress theme, it typically comes with a lot of options. What background color do you want? What fonts? Do you want two columns or three? Here’s where the first and foremost issue arrives: yes, options are great, but every option you choose, there are 20 more that you aren’t choosing. That means a server full of a bunch of files you don’t need, that means a website that’s calling in a bunch of files you don’t need, and what you’re left with is all around bloat.
But most of all, even when a site comes with 50 options, not a single one of those was conceived specifically for your business. You’re getting the same options that are available to the rest of the world, and specifically aren’t getting the one option that’s best for you.
HTTP Requests
Every webpage calls various files to make it appear the way it does. An HTML file for the content, a CSS file for how everything looks, Javascript files for functionality, images, etc. This is key here, because a good developer will only load exactly the files you need, in order to keep the site loading quickly for users, but also for SEO, as search engines like Google have begun to judge how quickly a page downloads as relevant to where it gets placed in the search results listings. I’m working on a site for a client right now who, when I came on board, was already using a prebuilt theme called Alyeska. He was sold on it by a previous “web designer” (the guy actually was a theme configurer, but we’ll touch on that some other day) who told him this was the hottest theme around for SEO and getting the job done. It was garbage, but it isn’t in the overall plan right now to completely redesign and redevelop the website, so I’ve been going through the theme trying to get rid of bloat. This particular theme calls 11 stylesheets just to display it’s content. That’s 11 http requests, 11 files that need to download, and a ton of extra time wasted while the user decides if the wait is worth it or not.
Just consolidating these files into one, not even touching the CSS itself to optimize it (see below), I reduced the pageload time by over a second.
Filesize Bloat
Again, once you start providing users options, you need to start adding in code to support those options. More CSS calls. I see a lot of unnecessarily nested divs. Images that aren’t even close to optimized are abundant. I found one background image that was 1234px x 597px to be used in a div that’s only 960px x 140px large. Cropping it and optimizing it in Photoshop reduced the filesize from 17kb to less than 1kb. That’s just one file, and that file never should have made it into the production version of this theme in the first place.
Overview
Long story short, out of the box and customized, the Alyeska theme as implemented on my client’s site was throwing out some 78 http requests, taking over 11 seconds to load, and with a total file size of 937kb.
With the tweaks I was able to make, I reduced that to 43 http requests, 4.75 seconds load time, and knocked the total file size way down to 624kb.
And that’s just tweaking a theme that’s already too far gone to consider continuing to use on the site. No image sprites, no minimized CSS or Javascript files, no digging into the code to really streamline everything. I’ll be rebuilding the entire theme from scratch for the client in the next coming months, in an attempt to reduce that even further, and I wouldn’t be surprised if I halved it again building it from scratch.
So the bottom line is, having a custom site can easily double how quickly your site downloads (assuming it’s built by the right person), not to mention the benefits of having a site the experience of which is tailored specifically to your needs.
Up Next: CSS3 Gradients Make Having Multiple Button Backgrounds a Snap!