How I Cut My Page Load Speed by 90% Using Jetpack, CDN, Dedicated Hosting, and More

Many things have changed for SDavis Media since writing this article. However, everything listed in this article is still legit. Please follow the guide with improving your website in mind.

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.

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

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.

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.

Not this time, though. I was determined to use this great feature because I knew it worked… I just had to figure out how.

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.

You have to be careful with this, though. I was able to combine most of my CSS files. However, when I minified my Javascript (JS) files and attempted to serve them from the CDN, my page load speed jumped to well over 10 seconds! Thanks to the Pingdom tool, I could pinpoint the culprit, which was the minified JS file being served from the CDN.

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.

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.

Today, September 18, 2012, I finally managed to get most of my Javascript minified. It had to be done manually but it worked.

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:

Click Image for Full View

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:

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 custom_functions.php file:

add_action('thesis_hook_after_comments','comment_form', 1);

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.

Image Compression

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.

I downloaded the ImageOptim program on to my iMac and installed it. Then, I logged into FTP and navigated to root/wp-content/uploads and I downloaded the entire “uploads” folder to my computer.

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.

The Results

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?

This is definitely one of those areas that I need to give more TLC. Load times are definitely a factor in user experience. I like how you step up your game and I’m sure you’ll be rewarded for doing so.

I’m going to look into some of the services you’ve mentioned. We may also need to chat about a few of them so you can further explain all that file stuff lol

Wow! I can’t believe how slow it was loading in the first place. I’m thrilled to see the progress. That’s amazing.

I ran the test on your homepage and man… you have over 20 CSS files being loaded… and plenty of JS files too. There were over 100 HTTP requests which is what’s killing your load times.

I’m assuming a lot of those CSS and JS files are from plugins? You should try to manually minify some of them with W3TC.

On the W3TC options “General” tab (assuming you use the plugin), enable the minify option but set it to manual: http://sdvs.me/7

Then under the “Minify” tab, manually add the absolute URLs of all of those CSS files (they are all listed for you underneath your speed test results): http://sdvs.me/8

I would add the from least important to most important and one by one, clearing your cache and refreshing the site after each file is added… that way you can see if the infamous design explosion happens.

But still, man, that’s awesome progress! I’d love for you to update me as you make it even faster.

Awesome Post! I definitely have a ways to go, and I’ll be doing some optimization over the next week to try to get my load time down!

My primary site webmarketingcamp.com was at 3.91 seconds. Which isn’t awful, but certainly could use some work!

My secondary site that I’m still in the process of building (brockstaylor.com) is at 4.04 seconds and also needs some help!

Thanks for the pointers, Especially the image compression, I hadn’t heard of that tool before but I think it’ll help me out a bunch! Pingdom showed my image files as being the biggest factor in my slow load times!

Your load times aren’t awful at all. I think the main reason why I wanted to drop mine so far away from 3 seconds is because I had a 3G mobile network in mind. Since my site is responsive, as Mark pointed out, it was definitely necessary to consider all factors when optimizing the site for mobile.

I see your sites are responsive too. So it’s definitely something to think about.

One thing I didn’t add in this article is my use of image sprites. It didn’t change a whole lot but every little bit helps. Fewer HTTP requests definitely serve you well no matter what.

Let me know what kind of progress you’re able to make. I’d love to see how fast you can get them!

Enjoyed this bad boy. Speed huge these days. I find myself caring more and more about load time speeds when visiting others sites. So I especially loved the fact that I could breeze around your site with easy. It’s as important as design in consideration of UE.

The place is looking nice.

Hope the A is treating you well. I’m not jealous of the heat/humidity. But I am jealous of your access to the best BBQ in the world.

JK! Thanks for stopping by, man. I appreciate the kind words. I didn’t always care about speed but I definitely do now. Long overdue…

It sure is humid down here. Luckily, I’m a web developer and I don’t have to leave the house until I’m going to workout anyway. The BBQ is on point, though! Going to eat some with the DIY Themes team tomorrow!

Although I haven’t optimized my site entirely for speed right now this post was VERY interesting. Since I’m moving more of my existing clients online I should be sure their experience is great (fast loading).

Glad I found your site. I use the Genesis Framework but there is a lot of overlap in implementing design compared to Thesis.

Been looking around the site…man I stole so many ideas from you I feel like you should invoice me, lol. But foreal, there are some tools and apps you mentioned that I will be giving a try to see if they stay in my permanent toolbox.

We’ll have to chat about this overlap that seems to be deteriorating, lol.

Haha yea man there are lots of changes coming soon. I live down here in Austin (just moved here almost a month ago) and you know DIY Themes (Thesis) is down here. So I may have been given a little sneak peek at Thesis 2.0. That’s all I can say for now, though.

Your site looks great, man. I’m diggin’ the feature box. It’s very well put together and perfectly simply. Good deal.

Are you going to Blog World in January? Let me know… I’ll be there and it’ll be my second.

What a terrific post! Thanks for sharing all of these tips Sean. I especially liked your discussion on plugins. It’s true that plugins, in and off themselves, are not necessarily bad. Poorly written plugins are bad. JetPack is an excellent one, and I’ve been able to reduce the number of plugins on many of my sites by using it.

This was such a great post! The ironic thing is I’ve been looking around for a better web hosting. I was actually looking at the Dedicated Virtual Server from MT a couple of days ago. I’ve been contemplating between: VPS.net, site5 or Media Temple…Thanks for the Jetpack plugin reminder! I completely forgot about it.

Thanks, Kevin! I’m glad you found value in the article. I switched the MT a month or so ago and I don’t have any complaints so far. Everything is great. I can’t exactly how much it has boosted my load times as I implemented all of those other things at the same time. But I do know it’s ready to handle growth… and that’s definitely a plus.

Let me know when direction you go in and if you need any help with Jetpack!

I’m so glad I learned all of this stuff. I have already applied it to other sites and I get great results every time. Be sure to let me know how it works out for you. We might be able to do a case study for another project I have going on.

Hi Sean,
Great work – I just tested my site and it came in at 2.17s load time, so I got a bit to do…
I checked yours too, seems it’s now at 1.85s load time at the moment.
I am in the UK, should that make a difference to your load time?

It definitely matters where you visit from. Underneath the box where you palce your URL, test the different locations. Also, my site is served through a CDN now. Just yesterday, I purged my caches so everything was starting from scratch again when you visited.

If you run the test a few times, the numbers will drop. Since writing this, the lowest I’ve been able to go now is about 700ms. Still not bad at all but the page load is a little heavier now.

BTW – love your thesis tutorials I have been using Thesis for a couple of years as it was the first theme I bought, coding aint my strong point so your tips are great, and the guys on the DIY blog are great – I have strayed from Thesis a couple of times for other themes that are easier to customise in the Admin panel – but they lack obviously lack the SEO and the speed.

It’d be hard to say exactly what’s making the difference. However, managing page speed is an ongoing task that requires constant maintenance and tweaks as time goes on.

Since I wrote this article, I haven’t been as heavy into optimizing speed on a daily basis. It’s something that I come through and do periodically. Since this article was written, images have been uploaded that weren’t compressed, I’ve switched social sharing plugins, I’ve added new, active websites to my server, etc.

So things can definitely change over time and it’s necessary to go back and tighten things up again… which I haven’t done yet. Also, you can tweak where the site loads from when you test it and if CDN servers around your geographical area hadn’t cached my site yet, it would almost be as if no CDN was delivering my content since it would have to be loaded for the first time.

Great write-up! I’ll be keeping this as I move my site over to the new thesis. Right now I’m using maxCDN and a cache plugin and seeing results of about 1.5-3 secs load time. Lots of images on my page so maybe the compressing would help get it under a second…your .3 is insane!

I’m glad you found it useful! Now that I am on Thesis 2, I think I may be switching some things up so I will write a follow-up to this post. If you get to it before me, let me know how everything goes.

Many thanks Sean
The plugins replaced by Jetpack looks good but for me it deffinately slowed my blog down
I wont use W3Total Cache as it wiped out much of my earlier blog and difficult to configure with Thesis Theme

I also had a lengthy chat with a geek and his upshot was that CDN services were not needed if caching is configured correctly

I have used Thesis fot 4 years now but still choose to use my favourite plugins
Guess its everybodies personal choice and it is great to hear you have found the perfect set-up for your site

Nothing wrong with checking everything out for yourself and seeing what’s best for you. When I used thesis 1, it took some work to get everything where I wanted it but the results were outstanding. I’m not having the same luck with Thesis 2 so my combination of tools will definitely look different this time around.

As for not needing CDN if caching is configured properly, I can see that as being true. But CDN is a form of caching. So if we dismiss the terms and the names of the services, we’re all talking about the same thing… just different ways of getting it done.

Thanks a ton for stopping by and leaving a great comment. Let me know if at any point the services you use get replaced by something else!

Well I am holding off on installing Thesis 2.2 as of now
I do believe that in a shorty while there will be further updates and a nore full istalation guide,which Thesis forum,Chris and Girlie are working on

I am considering re-installing W3Total Cache,
I used MaxCDN for a year and had no probs,now without it activated my site loads faster believe it or not
I am however searching a good security plugin that protects against mySQl injections
I have chosen WordFence

It does however raise the server load on scanning,but only in bursts or 4-5 minutes
It checks all backdoors and a multitude of other weknesses in WP

man 310ms its amazing, I am just trying to concentrate on the page speed lately and started customizing things in the new proposed design I am planning to use it in almost all of my blogs.. I think from here I can use your article as a base reference and start working on things accordingly.

Glad to hear that! The route I took is definitely not the only way to go. But like you said, it’s a good place to start. My page speed isn’t where it used to be at this point but I’ll get it back there. Be sure to let me know how you go about it and what your results are. Maybe I can do a follow up to this article in the future.

Haha! The main reason why I haven’t done an update is because not much has changed now. I know I said it did at first but that’s because Thesis 2 wasn’t playing nice with W3TC at the time. I got that sorted out, though. Likewise, I’m not even using Thesis anymore and using my Volatyl Framework.

Besides that change, everything else is still the same. The only other difference is that I use even fewer plugins now lol. Not sure if an update is needed anymore!

Your image claims 24 requests, but when I test this page I see 102 and a page size of 1.4mb. What went wrong?

Another good tip for image compression is to use smushit which will losslessly compress your images in bulk (no folder structure t the moment though). They have an api which is pretty easy to use so you can compress and cache on the fly.

It sounds like you tested this page. Every single commenter’s gravatar image is an HTTP request. I wonder if something can be done about that. It also includes all the images used in the post. Internal pages like this change things. My test was on the homepage.

Really interesting read and some valuable advice. I also use maxcdn with wpengine and the site has gone from 7secs to around 1.7 because of it. By the way, have you now reverted back to the standard wordpress comment system over jetpack?

I’ve actually made a few small changes since writing this article. The commenting system was one of them. I can’t say I switched back for any particular reason. Sometimes I just need change. I still use Jetpack for a thing or two but not the commenting system at the moment. Thanks for your feedback!

Even though this is two years old it still is a great article. I changed recently to a dedicated server and that allowed me to install page_speed mod for apache. What a difference that made. Now I don’t use a CDN as a lot of readers told me that they found the CDN took 4 to 5 seconds to load and my site loaded faster without it. Thanks for a great article. I will be looking into jetpack.

That’s how it works, Teddi! Every sit is a little different and I learn that day by day. I don’t think people realize that they need to gather all the resources and see what combination works for them. It sounds like that’s what you did… outstanding. thanks for reading and commenting!

I’m glad you found it useful! I don’t use an CDN anymore but I’ve been meaning to get back around to it. They really do work if you have a little patience for getting it all set up. Good luck and thanks for reading/commenting!

I came across your post while looking for other experience on Disqus, as i’ve got a client site being hit by a delay of around one second on loading to see if she was alone. I really can not find anything positive about it except it can be monetized, but at what cost?
You’ve done a great job no doubt, but it’s never one size fits all, in some cases minify will make a massive difference, in other cases it actually slows you down. A photo gallery off loaded to a CDN the difference would be immense, to a text content driven blog with lots of commenting it couldn’t be justified.

Everything in this article is still solid. I’m just not keeping up with the site. I’ve made changes and didn’t optimize again afterwards. I’m not really active here that much anymore. If you’d like a fast website, implement the things I’ve mentioned here. Nothing about the information has changed.

Finally I found this nice helper article. Thanks Davs =)
Maybe I just wondering, would you like to see how to include the shipping method from WooCommerce without add any third party plugin?
Just called:
– I want shipping from “A City” into “Z city” with $10 price.

One thing: when I tried downloading RIOT, Chrome gave my a hard “THIS IS A MALICIOUS FILE” error and denied the download. I suggest you find a different image optimizer to promote, or find out why RIOT is on the shitlist.