A few things have changed since writing this article. Updates coming soon. The information in this article is still accurate but from when I used Thesis 1. Subscribe to my email list and I’ll hit you with an update as soon as I have an update to how I do things now.
I’m not even going to lie. For about 36 hours, I was pretty obsessed with making my site load faster all because someone called me out publicly.
In a tweet, I told the world that SDavis Media was fully responsive. It was great news for me, because I had spent three stressful days before the announcement coding for responsiveness. I was proud of my work.
After a few positive tweets from my followers, I received a “mention” from a follower of a follower who had retweeted my announcement. Take a look.
— Mark I. Moore (@nwlinux) July 4, 2012
Whoa, buddy! Pump the brakes!
Sure, my site could have been a lot faster… but that wasn’t the topic of discussion. We were talking about responsiveness. How dare you change the subject and call me out!
Here’s the problem, though. He didn’t change the subject at all. He was right.
Responsiveness is not all about media queries and over-sized buttons. It’s also about content delivery and efficiency. If you’re viewing my site from your cellphone, you need the content to load quickly and not just be aesthetically pleasing.
Mark had every reason to call me out… and I’m glad he did.
So after three days of hard work (one day of coding and two days of meticulous tweaking), I was slapped in the face with another challenge… speed optimization.
How I Cut My Page Load Speed by 90%
First things first, you need to know where you stand. Instead of just checking for myself, Mark took care of it for me. I’m glad he did. You don’t have to go through that, though.
Here’s a great tool for checking your site speed within about 10 seconds (I hope).
All you have to do is enter your full URL and you’ll receive a quick snap shot of how fast your page loads, how many HTTP requests your page has, and much more.
Enter the full URL including “www” if it’s part of your URL. Http://sdavismedia.com actually redirects to http://www.sdavismedia.com which eats up more time. To reduce that time, just enter the full URL when conducting your test.
When the test is complete, you’ll see a screen similar to this one:
There’s more information displayed below the test results that show all of your HTTP requests, how much time each of these requests take, and more. This is just a snapshot.
Wondering what HTTP requests are? My buddy Alex will tell you all about them (and much more) with his Beast Optimization Series.
This tool was used to test my page load speed where I failed miserably for an average blog. Yahoo beat me by at least a second. Not cool.
So, I set out to fix that so I could show the world that I knew the true meaning of responsive web design!
Here’s what I did.
Dedicated Virtual Website Hosting
Yup… just like every new blogger, I started out using Bluehost for my web hosting needs. What’s the big deal? I didn’t have very many readers. I didn’t have much traffic. WordPress setup was easy as hell. Why not?
Things were changing, though. My readership had picked up and I was becoming more and more concerned about the overall quality of my site… not just how it looked. Even two seconds of down time with the server was a big deal to me.
Mix that mindset with the tweet from Mark and I was ready to make a move.
Dedicated-Virtual Server from Media Temple
I signed up for the (dv) Dedicated Virtual 4.0 plan for $50 a month.
Let’s be real… you’re running a business, right? At some point, you have to start making investments. I had paid much less each month for certain results. I wanted better results. So, I started paying more. That’s just growth… and I like growth!
The great thing about switching to Media Temple and using their (dv) plan is that my business is now scalable. It’s a silly contradiction to have big plans for your business, yet you continue to build on a foundation that can’t handle much weight.
I stepped up to dedicated virtual hosting and I absolutely love it. No more shared hosting and my site began to load faster. Plus, I knew that as my business grew to where I wanted it to be, I would be ready for it.
That wasn’t it, though.
Content Delivery Network
This wasn’t an absolute must. However, I had toyed with the idea of using a CDN service for a while and I felt it was time to do just that.
I signed up for MaxCDN Content Delivery Network and it blew me away.
Basically, a CDN takes various elements of your website, like CSS files, images, etc., and stores them on servers all over the world. Yes, you read that right. Pieces of your site will be cached on servers all over the globe.
When someone in Japan visits your website, why not deliver your content from servers that are much closer to them? Doesn’t that make more sense? Why should all of your content be served from one location regardless of where your reader visits from?
Also, doesn’t that put more strain on your server, which slows everything down? Wouldn’t it be better if many servers did less work at a faster pace?
That’s the idea behind content delivery networks. They get your content to each visitor’s computer screen in the fastest, most efficient way possible.
So I signed up for MaxCDN and within a few minutes after setup, my site was loading at crazy speeds. I was thrilled.
If you’re wondering what was the point of switching servers if I was going to use MaxCDN, it’s because you can pick what your CDN service caches. I only have certain files using MaxCDN, while the rest are still served from my Media Temple server.
This is easily one of the best investments I have ever made to a website of mine. With no monthly fees, I signed up for the pay-as-you-go service for $40. That’s enough to cover the first 1,000GBs of data. Yes… 1TB. I love it.
That still wasn’t enough speed, though.
W3 Total Cache – Minify
This isn’t anything new. Most of you are already using the world-famous W3TC. It’s a great caching plugin and I suggest that everyone uses it.
I already used it as well. However, I didn’t always use the minify option. Why? Because it’s a ticking time bomb… that’s why.
I’m sure I’m not the only one who has used the minify option only to completely destroy my site, almost cause a heart attack, and send me to bed early that night.
Basically, the minify option allows you to combine multiple files into one. This allows the browser to read all of your site’s code quickly and easily while reducing the number of HTTP requests.
With your site’s design, a few plugins, and the WordPress core files, it’s not hard to find yourself with 5 or 6 different CSS files. Why, though? Wouldn’t it be easier on the browser to visit one file for all CSS? Of course.
That’s what the minify option does. It combines like files and serves all of the code through one file.
I asked around on Twitter why this happened. Here’s what Norcross, a well respected programmer and WordPress ninja, told me:
@sdavismedia its usually not needed. most JS you load is already minified. combining into a single file can make it work harder.
— Norcross (@norcross) July 4, 2012
So I left my JS files alone. No big deal.
The thing to understand is that each time your site has to make an HTTP request while loading, more time is spent. So, minifying files can reduce the amount of requests and also give the browser everything it’s looking for in one file. Awesome.
I still wasn’t done, though. I guess Mark really motivated me, huh?
I cut my plugins in half with Jetpack and plugin-ism
First of all, let’s clear the air about plugins slowing down your website. Plugins do not slow down your website. Poorly written code slows down your website. If the plugins you choose to use are written poorly, they will slow down your website. If they are written well, they will not slow your site down.
With that being said, how do you know if your plugins use the best coding practices? Unless you’re a coder yourself, you really don’t know. So, fewer plugins could equal a faster site… in a perfect blogosphere.
Keeping with that assumption, I set out to cut the number of plugins that had potential to slow my site down. To make that happen, I went through a few simple steps.
- I asked myself if a plugin was necessary for my site. If it was, I kept it. If it wasn’t, I scrapped it.
- Of the remaining plugins, I examined them to see if they did exactly what I need them to do or if they did 40 different things, 39 of which were useless to me. I got rid of the plugins that did more than I needed and replaced them with plugins that focused specifically on what I needed.
- I made it my goal to be able to see all of my plugins on the screen without scrolling. This became an obsession.
Here are the results of my plugin elimination campaign:
Only nine plugins! I can’t really get too excited about that, though, because I don’t really even need all nine of those. Display Widgets, WordPress Popular Posts, and OpenHook are just me being lazy.
Why I use Raw HTML is explained in my article about Aweber form formatting. WP-PageNavi is for my homepage pagination. It’s just convenient. What more can I say?
The key to this transformation lies in the Jetpack plugin. Because of Jetpack, I was able to get rid of a few plugins and use something that is heavily promoted by WordPress itself and super cool.
In the process, I was able to drop:
- DISQUS Commenting System
- WP – Statistics (for site analytics)
- Fast Secure Contact Form
- Social Sharing Toolkit
Jetpack has built-in, easy-to-use features that handle all the above. Not only that, it also has other features like:
- Security and Backup Services
- URL Shortener (I wrote about it here)
- Blog Subscription Options
- Shortcode Embedding of Popular Media
- Enhanced Image Galleries
- And plenty of other features
If you’ve heard the hype about Jetpack, it’s safe to believe. I’ve seen it called the mother of all plugins. I don’t really know what that means, but it’s awesome.
Attention Thesis 1.x Users! (Look Down)
Jetpack’s commenting system is great. However, you’ll run into a very small issue when you first install it in the place of whatever commenting system you were using. It will not display.
You will not lose any comments when this happens, so don’t freak out.
Girlie from the DIY Themes Forums was all over this issue, though. The fix is about as easy as a fix can be. All you have to do uncheck the Comment Form selection in your Thesis Design Options is add one simple line of code to your
Boom… your Jetpack comments are live.
Attention Thesis 1.x Users! (Look Up)
I should also add that if you are switching from DISQUS to Jetpack, you should make sure all of your comments have been synced to your site before you make the move.
To do this, go to WordPress Dashboard => Comments => DISQUS => Click the “Advanced Options” in the top right corner (at the time of this writing) => Scroll to the bottom of the page and look for the Import/Export section.
There, you will see a button labeled Sync Comments. Click that button.
Because DISQUS comments are hosted with DISQUS and then synced with your WordPress installation afterwards, there can be a short delay between those two processes. So you’ll want to do one last sync to import any comments still in transition before you make the switch to Jetpack comments.
Too easy. Still not done.
Lastly, I compressed every image on my website. Well, not every one of them, but definitely all of the ones that I uploaded on my own.
You’re probably thinking it must have taken a while. I have news for you. It did.
That’s okay, though.
A few weeks ago, my buddy Alex published a post on the DIY Themes Blog about speed optimization. He mentioned the importance of compressing image files to reduce the server load. I listened.
In the comments, a life saver named Daniel Clark provided a great suggestion on how to optimize all of the images on your site in one process.
In response to one reader saying that she had very many images on her blog already and she didn’t know what to do to get them all optimized, Daniel offered this advice:
I recently went through this myself, and I figured out the best way to handle it. I’m on a Mac, so you’ll need to find a Windows equivilent if you’re not, but what I did was download Image Optim (imageoptim.com) and install it. Then, I downloaded all of my images – just the topmost folder, keeping all the subfolders intact. Once it was downloaded, I ran Image Optim on the entire thing. It took a while, but it was completely hands-off. Once it was done, my average file size was 30% smaller with no loss in quality. I simply uploaded the entire folder back to the web server, overwriting the existing files. Bingo – smaller images for my visitors. From now on, I just right-click an image on my desktop and scrunch it before uploading. Single images don’t take more than a few seconds in most cases.
Let me tell you… that was golden advice.
Then, with the file structure still intact, I was able to simply drag and drop the entire folder into the ImageOptim program. When it was all said and done, every single one of my uploaded images had been compressed at an overall rate of 32%.
I uploaded the compressed images (the entire “uploads” folder) back to its proper location and boom… all of my images were compressed.
As Daniel suggested, each image I’ve uploaded since then has been compressed before uploading. I may have skipped one or two.
Okay, I think that’s it now.
I’m sure you’re dying to know how fast my site is now. If not, I’m going to show you anyway.
From well over three seconds, I was able to cut my homepage load speed by 90% to just over 0.3 seconds.
I’m going to have to go with a big, fat “awesome” on that one.
Not only did I increase my page load speed, but I also reduced my HTTP requests by over 30% and reduced the page size by 50%.
Not only is my site blazing fast, but I can truly say that it is responsive now. Ultimately, the goal of responsive web design is to deliver content to any type of device in an extremely efficient way. Without focusing on page load speed as well, have you really made your site responsive?
Go ahead and run your own tests with Pingdom Full Page Test. Let me know in the comments where you stand.
Then, we can talk about what to do to make your site faster… responsive or not.
— Sean Davis (@SDavisMedia) July 15, 2012