I\u2019ll take you through every step of the process using real screenshots. So whether you\u2019re a total newbie or an advanced WordPress user, you\u2019ll be able to figure everything out.<\/p>\n
Let\u2019s get into it!<\/p>\n
How do W3 Total Cache and CloudFlare improve page speed?<\/h2>\n
Beyond choosing quality hosting, two of the biggest improvements you can make to a WordPress site\u2019s page load times are:<\/p>\n
- \n
- A good caching plugin<\/li>\n
- A content delivery network (CDN)<\/li>\n<\/ul>\n
W3 Total Cache<\/strong><\/a> knocks out the caching part. Caching speeds up your site by serving static files instead of dynamically rendered content (which WordPress is full of). I know that sounds a bit jargony, but all it really means is that your web server has to do less work and can, therefore, serve up your content faster.<\/p>\n
CloudFlare<\/strong><\/a> boosts your site speed by another method: content delivery optimization. Without a CDN, every visitor to your site has to download all of your files from one location \u2013 your website\u2019s data center.<\/p>\n
Whether they\u2019re located in Paris, Texas or Paris, France, they get your website\u2019s data from the same place.<\/strong> CDNs change that by creating multiple global versions of your data.<\/p>\n
Then, visitors can download static files like images and videos from the data center nearest to them, rather than your far-off web server. This physical proximity reduces download times and therefore speeds up your website.<\/p>\n
Put W3 Total Cache and CloudFlare together and you\u2019ve got a page load time-slashing super duo.<\/p>\n
Note:<\/strong> While W3 Total Cache is one of the most popular caching plugins available, there are other options. Click here\u00a0to learn about alternative caching plugins for WordPress<\/a>.<\/div>\nHow to set up and configure W3 Total Cache<\/h2>\n
You know how most WordPress plugins just let you \u201cactivate and go\u201d? Yeah, that\u2019s not<\/strong>the case with W3 Total Cache. Sorry!<\/p>\n
It has a dizzying 13 different menu items\u2026in just the General Settings tab. I know going through everything sounds like a chore, but I promise you that the payoff is worth it<\/strong>.<\/p>\n
And I also promise that I\u2019ll use tons of screenshots to make the process as simple as possible.<\/strong> After showing you how to configure W3 Total Cache, I\u2019ll then take you through setting up CloudFlare and making it work together with W3 Total Cache.<\/p>\n
Step 1: Install and activate W3 Total Cache<\/h3>\n
Get started by installing and activating W3 Total Cache. It\u2019s a free plugin available at the wordpress.org plugin directory, so you can install it directly from your WordPress dashboard by going to Plugins \u2192 Add New<\/strong> and searching:<\/p>\n
![\"Add](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/Add-New-Plugin-How-To-Configure-W3-Total-Cache.png\")
<\/p>\nMake sure that you activate the plugin. Then, head to its configuration options by clicking on the Performance <\/strong>tab.<\/p>\n
Step 2: Configure general settings<\/h3>\n
The first thing you need to configure is W3 Total Cache\u2019s General Settings<\/strong>. This tab enables\/disables all of the features which you\u2019ll configure in greater detail later on:<\/p>\n
![\"General](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/General-Settings-How-To-Configure-W3-Total-Cache.png\")
<\/p>\nI\u2019ll go through it in order from top to bottom.<\/p>\n
- \n
- General<\/strong><\/li>\n<\/ol>\n
The first option allows you to automatically enable every W3 Total Cache feature. Unfortunately, you won\u2019t need every single feature, so you should not<\/strong> use this option.<\/p>\n
![\"General\"](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/General-How-To-Configure-W3-Total-Cache.png\")
<\/p>\nIt also lets you enable Preview mode<\/strong>. In preview mode, you can test changes before deploying them to your live site. I personally don\u2019t use Preview mode,<\/strong> because it\u2019s easy to just disable the plugin if anything goes awry.<\/p>\n
- \n
- Page Cache \u2013 ENABLE<\/strong><\/li>\n<\/ol>\n
This is the absolute most important feature of W3 Total Cache. Page Cache <\/strong>alone will massively improve your site\u2019s performance.<\/p>\n
Definitely, Enable<\/strong> Page Cache. For the method, you should choose the Disk: Enhanced<\/strong>option, which should be the default:<\/p>\n
![\"Page](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/Page-Cache-How-To-Configure-W3-Total-Cache.png\")
<\/p>\n- \n
- Minify \u2013 DISABLE<\/strong><\/li>\n<\/ol>\n
Minify can shrink your site\u2019s code without losing any of its functionality. You definitely want to minify your code for improved page load times. BUT, <\/strong>CloudFlare also supports minification. So I will actually recommend using CloudFlare to minify your code instead.<\/p>\n
Therefore, do not<\/strong> enable Minify in W3 Total Cache if you\u2019re planning to follow this full tutorial and use CloudFlare.<\/p>\n
![\"Minify\"](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/Minify-How-To-Configure-W3-Total-Cache.png\")
<\/p>\n- \n
- Database Cache \u2013 DISABLE<\/strong><\/li>\n<\/ol>\n
Your database is where all of the actual data for your posts, pages, and everything else is stored. Database Cache can<\/em> improve your database\u2019s performance and reduce the time it takes to create posts, pages, and RSS feeds.<\/p>\n
But if you\u2019re on shared hosting, database caching can actually slow down your site by offloading too much work to your server\u2019s CPU.<\/strong><\/p>\n
So if you\u2019re on budget shared hosting, I recommend leaving Database Cache Disabled<\/strong>. If you have a dedicated server or VPS, you can enable it.<\/p>\n
![\"Database](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/Database-Cache-How-To-Configure-W3-Total-Cache.png\")
<\/p>\n- \n
- Object Cache \u2013 ENABLE<\/strong><\/li>\n<\/ol>\n
Object Cache is another one that may or may not play well with shared hosting. It\u2019s worth trying, but if you ever notice that your WordPress admin dashboard is running slowly, you may want to go back and disable this at a later date.<\/p>\n
But for now, Enable<\/strong> Object Cache and choose the Disk<\/strong> method:<\/p>\n
![\"Object](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/Object-Cache-How-To-Configure-W3-Total-Cache.png\")
<\/p>\n- \n
- Browser Cache \u2013 ENABLE<\/strong><\/li>\n<\/ol>\n
Browser Cache speeds up your site by caching static resources in your visitors\u2019 browsers, thereby eliminating the need to constantly reload static content.<\/p>\n
You definitely want to Enable<\/strong> this option:<\/p>\n
![\"Browser](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/Browser-Cache-How-To-Configure-W3-Total-Cache.png\")
<\/p>\n- \n
- CDN \u2013 DISABLE<\/strong><\/li>\n<\/ol>\n
While you will be using a CDN (CloudFlare), this is not<\/strong> where you will configure it. So leave CDN Disabled. <\/strong>Don\u2019t worry \u2013 I\u2019ll show you how to handle CloudFlare later on.<\/p>\n
![\"CDN\"](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/CDN-How-To-Configure-W3-Total-Cache.png\")
<\/p>\n- \n
- Reverse Proxy \u2013 DISABLE<\/strong><\/li>\n<\/ol>\n
Reverse proxies are an advanced concept that generally require private hosting. Therefore, you can leave this one Disabled.<\/strong><\/p>\n
![\"Reverse](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/Reverse-Proxy-How-To-Configure-W3-Total-Cache.png\")
<\/p>\n- \n
- Monitoring \u2013 NO ACTION<\/strong><\/li>\n<\/ol>\n
You don\u2019t need to configure Monitoring. Just ignore it.<\/p>\n
![\"Monitoring\"](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/Monitoring-How-To-Configure-W3-Total-Cache.png\")
<\/p>\n- \n
- Debug \u2013 DISABLED<\/strong><\/li>\n<\/ol>\n
Unless you\u2019re actively trying to debug your site, you should leave all of the Debug options Disabled<\/strong>. They\u2019ll only add unnecessary code to your site.<\/p>\n
![\"Debug\"](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/Debug-How-To-Configure-W3-Total-Cache.png\")
<\/p>\nAnd that\u2019s it for configuring General Settings! There may be a few additional options thrown in, but you can safely ignore anything that I didn\u2019t mention above.<\/strong><\/p>\n
Next, you\u2019ll need to configure each method in more detail. You can access each method\u2019s detailed settings by clicking on the relevant option in the menu of your sidebar:<\/p>\n
![\"Debug](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/Debug-2-How-To-Configure-W3-Total-Cache.png\")
<\/p>\nRemember \u2013 you only need to configure the options which you enabled above. So you won\u2019t need to configure every menu item.<\/strong><\/p>\n
Step 4: Configure page cache<\/h3>\n
First, go to the Page Cache settings. Then, go through the different options on the page following these instructions. If I don\u2019t mention a section, you can leave it as the default.<\/p>\n
- \n
- General<\/strong><\/li>\n<\/ol>\n
Under General<\/strong>, make sure you check these boxes to enable them:<\/p>\n
- \n
- Cache front page<\/li>\n
- Cache feeds<\/li>\n
- Cache SSL \u2013 CloudFlare offers free SSL certificates, so you can enable this box even if you\u2019re not currently using SSL.<\/em><\/li>\n
- Don\u2019t cache pages for logged in users<\/li>\n<\/ul>\n
You can leave everything else disabled (unchecked):<\/p>\n
![\"Configure](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/Configure-Page-Cache-General-How-To-Configure-W3-Total-Cache.png\")
<\/p>\n- \n
- Cache Preload<\/strong><\/li>\n<\/ol>\n
Fill in this section following these settings:<\/p>\n
- \n
- Automatically prime the page cache:<\/strong> Checked<\/li>\n
- Update interval:<\/strong> 900 seconds<\/li>\n
- Pages per interval: <\/strong>10<\/li>\n
- Sitemap URL: <\/strong>The actual link to your sitemap if you have one. Typically \u201cyourdomain.com\/sitemap.xml\u201d for most SEO plugins.<\/li>\n
- Preload the post cache upon publish events:<\/strong> Checked<\/li>\n<\/ul>\n
![\"Configure](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/Configure-Page-Cache-Cache-Preload-How-To-Configure-W3-Total-Cache.png\")
<\/p>\nYou can safely leave everything else in this section as the default.<\/strong><\/p>\n
Step 5: Configure object cache<\/h3>\n
Because neither Minify nor Database Cache should be enabled, you can skip straight to the Object Cache<\/strong> settings.<\/p>\n
You should be able to leave everything as the default here \u2013 just make sure that you see these numbers:<\/p>\n
- \n
- Default lifetime of cache objects:<\/strong> 180 seconds<\/li>\n
- Garbage collection interval:<\/strong> 3600 seconds<\/li>\n<\/ul>\n
![\"Configure](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/Configure-Object-Cache-How-To-Configure-W3-Total-Cache.png\")
<\/h3>\nStep 6: Configure browser cache<\/h3>\n
This is the last method you need to configure!<\/p>\n
- \n
- General<\/strong><\/li>\n<\/ol>\n
Under the General<\/strong> options, you need to check some additional boxes. Make sure to check all of these:<\/p>\n
- \n
- Set Last-Modified header: <\/strong>Checked<\/li>\n
- Set expires header:<\/strong> Checked<\/li>\n
- Set cache control header:<\/strong> Checked<\/li>\n
- Set entity tag (eTag): <\/strong>Checked<\/li>\n
- Set W3 Total Cache header:<\/strong> Checked<\/li>\n
- Enable HTTP (gzip) compression:<\/strong> Checked<\/li>\n<\/ul>\n
You can leave any other options unchecked:<\/p>\n
![\"Configure](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/Configure-Browser-Cache-How-To-Configure-W3-Total-Cache.png\")
<\/p>\nYou can leave all of the other sections under Browser Cache as their defaults.<\/strong><\/p>\n
Step 7: Configure W3 Total Cache CloudFlare Extension<\/h3>\n
That\u2019s it as far as configuring settings goes! For now, the last thing you need to do in W3 Total Cache is go to the Extensions <\/strong>page and Activate <\/strong>CloudFlare.<\/p>\n
![\"Configure](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/Configure-W3-Total-Cache-CloudFlare-Extension-How-To-Configure-W3-Total-Cache.png\")
<\/p>\nAfter you configure CloudFlare, you\u2019ll need to come back to this page to enter your CloudFlare login credentials.<\/p>\n
For now, you\u2019re ready to move on to configuring CloudFlare.<\/strong><\/p>\n
How to set up and configure CloudFlare for WordPress<\/h2>\n
I\u2019ve got great news\u2026<\/p>\n
If you made it through the W3 Total Cache configuration section, CloudFlare is going to seem like an absolute walk in the park in comparison.<\/p>\n
Grab a fresh cup of coffee and let\u2019s keep going.<\/p>\n
Step 1: Sign up for a CloudFlare account and select your website<\/h3>\n
Head on over to the CloudFlare website<\/a> and sign up for an account.<\/p>\n
Once you create your account, CloudFlare will ask you to add your website. Just enter your website\u2019s domain and click Scan DNS Records:<\/strong><\/p>\n
![\"Scan](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/Sign-Up-How-To-Configure-CloudFlareB.png\")
<\/p>\nCloudFlare will show you a helpful video while it scans your website. Once the scan finishes, just click Continue.<\/strong><\/p>\n
Step 2: Verify your DNS records<\/h3>\n
On the next screen, you need to verify your DNS records. I know this might seem complicated. But if you\u2019re a beginner, here\u2019s all you need to do:<\/p>\n
<\/p>\n
![\"Verify](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/Verify-DNS-Records-How-To-Configure-CloudFlareB.png\")
<\/p>\nMake sure you see the orange CloudFlare icon next to your real domain name. This means that CloudFlare will accelerate traffic for that domain. If you\u2019re using any public subdomains, you should also verify that you see an orange icon next to them.<\/p>\n
As long as you see the orange icon, you\u2019re set to jet!<\/strong><\/p>\n
Step 3: Choose your plan level<\/h3>\n
Because this post is all about speeding up your site for free, you should choose the Free plan.<\/strong> For most site owners, the free plan is more than powerful enough.<\/p>\n
![\"Choose](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/Choose-Your-Level-Plan-How-To-Configure-CloudFlare.png\")
<\/p>\nStep 4: Update your nameservers<\/h3>\n
In the last step, you\u2019ll need to update your domain\u2019s nameservers from your current nameservers to the new nameservers provided by CloudFlare.<\/p>\n
To do that, you\u2019ll need to go to wherever you registered your domain name and update your nameservers with your registrar. If you need help, your registrar\u2019s support team can point you in the right direction.<\/p>\n
![\"Update](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/Update-Your-Nameservers-How-To-Configure-CloudFlare.png\")
<\/p>\nIt might take 24 hours for the changes to take effect. But don\u2019t worry \u2013 your site won\u2019t experience any downtime. All that means is CloudFlare might not actually start speeding up your site for 24 hours.<\/p>\n
And you\u2019re done with the basic configuration!<\/strong><\/p>\n
Step 5: Activate CloudFlare in W3 Total Cache<\/h3>\n
Almost there, folks! Just bear with me for another couple minutes.<\/p>\n
Now, you just need to go back to W3 Total Cache and add your CloudFlare login credentials to sync the two together.<\/p>\n
In your WordPress dashboard, go to Extensions<\/strong> and click the Settings<\/strong> link under the CloudFlare extension.<\/p>\n
Click the Authorize <\/strong>button under the Credentials:<\/strong><\/p>\n
![\"Activate](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/Activate-CloudFlare-In-W3-Total-Cache-How-To-Configure-CloudFlare.png\")
<\/p>\nEnter the email address for your CloudFlare account as well as your CloudFlare API key.<\/p>\n
You can find your CloudFlare API key by going to My Account <\/strong>(this link will take you straight there<\/a>) and finding the API Key <\/strong>section:<\/p>\n
![\"API](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/API-Key-How-To-Configure-CloudFlare.png\")
<\/p>\nOnce you save your credentials, you should see a new screen with a number of settings options.<\/p>\n
Step 6: Turn on CloudFlare Minify<\/h3>\n
Last step, I pinky promise! You just need to scroll down in those settings and enable all three levels of minification:<\/p>\n
![\"Turn](\"http:\/\/bloggingwizard.adamconnell1.netdna-cdn.com\/wp-content\/uploads\/2017\/02\/Turn-On-CloudFlare-Minify-How-To-Configure-CloudFlare.png\")
<\/p>\nAnd that\u2019s it! Save your settings, break out the champagne, and celebrate a job well done.<\/strong><\/p>\n
If you ever need to, you can also configure SSL and security settings on this page. But it\u2019s fine to leave them as the default for now.<\/p>\n
Wrapping things up<\/h2>\n
Phew, I know that was a lot. But once you do this process once, you should be done with it forever! That means an hour or so of pain will set you up for a lifetime of improved page load times. And that\u2019s a guaranteed win as far as ROIs go!<\/p>\n
Source: This article<\/a> was originally published on\u00a0bloggingwizard.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Let\u2019s not beat around the bush: You need a quick-loading website. Speeding up your website makes your visitors happier, improves the chances they buy from you, and even gets you more of those visitors in the first place! But even if you know you need a faster website, when terms like caching, minification, and content delivery get thrown into the mix, it can start to feel a little overwhelming, right? So if you\u2019ve been struggling with the time or technical know-how required to improve your site\u2019s speed, I\u2019ve got the guide for you. In this guide, I\u2019m going to show you how to drastically slash your WordPress site\u2019s load time without paying a single cent. To do that, you\u2019ll use two free tools: the W3 Total Cache WordPress plugin and a service called CloudFlare. I\u2019ll take you through every step of the process using real screenshots. So whether you\u2019re a total newbie or an advanced WordPress user, you\u2019ll be able to figure everything out. Let\u2019s get into it! How do W3 Total Cache and CloudFlare improve page speed? Beyond choosing quality hosting, two of the biggest improvements you can make to a WordPress site\u2019s page load times are: A good caching plugin A content delivery network (CDN) W3 Total Cache knocks out the caching part. Caching speeds up your site by serving static files instead of dynamically rendered content (which WordPress is full of). I know that sounds a bit jargony, but all it really means is that your web server has to do less work and can, therefore, serve up your content faster. CloudFlare boosts your site speed by another method: content delivery optimization. Without a CDN, every visitor to your site has to download all of your files from one location \u2013 your website\u2019s data center. Whether they\u2019re… <\/p>\n
- Set expires header:<\/strong> Checked<\/li>\n
- Set Last-Modified header: <\/strong>Checked<\/li>\n
- Garbage collection interval:<\/strong> 3600 seconds<\/li>\n<\/ul>\n
- Update interval:<\/strong> 900 seconds<\/li>\n
- Automatically prime the page cache:<\/strong> Checked<\/li>\n
- Don\u2019t cache pages for logged in users<\/li>\n<\/ul>\n
- General<\/strong><\/li>\n<\/ol>\n
- Debug \u2013 DISABLED<\/strong><\/li>\n<\/ol>\n
- Monitoring \u2013 NO ACTION<\/strong><\/li>\n<\/ol>\n
- Reverse Proxy \u2013 DISABLE<\/strong><\/li>\n<\/ol>\n
- CDN \u2013 DISABLE<\/strong><\/li>\n<\/ol>\n
- Browser Cache \u2013 ENABLE<\/strong><\/li>\n<\/ol>\n
- Object Cache \u2013 ENABLE<\/strong><\/li>\n<\/ol>\n
- Database Cache \u2013 DISABLE<\/strong><\/li>\n<\/ol>\n
- Minify \u2013 DISABLE<\/strong><\/li>\n<\/ol>\n
- Page Cache \u2013 ENABLE<\/strong><\/li>\n<\/ol>\n
- General<\/strong><\/li>\n<\/ol>\n