Performance Unleashed: How To Speed Up WordPress Load Times

by Willie Jackson · 136 comments

I’ll admit it: I’m addicted to speed.

No, not the psychostimulant; I’m talking about website speed.

I’m not alone, either. Google recently announced that they consider website speed when determining search engine rankings.

Oh, did I mention that a slow website can literally kill your revenue stream? Check out what the experts at websiteoptimization.com have to say about the topic:

Google found that moving from a 10-result page loading in 0.4 seconds to a 30-result page loading in 0.9 seconds decreased traffic and ad revenues by 20% (Linden 2006). When the home page of Google Maps was reduced from 100KB to 70-80KB, traffic went up 10% in the first week, and an additional 25% in the following three weeks (Farber 2006).

Tests at Amazon revealed similar results: every 100 ms increase in load time of Amazon.com decreased sales by 1%. (Kohavi and Longbotham 2007).

(source)

It’s quite clear. Everyone hates slow websites. The question is, how can you make your WordPress website faster? Keep reading and I’ll show you how you can take proactive steps towards speeding up your site.

What Determines Website Page Speed?

The Yahoo! YSlow and Google Page Speed Mozilla Firefox plugins evaluate your site against the widely accepted rules of website performance. The problem is, they don’t tell you what to do with the information they provide.

So, I’ll break down the top performance recommendations and show you you can apply them to your website.

Let’s do it.

  1. Minimize the number of HTTP requests
  2. Optimize and correctly display images
  3. Minify HTML, CSS, and Javascript
  4. Use a Content Delivery Network
  5. Gzip and compress components
  6. Choose <link> over @import
  7. Put stylesheets at the top
  8. Put scripts at the bottom
  9. Utilize browser caching
  10. Use CSS Sprites

1. Minimize the number of HTTP requests

Translation: Limit the number of files required to display your website

When someone visits your website, the corresponding files must be sent to that person’s browser. This includes CSS files, Javascript library references, and images.

As expected, every file you use to enhance your design detracts from its performance. Similary, WordPress plugins are notorious for injecting extraneous CSS code in the head of your site without giving you the option to manually add the required styles to your stylesheet.

The key takeaway is this: eliminate everything that’s unnecessary. If you’re using a plugin because you like, take a look at how it impacts your code. The extra page-load time may not be worth it.

2. Optimize and correctly display images

Translation: Make images as small as possible and don’t require the browser to resize them

Depending on the format, many images contain a ton of extraneous metadata that can drastically increase the size of the file. Many designers fail to compress their images before uploading them to the web, and the overall impact of this can be dramatic with image-intensive designs.

Another cardinal sin of inexperienced webmasters is to upload and serve an image far larger than what is required for the design. WordPress is an unfortunate enabler of this, as many novice website owners upload large images directly off of their digital cameras and utilize WordPress’s image resizing functionality to display a smaller version.

With free applications like Picnik and Image Optimizer at our disposal, there is simply no excuse not to resize and optimize! Visitors (and your server) will thank you.

3. Minify HTML, CSS, and Javascript

Translation: Remove all white space from code when possible before serving it to visitors

The spaces, tabs, and orderly structure used in code is to make it more human-readable. Servers and browsers don’t care about what the code looks like as long as it’s valid and executes without error. If you want your files to download faster, you can remove this whitespace before serving your code.

Since it would be impractical to remove white space from files that are constantly edited (unlike Javascript libraries like jQuery, which are almost always served minified), we’ll want to leverage a plugin like WP-Minify (good) or W3 Total Cache (best) to handle this at runtime without affecting the files we need to edit.

Whitespace is great for web design but in our code? Not so much.

4. Use a Content Delivery Network (CDN)

Translation: Use a CDN to lighten the load on your server and turbocharge its performance

A CDN is a high-performance network of servers across the globe that replicate the static assets of your website and serve them to visitors from the closest POP.

What?

I know, I know. The good news is that we don’t have to understand the mechanics behind Content Delivery Networks in order to understand their power: you have a team of servers distributing your static assets to visitors across the globe. I’ve written a post on making WordPress faster by integrating a CDN if you’re interested in further reading on the topic.

CDNs are among the most effective ways to absolutely turbocharge the speed of our sites. We can’t neglect the other areas of optimization in the process, so this should be treated as the crowning jewel atop your beautifully optimized website.

5. Gzip and compress components

Translation: Compress files at the server level before sending them to browsers

If you were instructed to hurl a piece of paper across the room as far as it can go, would you lightly crumple it or squeeze it with all your might? That’s right, you’d get your Hulk Smash on.

The sample principle applies here: we want to allow our webserver to compress our files before sending them to visitors. We can drop a few lines of code in our .htaccess file to accomplish this:

#Begin gzip and deflate
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/css application/x-javascript text/plain text/xml image/x-icon
</IfModule>

This code might look a bit intimidating, but it’s actually pretty simple. We’re just checking to see if the Apache mod_deflate module exists and if so, electing to serve HTML, CSS, Javascript, plain text, and favicon files using gzip compression.

Note that this requires the Apache webserver and the mod_deflate module. To enable gzip compression with NGINX, ensure that the following lines exist inside of the appropriate directive:

server {
        gzip on;
        gzip_types text/html text/css application/x-javascript text/plain text/xml image/x-icon;
    }

Easy!

6. Choose <link> over @import

Translation: Beware the suck of IE!

When including your stylesheets, always link to the files instead of using the @import reference. IE handles them differently by loading them as if the reference was at the bottom of the document. [sarcasm] Nice work, Microsoft! [/sarcasm]

7. Put stylesheets at the top

Translation: All interface-related stylesheet references should be included in the <head> of your document

We never, ever, ever want to display unstyled content to visitors—not even for a split second. Files responsible for the appearance of our site should be loaded first so they can be applied to the HTML as it loads. Makes sense, right?

Nothing more to it.

8. Put scripts at the bottom

Translation: All functionality-related files can be loaded after our content is loaded

As we think through how to deliver our content to visitors as fast as possible and the subsequent steps that users will take, we will use the following priorities:

  1. Get content to visitors as fast as possible
  2. Don’t allow unstyled content to appear in the browser (put CSS in the <head>)
  3. Load the files required for interaction (tabbed widgets, certain external API calls, etc.) last

The thinking behind this is simple: users aren’t going to interact with the content before they can see it!

9. Utilize browser caching

Urban Translation: Where the cache at?
Standard Translation: Don’t require browsers to pull down another copy of static files every time

With browser caching, we’re explicitly instructing browsers to hang onto particular files for a specified period of time. When the file is needed again, the browser is to pull from its local cache instead of requesting it from the server again.

Running a website without caching in place makes as much sense as driving to the store for a glass of water every time you’re thirsty. Not only is in impractical and short-sighted, it takes more work!

The ExpiresByType directive is used to tell browsers which files to cache and how long to hang onto them. The example below would tell our visitors’ browsers to hang onto HTML, CSS, Javascript, and images, and favicon for an hour (3600 seconds):

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/html M3600
    ExpiresByType text/css M3600
    ExpiresByType application/x-javascript M3600
    ExpiresByType image/bmp M3600
    ExpiresByType image/gif M3600
    ExpiresByType image/x-icon M3600
    ExpiresByType image/jpeg M3600
</IfModule>

Again, the code above is for your .htaccess file on an Apache server. The corresponding settings in NGINX would look something like this:

location ~* \.(jpg|png|gif|jpeg|css|js)$ {
        expires 1h;
}

Boom.

10. Use CSS Sprites

Translation: Serve one highly optimized image for your design to minimize the performance impact

A CSS sprite is an an image comprised of other images used by your design as something of a map containing the coordinates of all the images. Some clever CSS is used to show the proper section of the sprite when your design is loaded.

There are fantastic articles on the topic available across the web that dive into the mechanics of CSS sprites and wonderful resources for creating them. SpriteMe is a utility that generates the sprite and code required to make it work. If you inspect the code for the nav menu on Pearsonified.com, you’ll see a great example of how to implement a CSS sprite.

Whew! Still reading?

If so, great! You’re well on your way to a much faster website. If you implement even a handful of the techniques outlined in this post, you will see an immediate and dramatic improvement in your site’s performance. It’s not important that we know how everything works from database calls to HTTP requests—I surely don’t—it’s important that we’re familiar enough with the concepts to work towards them on our sites.

Work smarter, not harder

You could spend a few months learning the ins and outs of web server architecture, how different browsers implement caching, and how to tie it all together…or you could simply install and configure the W3 Total Cache plugin by Frederick Townes (CTO of Mashable).

I can give no higher recommendation for a performance-related plugin than this one. The features could easily fill another post, but I’ll give you the important part: W3TC helps you thoroughly address 80% of the recommendations outlined in this post. There are other solid options for caching plugins, but W3TC stands head and shoulders above the rest.

Handy resources

In your quest for website speed, you might find these resources helpful:

  • Pingdom—test how fast your site is before and after making changes
  • WordPress Caching—an in-depth comparison of WordPress caching plugins
  • Working backwards—Mashable CTO Frederick Townes delivers the keynote at WordCamp Denmark
  • Screaming Fast WPMU—Dan Collis-Puro shows how Harvard dramatically increased the performance of their websites

About the Author: Willie Jackson is a corporate dropout, WordPress fanatic, and website+server optimization junkie. He blogs at WillieJackson.com and can be found tweeting on them internets here.

If you enjoyed this article, enter your email below to get free updates!

{ 136 comments }

Josh Grenon

Awesome post, Willie! I can’t wait to use all of these tips on my website!

Willie Jackson

Cheers Josh, definitely do a before and after test to gauge the improvement—I’d love to see the results.

Greg Rickaby

Good stuff Willie!

Willie Jackson

Thanks my man.

Nick

Willie, you hit the ball out of the park. Love the opener!

Great read!

Willie Jackson

Funny, I added that opener at the last minute. Thanks for the support bro.

Robert Bromfield

Willie, this is great!

Willie Jackson

Thanks bro. Glad you joined Team Thesis :-D

Chris Jordan

Willie, you never disappoint! Great stuff. I always find at least one great takeaway to apply to my projects right away. This time: CSS Sprites. And there is plenty more for me to digest here as well. Nice Job!

Willie Jackson

Actually, you might want to look into Data URIs. I find CSS sprites to be incredibly impractical for designs that change often (see: yours :-D )

Jake Gissing

Great post Willie.

I’m addicted to speed too, slow websites irritate me so much, so I make sure mine run fast.

Willie Jackson

I’ve been watching your progress recently, yeah. As you know, this post barely scratches the surface of what’s possible in the world of optimization. W3TC configuration, opcode caches, caching proxies, etc.—it could be a whole post series.

Someone really should launch a line of services for people needing this kind of consulting. Hmm…. ;)

Jake Gissing

You should do it Willie! You’re great at what you do.

I started a forum the other week, still working on getting some users.

Eric Werner

Willie,

This is great stuff. You really hit the subject thoroughly. Great resources too.

Willie Jackson

Thanks Eric. Not sure why, but the optimization world is of great interest to me. We’ll see where this path goes ;)

Chris

Nice but actually YSlow will tell you exactly what to do ;) all the things you mentioned…

What is much harder is finding the bottleneck on the backend though :)

Willie Jackson

Good point. The difference is that YSlow doesn’t provide actionable steps for implementing all suggestions, though.

Kyle Hotchkiss

I’ve seen this plenty of times, but I love how you simplify and present it Willie!

Willie Jackson

That’s great feedback Kyle, thanks. Your personal site is pretty killer, by the way. Good stuff.

Jacqueline D'Elia

Great post. Like the CSS Sprite on Pearsonified.com.

Willie Jackson

Bingo :)

Rachael

You’re the master, my friend. Thanks for so much great actionable stuff. I’ll be putting this to use for a long time to come. :)

Willie Jackson

::bows graciously::

jeffatrackaid

The Yslow and PageSpeed are great tools, but something I often see overlooked are poorly written plugins and themes.

I’ve worked on some busy Wordpress sites (>1 million pv/mo) and in many cases, I’ve tracked performance problems to a specific plugin. While I find the core WP app and many plugins well written there are some that do not work well together.

Avoid Plugins when Coding will Work
Also, don’t use plugins when you can do things more simply by modifying your theme. For example, I’ve seen people use plugins to add sharing icons when you could easily do this from within your templates.

With less busy sites, these small things do not matter too much, but as your readership grows, every little bit can count.

On the server side, WP loves fast disks and RAM. I rarely see CPU as a limiting factor on the dedicated servers I manage.

Willie Jackson

These are great tips, Jeff. Most people obviously won’t be managing sites with that kind of traffic, but its a wonderful testament to the stability and scalability of WordPress.

George

Spot on Jeff,

I’ve had some truely dreadful wordpress plugins over the years (not naming names) that love deep integration and heavy database usage to provide fairly mundane solutions. Then of course when the owner realises they’re mundane they remove them without deactivating them – hence they’re still ticking away in the background eating up resources without actually doing anything!

Willie, great list and a handy resource for the linux server admins out there. I’d like to add a Firefox add-in too – Dust-Me selectors, absolutely superb for sniffing out unused CSS rules.

Thanks! Josh.

Martin Malden

Willie, hi,

Many thanks for this!

I just installed W3-Total-Cache on 3 sites and love the result. There’s more performance to come from it, though, as there are still some configuration options I need to get my brain around.

Again – many thanks!

Cheers,

Martin.

Willie Jackson

Hey Martin-

I’ve found that most people leave a semi-default configuration in W3TC which means that few are tapping into the true performance potential—especially people on VPSes and non-shared hosts. Good luck with your tweaking!

George

Don’t forget to tmpfs the cache directory, this can really boost page response performance, especially for high traffic blogs.

Harsh Agrawal

Thanks for great write up and few things which I have learned is :
1. Use less images
2. Compress images (Use wp smush.it plugin)
3.Remove un-necessary CSS
4. Use CDN
5. Use fast web server
6. Host Images on your server but in sub domain…..

Willie Jackson

You’re well on your way :) Your site’s pretty fast already, though!

Stijn

#2 Images. I find that SmushIt.com does an excellent job compressing images. It’s built into YSlow!, and there’s also a WordPress plugin for it. The Thesis theme could improve here by replacing it’s default GIF’s with smaller PNG’s.

#3 Minification. I confirm: WP-Minify + W3 Total Cache = winning combo.

#4 CDN. Using a CDN seems to be becoming a standard, although it’s still too expensive for the average blogger.

#9 Browser caching. 1 hour (3600 seconds) is already for caching, but yesterday Google recommended 1 week (604800 s) to me in Page Speed .

Mike Piper

Re: cost of a CDN

My blog isn’t huge (1.5-2k visitors per day), but Amazon’s cloudfront costs < $1 per month at my usage level.

ProSpirity

Quoting: #3 Minification. I confirm: WP-Minify + W3 Total Cache = winning combo.

I thought that W3TC was already taking care of mimifying. WHat is the benefits of using both?

I had WP-mimify before installing W3TC but removed it once I installed it

Willie Jackson

You don’t need both.

Daniel Collis-Puro

I question the real value of whitespace compression when you’re using mod_deflate… W3TC does it right by storing compressed resources to the filesystem. If you’re using a cache that doesn’t store resources somewhere, it just seems silly to “compress” (not that collapsing whitespace is really compression, but I digress) content twice. Not that gzip/deflate overhead will ever be a performance bottleneck, but poorly implemented whitespace collapsing could, maybe. Regexes are relatively slow. Why incur the overhead when gzip/deflate give you (say) 99% of the benefit?

Willie Jackson

Hi Daniel-

I didn’t frame it in this context, but I wanted to provide people with an awareness of these techniques rather than a prescription for the best solution from an engineer’s perspective.

I would never simply take the whitespace out of a file on a WordPress site, and I’m on the same page regarding the way W3 Total Cache handles this. I tried not to make this a WordPress-specific post because if I did, I’d basically tell everyone to use W3 Total Cache on a server with plenty of memory :)

The biggest thing on my W3TC wishlist is NGINX support.

Mark

Regarding “Minimize the number of HTTP requests”:

I think I remember my web host once told me don’t call images with the full URL, just use the /images/….jpg instead, that it was better performance to do so. Then someone on the DIY forums told me that this is not true, that is inserts the http://… anyway.

What’s the skinny on this?

Willie Jackson

So this is a question of relative vs. absolute paths. The benefit of using relative paths is that if your domain or directory structure changes, the assets and page references being made should still work. Their location relative to the reference in your code will remain unchanged.

If you’re making references to somedomain.com/images/someimage.png and you decide to change the site to someotherdomain.com one day, you’ll have to update your references everywhere. If you use relative paths, this will be a non-issue.

I hope that helps!

Mark

Thanks. Yes, I had already understood that. I was strictly talking about performance issues with this when calling an image.

Mark

Avoid the Pagebar2 plugin, and use a different one. I removed 500+ queries a page when I disabled it. The author admits it was a “problem.”

Willie Jackson

Heh, understatement of the century :)

SenseiMattKlein

This is a great post Willie, especially since google appears to be placing more emphasis on speed for ranking. This might be a stupid question, but why does Thesis not build in features such as Gzip, browser caching, integrating a CDN, etc? Would it be that difficult?

Willie Jackson

That’s an interesting question. As it stands, I prefer standalone utilities like the W3 Total Cache plugin for the front-end optimization since it allows me to migrate my settings between sites, themes, and hosts.

Building these features into a theme wouldn’t be difficult, but 1) it’s a bit of a departure from the core function of a theme and 2) it would generate a ton of support questions for people who don’t know what they’re doing. Maybe a theme developer can chime in on this topic.

Norcross

There are 2 main reasons why theme integration wouldn’t be the best way to handle this.

1. Server configuration
2. User confusion

1. Server Configuration: depending on who the host is, some of those functions (gzip and mod_deflate being the big ones) may require settings to be done on the cpanel, etc or might be disabled completely. It would cause errors if there was conflict with the configuration

2. As Willie pointed out, there is different coding if it’s Apache or NGINX. Your average WP user has no idea what these even are, much less how to determine which one they are using.

Bret Phillips

Awesome article. I’ve been researching this topic for a short time now and this is a great All In One resource.

Thanks for posting this up and keep the tips coming :D

Willie Jackson

Well it makes me happy to hear that Bret—this is very much a reference post for people looking to learn more about optimization. As I mentioned in some of the comments above, this is just starting to scratch the surface of what’s possible.

Brian Meagher

I was able to easily implement tip #9 ExpiresByType to get a quick boost in speed. Thanks so much! ~brian

Willie Jackson

That’s awesome; I should have asked people to post their before and after performance tests!

Mark

I’ve run the pingdom test and about the biggest item on the list is astrack.js, which appears to be Google Analytics related. Can anyone enlighten me on this and what to do about it if anything?

You can see it here.

Frederick Townes

Great post Willie. Well done!

Willie Jackson

Thanks Frederick! I wouldn’t know half of this stuff without the path of discovery that your project has facilitated—thanks for contributing so much to the WordPress community.

Tinh

Excellent, my blog loading speed has been much improved since using W3 Total Cache and MaxCDN. Thanks for sharing other ways :-)

Willie Jackson

That’s one of the most cost-effective ways to get your content served in a hurry, isn’t it? Nice work! And you’re very welcome.

poorna

Yeah! Speed really matters while using internet.
Slower the connection, lesser the business.

Thanks for the article.
works great :)

Willie Jackson

You bet. Glad to hear it was useful!

Ronald Redito

Lately I noticed that the loading time of my website has slowed down. I think I have to discard some plug-ins.

Willie Jackson

Definitely a good start. I’m not a fan of most plugins. Use them sparingly :)

Marlene Hielema

I’m just starting to work with video. I’m hosting on S3, but some people have complained that the load time is really long. Any suggestions?

Willie Jackson

That’s a little beyond the scope of this article, but definitely a great question. You’ll want to consider leveraging a Content Delivery Network in addition to or instead of S3 for media hosting. Amazon’s solution that ties directly into S3 is called Cloudfront.

Jim

Thanks for the article. I’m wondering if any or all of these are pre-loaded/included in the script in the Thesis theme already.

Mars

solid post thanks for the info all of it was way useful.

Willie Jackson

Happy to help, Mars—thanks for checking it out.

Nick Tart

Hi Willie! Thanks for all of your advice… Can W3 Total Cache replace the WP Super Cache plugin? Is W3 better?

Willie Jackson

W3 Total Cache is the only performance plugin you need Nick, great question.

Nick Tart

I’ll take your word for it, Mr. Jackson!

Scott Semple

Thanks, Willie. Excellent post!

Assuming we’re using W3TC, then the remaining items to optimize from your list are #s 6, 7 & 8, correct? W3TC handles 1-5, 9 & 10, correct?

Willie Jackson

W3TC actually can help with 7 and 8—check the minify tab. You can choose where the combined, minified, and gzipped files are embedded in your document.

You can even specify different locations on different pages for different scripts. Pretty cool, no?

Chris M.

Thanks for the article! This blog needs more of them though! :-)

Re: W3TC and points #7 and #8, how so? I thought Thesis already handles this?

Willie Jackson

This isn’t a Thesis-specific post :)

Rob Petersen

Great post Willie. Very helpful. A life- (uh, website) saver. Many thanks.

Rob

Willie Jackson

My pleasure, Rob. Very glad you find it helpful.

BusyMOM @ Easy Appetizers

Thanks for a great article. I don’t pretend to understand all of it, but will definitely take you up on as many suggestions as I can. Starting today. thanks again! Sara

Willie Jackson

The beautiful thing about many of these tips is that understanding them isn’t critical to implementing them. Best of luck in your experiments :)

Marketing Minds

Excellent Work!!! I’m always looking for ways to increase the speed of my websites. I currently use W3 Total Cache, but I’m only scratching the surface of the power of this plug-in.

I think I’ll try adding the compression code to my .htacess code. Thanks

Willie Jackson

Hi Dexter-

You actually don’t have to edit the .htaccess file directly if you’re using W3 Total Cache. Gzip compression settings are currently located in the “Browser Cache settings” portion of the plugin.

Gabi

Hi Willie,

Thanks for this guide – it’s great for a tech-no-phobe like me – lol! I have the W3 plugin installed – looking at some of the settings and trying to figure them out is daunting! Is it ok to just leave the settings as they are, or are there some changes that must be made to run it fairly optimally?

Thanks for the great post!

Willie Jackson

Hey Gabi-

Some modest defaults are set in the plugin and you’ll be fine leaving them the way they are, but you’ll want to experiment with different settings (enhanced page caching, enabling object caching, combining/minifying your CSS files to begin with) in order to get the best performance.

Don’t be afraid to tinker; you’re not going to break anything :)

William

Thanks Willie, I thoroughly enjoyed this article, and plan to put most of your advices into practice. W

Willie Jackson

I’m glad to hear it, William. Please share your results!

Yahya

Great Post…….just using this.
i used the following code but i still getting that expiration date not set for all my resources. what would be the error?

ExpiresActive On
ExpiresByType text/html M3600
ExpiresByType text/css M3600
ExpiresByType application/x-javascript M3600
ExpiresByType image/bmp M3600
ExpiresByType image/gif M3600
ExpiresByType image/x-icon M3600
ExpiresByType image/jpeg M3600

Willie Jackson

Hi Yahya, I’m not sure I’d be able to troubleshoot with so little information but you might consider using W3 Total Cache for your optimization since it works so well with most hosting and server setups. Handling these optimizations manually is quite tedious.

Olivier

Hi,

I used this script but I have the same error. I’ve read the documentation and the solution is to write :
ExpiresByType text/css A3600 than ExpiresByType text/css M3600 (A for access date)

Chris McCargar

Willie… That was an EXCELLENT article!

As a newbie to WP and blogging… I didn’t know, what I didn’t know! …and sat there in stunned ignorance wondering wtf is up with my site? As so many GOOD things happen in life, I just stumbled across this post. THANK You for all this FANTASTIC info… I’m off to implement W3 Cache…and anything else that I can do to tweak this puppy!

Willie Jackson

Hey Chris, that’s awesome. There’s a lot to learn and I’m glad your eyes are now open to the world of performance optimization :)

Mickael

In my job, we using a service for load-balancing CDN (it’s Cedexis). I recommend this system for accelerating your web !

Yoram Zara

I want to make my site faster. Will you do the job for a fee?

Willie Jackson

Hi Yoram, I misread your question initially. I’d be happy to help, please shoot me an email.

Ahmad Wali

Hello,

I am bit confused! because the methods explained are pretty much clear, but I don’t know where to put the codes. How to reduce http requests and adding the code in .htaccess and NGINX! Can you guide me to a video tutorial? I am not into coding…

wilson usman

Willie doesn’t just know what he’s talking about, he tells you how to do it and helps you. I just got done talking to him on twitter. He pretty much guided me through a problem I was having.

I really appreciate your help Willie, don’t change.

Willie Jackson

Very kind of you, Wilson.

mazdodot

Yesterday..For a moment i like my site speed, but after read this your recommendations…very very clear, so my site look like slowly.. hahaha
I will to try that.
Thanks a lot bro…

Willie Jackson

Cheers :)

Nic Penrake

Great post Willie. Wish I could implement some of the more advanced fatures – some features you translate well, others not so well… but handy to know about the easier stuff like the plugins. Cheers. Nic

Willie Jackson

Hey Nic-

The key is to experiment, test, and research with things like this. If you see improvements, you’re on the right track. You won’t break anything :)

Jeff Sebring

Great speed optimization guide.

I’ve found that though some optimizations can have a big impact, it’s more the sum of all the parts that will yield real noticeable results. I’ve been using W3 Total Cache for quite a while now, and it’s become one of my “default plugins”.

Willie Jackson

Indeed. I didn’t want this to be a post only focusing on W3TC, but it’s definitely the centerpiece of my optimization approach.

Thanks Jeff.

Brankica

I just wish there was an easy way to set up W3 total cache plugin. There are so many options that for us less technical people it is simply too complicated. Not to mention that when I run the speed tests, it usually doesn’t show any improvement :(

I wanted to add the piece of code you mention in .htacces, but there is already something there that the plugin added automatically.

But still my tests show that the images and some other files don’t have expiry set :(

Willie Jackson

Hi Brankica-

You wouldn’t want to edit the .htaccess file directly; W3TC writes to it for you. There are some decent tutorials on the web, but not all of them cover the latest versions of the plugin.

I’m happy to take a look at your configuration if you’d like— willie at williejackson dot com.

iMark

I was playing around with my page’s load speed at WebPageTest.org. I started with an 86/100. After trying various plugins and combinations including W3 Total Cache. I stopped with Quick Cache and WP Minify which brought my speed to 91/100.

I’m pretty happy with that, but my top three low grades are from – Optimize images (60/100), Leverage browser caching (64/100) and Prefer asynchronous resources (79/100). The last one is solely a Google Analytics issue.

I also have this in my htcaccess file:

AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
AddOutputFilterByType DEFLATE font/truetype font/opentype

Willie Jackson

Hi Mark-

You don’t need Quick Cache and WP Minify if you’re using W3 Total Cache (and you certainly won’t have to modify the .htaccess file) but I’m glad you saw an improvement.

Something I need to do a writeup on is hosting the Google Analytics snippet locally, which addresses the issue you’re seeing with that.

iMark

Hi Willie,

I actually tried W3 Total Cache first by itself. I did see all of the changes it made to the .htaccess file too. But as I searched further I found a few studies that were done comparing server loads, etc. of W3 vs. Quick Cache and others. So I tried various combinations and QC with WP Min gave me better results than W3 alone.

Google has a write up on loading GA asynchronously, but calls it experimental. I may try it any.

Thanks.

iMark

Willie,

I just installed the new asynchronous GA and I moved to 92/100 with “Prefer asynchronous resources (100/100).” So even that little bit helped.

Mabz

This is a great post, Willie. I applied your tips and it worked perfectly on my buy and sell website. Thank you.

Willie Jackson

Cheers! Glad it helped.

Navigationsgeräte

I am usually to running a blog and i really admire your content. The article has really peaks my interest. I’m going to bookmark your site and hold checking for brand spanking new information.

Seleema Miller

Thanks Willie! This is exactly what I needed, because my site has been extremely slow lately. I believe it’s the images- too big. I will download W3 Total Cache for sure and see if that makes a difference.

- Seleema

Willie Jackson

Cheers Seleema, good luck!

David

Great tips Willie! I’ll definitely run Pingdom before making changes, to see how much difference it makes.

Willie Jackson

Cheers David, give GTMetrix a look, too.

David

Thanks Willie, I’ll go check GTMetrix out.

Hsiu Kerkvliet

I feel rather fortunate to have discovered your website page and look forward to tons of more pleasurable moments reading here.

Willie Jackson

Your comment is intriguing to me, and I wish to subscribe to your newsletter.

Katy Tiner

How will you password protect a Blogger blog over a custom domain?

mark

I just realized the page loading issue for my site recently. This article has some really good points regarding the issue. Thanks for share.

Josiah Hair

There are some attention-grabbing points in time in this article however I don’t know if I see all of them center to heart. There’s some validity but I will take hold opinion until I look into it further. Good article , thanks and we wish extra! Added to FeedBurner as properly

sudha

If you can leverage browser caching, you can increase website speed considerably. As Google starts considering site speed as a SEO parameter, webmasters can leverage browser caching to improve site speed and get better search engine rankings.

Tony

Hello Ken,
Leave the task alone,when I have interest in some pages or some items,I will wait for about 10 seconds,and if the pages are still not loaded,I will try to open other pages waiting the loading of this page. While I am opening other sites,and the first page was already loaded.
So I think you won’t lose patience within 15 seconds if you are really intersted it.

Chinese Roll Forming Machines Manufacturer: http://www.rollformingdesign.com.

Hana Karangelen

I really value your work , Great post.

starfall

Thanks for posting this article it really help check the load time on my blog..

Brent

Great article Willie. I knew a lot of this already, but you schooled me with SpriteMe and W3TotalCache plugin.

Much Thanks !!

akhl

You are really awesome…My site now loads 10times faster then before.Thanks alot.

Lulu

I use thesis theme and had installed w3 total cache. Everything was great until I made the mistake of changing a setting. My site was shot to you know where and i spent most of the day trying to fix it. Turns out it was because I had Object Cache turned on. I uninstalled the plugin completely, restored thesis database, uninstalled and just re-uploaded thesis and my custom folder.

I’m sticking with super cache which is what I had before. I’ll just install the minify plugin separately

Russell

Willie, You talk in #5 about compressing your site with Gzip and it totally makes sense, however, some of my sites are using ASP and are on Windows servers. I know this is not the norm, but how do I perform the same task on a Windows server ??

Anuj

I’ve had some truely dreadful wordpress plugins over the years (not naming names) that love deep integration and heavy database usage to provide fairly mundane solutions. Then of course when the owner realises they’re mundane they remove them without deactivating them – hence they’re still ticking away in the background eating up resources without actually doing anything!

Drew Hammond

Why not name names? This is the internet and I’d much rather save time by knowing which WP plugins to avoid than save a few developers from getting their feelings hurt.

Personally I think ALL caching plugins are garbage. WP developers will always be faced with the underlying conundrum of cross compatibility (or lack thereof) between themes. There was an interesting article on Yoast’s website (I think) about the issue recently. I hope in the near future all developers are held to strict compatibility standards.

Drew

Nathalie Pombo

You understand a lot its nearly arduous to argue with you (not that I really would need…HaHa).

arun rana

What about Wp super cache plugin ?? I thinks it is the best plugin for caching ..

Susan Ireland

I have W3 Total Cache installed on my site. When I look at the sourcecode for my posts, I see a lot of the white space is removed, but not all. For example, there’s white space at the ends of lines. Is that not a problem?

Also, I see a lot of white space in the sourcecode from the page template. Isn’t that a problem as well when it comes to site speed?

BTW, I see both of these “issues” in the sourcecode for this post of yours.

Thanks for the post, Willie!

Trung Nguyen

Thanks for these awesome tips, I must follow and hoping my blog will load faster :)

Brad Dalton

I’ve found that caching plugins like WP Super cache and W3 Total Cache actually slow down my site.

The best solution for increasing page loading times, based on my own experience is to use a managed server which focuses on website speed.

The slowest loading elements on a website seem to be things like Google custom search, sidebar widget images, facebook like boxes and other javascripts.

My site consistently loaded in under 1 second without these but now its closer to 2 seconds.

Another thing which is important is the overall average speed of all pages/posts rather than just the loading time of the homepage.

Webmaster tools and GA site speed will give you these figure’s but now sure how accurate they are.

Dave Hitchen

Thanks Willie, it is always good to read tips for improving our blog & main site.

John Glover

Great info but you lost me on a few steps. I understand the explanation but don’t know how to do a few things like in 4, 5, and 6. Is it possible for you to give a detailed step by step format for people like me who don’t have as much knowledge as yourself?

Miriam

Thank you, what wonderful tips. I should have them all implemented by tomorrow.

Anton

2. Optimize and correctly display images. You should add width and height of an image (if possible) , because then browser can leave image holder(?) to place you need that image and load text before starting to load big things like images. As browser loads images, user can at that time already read content of website.

Mark

Wow. I salute you for casting this very long post. Its perfect. The ideas are carefully laid out. Despite the fact that the article is a little bit longer, I am enticed to follow it through because

1. I love the way you present and arrange your ideas.
2. I love it when you break down the each important ways to make your site load faster.

I will try to apply these guides.

Anyway, I am using wp smushit to reduce the image size.:)