Professional Documents
Culture Documents
W3 Total Cache Installation and Configuration Guide v1 - 2
W3 Total Cache Installation and Configuration Guide v1 - 2
PREFACE
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 its 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 dont let that scare you, I just wanted to cover it all with screenshots and step-by-step instructions. Its not hard, it wont 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 its embarrassing - People are leaving the blogs before the text loads! I made this guide, because it doesnt 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, Antti Kokkonen http://zemalf.com http://twitter.com/akokkonen 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
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. Well have additional steps, like optimizing images, but W3TC truly is a TOTAL cache solution. zemalf.com | Introduction to Site Speed 3
Installing and configuring W3 Total Cache is one of the 4 initial optimization steps, and its also the most important one, which was the result why this guide was created in the first place putting all this into a blog post would have been too much over 40+ pages, screenshots and all - so separate guide worked better. (W3 Total Cache is a plugin that is still evolving, so its possible that the screenshots may look a bit different, but the options and settings should remain.) All my WordPress optimization materials are available at http://zemalf.com and at my Scribd profile: http://www.scribd.com/anttikokkonen.
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)
Blog performance analysis means checking the load time of your blog analyzing blogs loading with analysis tools using free analysis tools to get easy to understand metrics
You can use free tools and websites like Pingdom Tools, WebPageTest.org and Firefox addons like YSlow, Google Page Speed and Firebug. 1. Check the Total Loading Time with Pingdom Tools, 2. the YSlow grade and score, and 3. The Page Speed score! 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 theres 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 thats the case, and you can reverse the changes you made, e.g. use different settings on W3 Total Cache.
3. Click 'Add New' 4. Type "W3 Total Cache" to Search 5. Hit 'Search 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... 9. Click 'Activate Plugin'
10. You'll see 'Plugin activated.' at the top And now you're ready to start configuring the W3 Total Cache.
GENERAL SETTINGS
Lets begin with the General Settings From the Dashboard Go to Performance (1.) You'll see message on top saying that: o "The Preview mode is active" 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. If you're on non-shared hosting and can use Opcode cache or memcache enable the Database Caching, as caching will speed up your blog in that case. zemalf.com | W3 Total Cache - Basic Configuration 13
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 subdomain 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...
If you changed any options on the Page Cache Settings, remember to click 'Save changes'
MINIFY SETTINGS
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 Commentand Line break removal. Well coded CSS will still work, bad ones might get into problems.
Note: If there is "version number" like "?ver=2.4.1" in the CSS-files URL, remove it, for example: /styles.css?ver=2.4.1 - would go to W3 Total Cache as /styles.css - This way, W3TC will pick up the CSS, even if the plugin/theme updates and the CSS-version changes 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.
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.
JS FILE MANAGEMENT
The recommendation is to place JavaScript in the Footer, so that's what we'll do, even if you found the .js URL in the header. For performance, it's better to Embed JavaScript to the bottom of the page = Embed before </body> and use the "Non-blocking" -option 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") If a script doesn't work correctly when embedded to the footer (before </body>), embed it to the same location you found it, e.g. Embed script located originally in the <head>, in <head> = Embed in <head>. If a script is only used/needed on certain pages, use the Template selector to choose the correct template from your theme, e.g. Page for page.php, Category for category.php, etc.
Note: to avoid problems: DO NOT ADD AdSense, Chitika or similar advertising code to W3TC. 1. Open your blog to a separate tab or window. 2. View the page source 3. Look for JavaScript URLs (use search for '.js') 4. Copy the .js-file URLs into W3 Total Cache: 5. Choose Template If the JavaScript is not needed on every page of your blog, you can choose the template from your theme to use. For example, if a JavaScript is only needed on individual blog posts, choose 'single'. If you are unsure what to do, just use the All Templates (the JavaScript will be loaded on every page). 6. If the script does not need to be loaded before content, choose (Nonblocking) 'Embed before </body>'. If the JavaScript absolutely needs to be in <head>, choose that (remember the rule: css to header, JavaScript to footer). This will make the JavaScript load after the page is loaded and not block the page load in case it fails. If the JavaScript needs to 'block' the page load (e.g. changes in the actual content), choose (Blocking) 'Embed before <body>'. 7. Repeat for all the JavaScript URLs in your blogs page source. 8. Verify the URLs to ensure the script URLs were copied OK. 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.
Disable 'Comment removal' and 'Line break removal', if you're having problems. And if everything else fails, remove JS-file from W3TC (and seriously consider getting rid of that poorly coded script!!) 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.
Best compatibility with HALF-ASS coding on the theme/scripts: Disable: Enable (unchecked)
'Save changes'
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. Go through the settings, and set'em like this:
Save changes.
BROWSER JAVASCRIPT
CACHE
CASCADING
STYLE
SHEETS
&
(default = OK, no changes) Enable (checked): Set expires header Expires header lifetime: 31536000 seconds Enable (checked): Set cache control header Cache Control Policy: cache with validation Disable (unchecked): Set entity tag (eTag) Enable (checked): Set W3 Total Cache header Enable (checked): Enable HTTP (gzip) compression
Disable (unchecked): Set entity tag (eTag) Enable (checked): Set W3 Total Cache header Enable (checked): Enable HTTP (gzip) compression
You can disable the W3 Total Cache headers if you want, but its OK to go with default. Save changes (just in case, or if you disabled the W3TC headers). 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.
(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)
If you want, check 'Combatibility Check' for some info. If you're on shared hosting, these are pretty much out-of-your-control, but will give some clue in case you have problems with W3 Total Cache. 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.
To this guide, Ill include basic info about the database cache, CDN and special configuration for mobile devices, but I wont 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 Ill help you out.
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. For the best performance and speed, I recommend setting up a content delivery network (CDN) and configure it into W3TC settings. 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. I personally use MaxCDN, and wrote a guide on how to set it up here: CDN for WordPress with MaxCDN
AFTERWORD
Congratulations, you have now masterfully configured W3 Total Cache! Your blog will be faster and the load on your (shared) server will be smaller.
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, etc. like You Pingdom can Tools, find YSlow the and Page Speed here: addons/extensions, instructions
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 youve checked the results, Id love to hear your feedback on this guide
zemalf.com | Afterword 35
TROUBLESHOOTING
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 cant 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
UPDATES
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
TABLE OF CONTENTS
Preface .................................................................................................. 2 Introduction to Site Speed ....................................................................... 3 How to Speed Up WordPress .................................................................... 4 About W3 Total Cache plugin .................................................................. 6 Analyzing Blogs Performance .................................................................... 7 How to install W3 Total Cache................................................................... 8 How to Uninstall WP Super Cache ........................................................... 8 How to Install the W3 Total Cache ............................................................. 9 W3 Total Cache - Basic Configuration .......................................................11 General Settings ..................................................................................11 General Settings General .................................................................11 General Settings - Page Cache ............................................................12 General Settings Minify....................................................................13 General Settings - Database Cache ......................................................13 General Settings Object Cache .........................................................14 General Settings - Content Delivery Network ........................................14 General Settings Browser Cache .......................................................15 Page Cache Settings.............................................................................17 Page Cache Settings - General ............................................................17 Page Cache Settings - Advanced .........................................................18
Page Cache Settings - Cache Preload ...................................................18 Minify Settings ....................................................................................19 Minify Settings - Cascading Style Sheets ..............................................19 Minify Settings Advanced .................................................................22 Minify Settings - JavaScript.................................................................22 Minify Settings General....................................................................25 Minify Settings - HTML .......................................................................26 Advanced Minify Settings ....................................................................26 Database Cache and Object Cache settings ...........................................27 Browser Cache ....................................................................................27 Browser Cache General ...................................................................27 Browser Cache - Cascading Style Sheets & JavaScript ............................28 Browser Cache - HTML .......................................................................28 Browser Cache - Media & Other Files....................................................28 User Agent Groups Settings ..................................................................29 Content Delivery Network Settings .........................................................29 Preview Mode & Deploying the changes ..................................................29 W3 Total Cache - Advanced Configuration .................................................32 Database Cache Settings ......................................................................33 CDN Settings.......................................................................................33 Rejected User Agents and Mobile User Agents .........................................34 Mobile Devices, Mobile Themes and - Plugins ..........................................34 zemalf.com | <Table Of Contents 45
Afterword ..............................................................................................35 What Next? .........................................................................................35 Your Feedback and Questions ..................................................................36 Troubleshooting .....................................................................................37 WordPress Speed Challenge ....................................................................38 References and Links ..............................................................................39 Want Me to Help You?.............................................................................40 About the Author ...................................................................................41 Updates ................................................................................................42 Your Notes ............................................................................................43 Table Of Contents ..................................................................................44
###