Professional Documents
Culture Documents
Antti Kokkonen
http://zemalf.com
This guide focuses on the most important optimization tweak one can do to a
WordPress blog - installing and configuring the W3 Total Cache plugin.
There are other optimization steps and ways to increase the site speed, but if
you could only do one thing, this would be it.
The W3 Total Cache is the best caching plugin there is for WordPress – Best,
because it gets the best results and has all the needed options included, like
minifying, so it‘s not just Page Cache, like WP Super Cache is.
This guide will show you how to install and configure it on your
self-hosted WordPress blog, and make your blog work better and
faster.
This guide is MASSIVE (40+ pages), but don‘t let that scare you, I just
wanted to cover it all with screenshots and step-by-step
instructions. It‘s not hard, it won‘t you too long, and your blog will
thank you later.
I made this guide because I see too many WordPress blogs that are so slow
that it‘s embarrassing - People are leaving the blogs before the text loads! I
made this guide, because it doesn‘t have to be like that - speeding up
WordPress is easy, so there is no excuse!
I hope you enjoy this guide and speed up your blog with the instructions in it…
Good speed,
p.s. This guide is 100% free, and freely available at at my blog and my
Scribd - http://www.scribd.com/anttikokkonen - you may NOT sell this guide,
but you SHOULD pass the info on and tell your WordPress using blogging
buddies about this – read the guide, use it, share it, embed it on your blog,
share the love!
2 Preface | zemalf.com
INTRODUCTION TO SITE SPEED
"80% of the end-user response time is spent on the front-end. Most of this
time is tied up in downloading all the components in the page: images,
stylesheets, scripts, Flash, etc. Reducing the number of components in turn
reduces the number of HTTP requests required to render the page. This is the
key to faster pages."
In addition to loading less stuff, when we optimize the stuff we have left to
load and deliver that stuff to the reader in an optimal manner, we'll have a fast
blog. It's really as simple as that.
You need to remove stuff that is not really needed. After the cleanup, the rest
is cakewalk. In fact, W3 Total Cache does exactly this. We‘ll have additional
steps, like optimizing images, but W3TC truly is a TOTAL cache solution.
The whole process is explained into detail in the WordPress Speed Challenge, a
series of posts & steps that help people to speed up their WordPress blogs.
(W3 Total Cache is a plugin that is still evolving, so it‘s possible that the
screenshots may look a bit different, but the options and settings should
remain.)
Benefits:
At least 10x improvement in overall site performance (when fully configured: Grade A in YSlow or significant
Google Page Speed improvements)
Improves "site performance" which affect your site's rank on Google.com
"Instant" second page views (browser caching after first page view)
Reduced page load time: increased visitor time on site (visitors view more pages)
Optimized progressive render (pages appear to render immediately)
Improved web server performance (sustain high traffic spikes)
Up to 80% bandwidth savings via minify and HTTP compression of HTML, CSS, JavaScript and feeds
Features:
Compatible with shared hosting, virtual private / dedicated servers and dedicated servers / clusters
Transparent content delivery network (CDN) integration with Media Library, theme files and WordPress itself
Caching of (minified and compressed) pages and posts in memory or on disk
Caching of (minified and compressed) CSS and JavaScript in memory, on disk or on CDN
Caching of feeds (site, categories, tags, comments) in memory or on disk
Caching of search results pages (i.e. URIs with query string variables) in memory or on disk
Caching of database objects in memory or disk
Minification of posts and pages and feeds
Minification (combine and remove comments / white space) of inline, embedded or 3rd party JavaScript (with
automated updates)
Minification (combine and remove comments / white space) of inline, embedded or 3rd party CSS (with
automated updates)
Browser caching of CSS, JavaScript and HTML using future expire headers and entity tags (ETag)
JavaScript grouping by template (home page, post page etc) with embed location management
Non-blocking JavaScript embedding
Import post attachments directly into the Media Library (and CDN)
Source: http://wordpress.org/extend/plugins/w3-total-cache/
Before you move on into installing and configuring the W3 Total Cache plugin
for your WordPress blog, you should know what the performance of your blog
is before you optimize anything...
You can use free tools and websites like Pingdom Tools, WebPageTest.org and
Firefox –addons like YSlow, Google Page Speed and Firebug.
With the page loading times, YSlow and Page Speed scores written down, you
now have a baseline to compare the results after installing W3 Total Cache.
This is important, do not skip the analysis part, because there‘s a chance that
your hosting provider is not well suited for WordPress blogs and W3 Total
Cache will not improve your results.
Analyzing the performance before and after will ensure you will see
immediately if that‘s the case, and you can reverse the changes you made,
e.g. use different settings on W3 Total Cache.
Backup your blog before you begin, and be ready to come back to the earlier
configuration steps and try different settings if you have problems after
installing and configuring it.
If you run into problems with the guide, visit my blog at http://zemalf.com/,
send me a message using my contact form or leave a blog comment on one of
the WordPress optimization posts.
Each WordPress blog should use a cache plugin, and for most popular is the
WP Super Cache. WP Super Cache is a great plugin, but W3 Total Cache does
more than the Super Cache, and we can‘t use both together, so we choose the
best option – W3 Total Cache. If you‘re using WP Super Cache, or any other
caching plugin, you need to uninstall that first.
http://zemalf.com/1442/how-to-uninstall-wp-super-cache/
http://wordpress.org/extend/plugins/wp-super-cache/other_notes/
2. Click 'Plugins'
6. Locate 'W3 Total Cache' (should be at top), and hit 'Install Now'
8. You should see 'Succesfully installed the plugin W3 Total Cache x.x.x.x'
(x.x.x.x. being the version) at the top...
For the most part, the DEFAULT settings of W3 Total Cache work fine, but as
mentioned, the default settings only enable the Page Cache.
The somewhat tricky part are the Minify Settings (the advanced settings, like
CDN settings, we don‘t even need right now).
I‘ll take you through all the settings, so you know what they do, even if the
settings themselves are OK already.
GENERAL SETTINGS
The General Settings –page in the W3 Total Cache settings should be open…
The default option ‘Disk (enhanced)’ is perfect, but if W3TC does not seem to
work well for you, choose ‘Disk (basic)’.
After everything else is done, you can try if enabling and using Disk
cache speeds up your blog. On some hosts, this will end up slowing your
blog.
CDN is OPTIONAL, because they cost a bit, but you can very easily set
(sub)domain and use the 'Self-hosted / FTP' option, or configure W3TC to use
your Content Delivery Network (CDN) like MaxCDN if you want:
Read: How to setup WordPress CDN with W3 Total Cache and MaxCDN
Note: Some people suggest using a sub domain to "fake" CDN with W3 Total
Cache, which is OK, but using true CDN is a much better solution, and the sub-
domain solution is really not worth the trouble in the end.
(9.) There is no need to touch the Support Us or the Debug section, but
if you're a good sport, add W3 Total Cache link to your blogroll, tweet
about the plugin (and tell your followers about this guide to help them)
and at some point, rate the plugin at WordPress.org
(10.) At the bottom of the General Settings, you can Export/Import the
configuration, and if everything goes wrong...
zemalf.com | W3 Total Cache - Basic Configuration 15
(11.) You can Restore Default Settings (DO NOT touch it now!)
(12.) If you want to unclutter your Dashboard, disable the news widget
(uncheck the 'Enable dashboard news widget' -option)
If you changed any settings on General Settings, click ‘Save Changes’ before
moving on.
NOTE: In most cases, you don't have to change anything on the Page Cache
settings = Page Cache settings are OK by default. But let's go through the
configuration...
Now this is interesting, with Cache Preload, you can automatically "fill the
cache", using a XML sitemap. This means serving pre-cached pages to all
visitors, even if a page has not been visited recently.
It's OK to leave this disabled, and keep it disabled if you run into performance
problems when the preload activates, or lower the number of 'Pages per
interval'.
If you changed any options on the Page Cache Settings, remember to click
'Save changes'
The Page Cache alone will speed up your blog a lot (if you want, you can
go give it a go via Pingdom Tools right now if you want), but the minify
part is what separated W3 Total Cache from the competition.
With minifications, we'll be able to take all CSS- and JavaScript -files in
your blog and combine them into one - automatically - and minify that
one file to be as small as possible.
Depending on how bloated your blogs theme and setup is, this can peal
seconds from the loading time (and it'll increase YSlow and Page Speed
scored quite a bit too)
Skip the General, HTML and JavaScript for now, and scroll to...
If you run into problems with badly coded CSS, try disabling the Comment-
and Line break removal. Well coded CSS will still work, bad ones might get into
problems.
Theme: The active theme should be chosen, but you can set configurations to
all installed themes here (even for non-active ones, in case you ever activate
them).
1. Open another browser window or tab, and open the blog (not admin
area, but the front page for example).
2. Open the page source (right-click, show page source).
3. Open Find (e.g. CTRL+F or from menu: Edit > Find)
4. Search for ".css" (without quotes)
5. Copy the full URL of the first .css-file you find, e.g.
http://example.com/wp-content/themes/yourtheme/style.css (do not
copy this URL, you must get it from YOUR BLOGS page source)
6. Go back to the window/tab with W3 Total Cache settings and the Minify
Setting -page, click 'Add a style sheet' under Cascading Style Sheets...
7. Paste the .css -file URL in, unless the css-file is specific to certain
page/template, choose 'All Templates'. Just in case, click 'Veriry URI' to
see that the URL is correct
8. Go back to the page source, hit next on the find to locate the next css-
file. Copy the URL to the W3 Total Cache, Verify.
9. Repeat until you've added all css-files from the page source to W3TC.
After done, click 'Save changes' (Ignore any notifications about emptying
caches on top for now)
After saving changes, W3 Total Cache might remove the HTTP:// from the
URLs, but that's normal. If you have WordPress installed on a directory (not
the root), click 'Verify' again to ensure the file works.
This will affect the expiration times of cached objects. According to guidelines
from Google and Yahoo, we want it to be over a month, so use these settings
instead of default 86400.
For high traffic sites, lower the Garbage collection to 86400, or just leave it
there by default.
If you manually edit/create your .htaccess -file and don't use W3TC's Browser
Cache, the 'Update external files every' won't have an effect - but do set it to
3628800 seconds anyway.
Save Changes.
The process is similar to adding the CSS-files, but the problem is that many
plugin- and theme-authors are not very good JavaScript coders, so they code
can't handle minification.
Non-blocking can be used if the functionality of that script is not needed when
loading the page, but only after the page is loaded. (In general, interface
scripts can be non-blocking, and scripts that modify the content usually need
to be "blocking")
After you're done adding all JavaScript files you want to minify into
W3 Total Cache, click ‘Save changes’
(Ignore the notification about emptying any caches on top for now).
Test your site functionality before enabling the HTML minify! If you're on
Preview-mode, test your site after 'Deploy' and change configuration if needed.
Did you have a lot of CSS- and JavaScript -files to go through? Maybe
you're running a few unneeded plugins, widgets and external scripts?
Do you really need them all? Remember - best performance
optimization trick is to remove stuff.
Minify error notification: Enable this to get error notification if something goes
wrong.
Note: After enabling HTML, your page source will become somewhat difficult to
read, so adjust CSS- and JS-settings before enabling this.
And if you ever need to look into your blogs source, disable HTML minifying
then, so leave HTML minification as the last, so you can setup everything else.
Best Performance:
Save changes..
The Advanced Minify Settings are what they say they are - Advanced. Default
settings are OK, or like this:
'Save changes'
Skip Database Cache- and Object Cache settings, as those are probably
disabled + the default options work OK, even if you do have opcode-
/memcache running on your VPS or dedicated server.
For blogs on shared hosting: after finishing the guide, you can TRY if the
Database Cache and/or the Object Cache with the ‘disk’ option works
on your host and blog. If the disk ―responds‖ slower than the database, these
caches don‘t help. On the other hand, if the disk works fast, Database Cache
and Object Cache (or just one) can speed up the site a lot.
You might need to upload object cache file from W3TC plugin dir to wp-content
when you enable it. Use a FTP client to copy the file.
BROWSER CACHE
The browser cache settings will change rules in your .htaccess-file if you have
the Browser Cache enabled.
Advanced users probably want to tweak their .htaccess manually, but this is an
excellent way for non-techies to get .htaccess-based browser cache set-up.
Change General settings for Browser cache and click Save Changes:
You can disable the W3 Total Cache headers if you want, but it‘s OK to go with
default.
You might change the Cache Control policies if you have issues with proxies,
but other than that, the above config is solid.
You don't have to, but if you now go and check your root .htacces-file, you'll
see that W3TC has added loads of rules there.
This is where you'll do tweaks for different agents, e.g. mobile users, but you
can skip these for now.
This is where you'll configure W3 Total Cache to use your CDN or (sub-)domain
to server files in the Media Library, the Theme-files, minified-files, etc. W3
Total Cache does all this automatically.
After you've done all the settings, go back to the General Settings -page and
hit 'Deploy'.
(as noted at the start, the 'Deselect this option to disable all caching
functionality.' option seems to be broken, just ignore it, even if its unchecked
by default)
It is normal that Opcode cache and Memcache extension are 'Not installed',
unless you have a Virtual Private Server or dedicated server and have'em
installed there.
But now you're done, you have succesfully installed and configured W3 Total
Cache on your blog.
With this guide, a blog can do well on cheaper hosting and withstand high
amounts of traffic without the need to go for more expensive hosting options
until you REALLY need them.
Thus, this guide does not cover the Database Cache or using the
Content Delivery Network.
To this guide, I‘ll include basic info about the database cache, CDN and special
configuration for mobile devices, but I won‘t go into too much details.
If you have questions and need help setting up the advanced options,
like special settings for mobile devices, Opcode cache and memcache,
or configuring your blog to use a Content Delivery Network - contact
me and tell me what you need, and I’ll help you out.
If you have the Database Cache enabled (on the General Settings -page), you
can adjust the settings here. The default options work just fine, so no need to
actually change anything thou.
Note that on some hosts, using the Database Cache: Disk –option will speed
up the usage, and you can use Database Cache even on a shared hosting, but
in general, it‘s better to leave it disabled, unless you can use Opcode or
memcache options.
CDN SETTINGS
On the content delivery network (CDN) Settings, you can configure W3 Total
Cache to automatically move files into your CDN and deliver that content
instead of the content on your blog.
W3 Total Cache supports exporting the whole media library to CDN, so all
images you upload using the WordPress Media interface; they'll be
automatically handled by W3TC into your CDN.
It's optional as it's not free, but it's well worth it in the end. Depending on your
hosting setup, it can even save you money as it takes the load and bandwidth
off your main server.
Usually (without plugin that delivers content based on the User Agent, e.g. ―a
mobile theme‖, see below for more info), there's no harm on delivering cached
content to everyone, including crawlers, so you might even empty the
‗Rejected User Agents‘ -list. If you‘re unsure what to do, don‘t touch the Pace
Caching - Advanced Settings at all.
You can skip the Advanced Settings on the Page Cache Settings, but if you
want to ensure your site works well for mobile agents (e.g. iPhone and other
smart phones), AND you use a special mobile theme via plugin like WPTouch,
you need to include the mobile agents in the 'Rejected User Agents' list. In this
case, the list needs to be copied on Minify Settings and CDN Settings as well.
WHAT NEXT?
You can now go and check how fast your blog is after installing and configuring
the W3 Total Cache –plugin. Use the same tools you used to analyze the
performance beforehand, like Pingdom Tools, YSlow and Page Speed
addons/extensions, etc. You can find the instructions here:
http://zemalf.com/1359/how-fast-is-your-blog/
Remember to log out when testing, since W3 Total Cache can work differently
for administrators (depending on your settings).
After you‘ve checked the results, I‘d love to hear your feedback on this guide…
zemalf.com | Afterword 35
YOUR FEEDBACK AND QUESTIONS
I want the stuff I create to be helpful. But I can‘t do it all on my own, I need
your help to make my content even better – I need you to tell me how I can
make this guide better.
If you have any questions, comments or feedback about this guide, send me a
message to using the contact form at http://zemalf.com/contact/
I‘d also love to know if there is anything you are struggling with when it comes
to WordPress, SEO and Internet marketing.
See W3 Total Cache FAQ from the plugin settings page for details if you run
into problems, and check out the official FAQ at WordPress.org plugin
directory:
http://wordpress.org/extend/plugins/w3-total-cache/faq/
If you run into any problems with the guide you can‘t figure out yourself, visit
my blog at http://zemalf.com/, send me a message using my contact form or
leave a blog comment on one of the WordPress optimization posts.
zemalf.com | Troubleshooting 37
WORDPRESS SPEED CHALLENGE
In short, the WP Speed Challenge will help you optimize your WordPress blog
in a way that it will withstand huge amounts of traffic and load fast, even on
the cheapest hosting. This way, you don't need to upgrade to more expensive
options before you actually afford them.
Firebug: http://getfirebug.com/
YSlow: http://developer.yahoo.com/yslow/
Page Speed: http://code.google.com/intl/fi-FI/speed/page-
speed/download.html
If you don‘t feel comfortable doing this kind of technical tasks, want to save
your own time, or just want to make sure things are setup perfectly, you can
hire me to help you.
I‘ll both analyze your site and provide actionable report on what needs to be
done and you can do the optimization yourself, outsource it, or I can optimize
your WordPress blog for you, and make sure your site works well and loads
fast - guaranteed.
Whether you want just the W3 Total Cache installed and configured, more
comprehensive WordPress optimization package or other help with blogging,
WordPress or Internet business in general: Send me a message via contact
form at http://zemalf.com/contact/
I optimized my own WordPress blog for speed over several months, made
some posts about it and posted a video on my YouTube channel at
http://youtube.com/AnttiTV showing how fast my blog loads, even that I‘m
running the blog on a shared hosting (full page load in 1 second, beating
several ―high end‖ blogs with their fancy cloud hosting and CDN services).
That started a series of events and questions from fellow bloggers, after which
I decided to create several blog posts showing all the steps I took when
optimized my WordPress blog, and those posts turned in to the WordPress
Speed Challenge.
Jul 11th, 2010. Version 1.0: First version published on July 11th, 2010.
Version 1.01: Corrected typos and added quick notes to the ―How to uninstall
WP Super Cache‖ –chapter
Version 1.1: Re-worked the whole guide for the latest W3 Total Cache version.
Mar 28th, 2011. Version 1.2: Checked that everything is up-to-date and in
order. Minor changes to the advanced topics (CDN, Database Cache, Object
Cache).
42 Updates | zemalf.com
YOUR NOTES
Preface .................................................................................................. 2
CDN Settings.......................................................................................33
Troubleshooting .....................................................................................37
Updates ................................................................................................42
###