speed-up

How to optimize speed-up any WordPress website with W3 Total Cache

 

We are selling WordPress themes on ThemeForest marketplace with more than 4000 customers, we often get many questions from customers on how we can speed-up/optimize speed on our website. Via that high request for instructions, we decided to write an instruction on how to speed up and optimize WordPress websites.

In this article, we will show you how to do that with W3 Total Cache plugin, which we have used for many of  our demo sites.

Of course, website loading depends on many conditions such as server performance, your connection to the website, media resources on your pages, etc. We are using Page Cache option on W3 Total Cache to keep responses from the slowest server.

 

Install W3 Total Cache plugin

Firstly, you need to make sure that there are not any cache plugins are activated – example: WP Supper Cache. There are conflicts between these cache plugins, the plugin will have issues once activated.

Now, go to your WordPress admin panel and click on Plugins > Add news. Type “w3 total cache” on the search input and search for plugins, you should see results as image bellow:

Click on the ‘Install Now’ button then activate the plugin after installation.

 

w3-total-cache-install-1

 

Configuration W3 Total Cache

There are many options on this plugin. Those options are best applied for the developer who understands a little bit more about the system . But through this article, you will know how to config plugin easily.

We often use 3 types of caches on W3 Total Cache, they are Page Cache, Minify and Browser Cache.

Firstly, you should enable them from General Setting of W3 Total Cache by click on menu Performance > General Settings

Then tick the check box of Page Cache, Minify and Browser Cache. As for Page Cache and Minify, they provide the method of how cache data stored. We often use Disk Basic/ Disk Enhanced. It means your cached data will be stored on files of hosting. W3 Total Cache generates some files to store data then auto-clear them after the session end. Thus don’t worry about the hard-disk server capacity.

w3-total-cache-general

Some hosting support Xcache, Memcached, APC methods. They are sweet methods since they are fast to read/write the data. You should select one of them.

On Minify, you should keep other options as default.

Now your cache has been enabled but you still need to do some other tweaks on each type.

 

Page Cache

This type creates static cache page for each page that is loaded. It means your pages are generated to a static HTML files and WordPress returns the content of file each time user requests the page without running PHP and MySQL to process and return data. So, this type will not take much server resources.

 

Minify

You often hear about the combine and reduce the size of HTML/CSS/JS. That is the meaning of Minify. W3 Total Cache collects CSS and JS to remove space line breaking characters and comment blocks then process the same thing for the output HTML. That is a great thing when compact Page Cache and Minify, it reduces the size of the page, you browsers will get the data quickly after requested – < 200ms.

We need to select more options on this type of cache by going to Performance > Minify

You should keep the setting as the images bellow:

w3-total-cache-setup-minify-html

w3-total-cache-setup-minify-js

w3-total-cache-setup-minify-css

 

Browser Cache

There are pages using the same static resources such as images, CSS, JS files. So why browsers don’t store them into temporary folders on first-time visiting the website and use them when the users go to other pages. Luckily, browsers support that method, Website just needs to tell those files how long a browser would keep them. That is the main meaning of Browser Cache. In W3 Total Cache you can set how long the resource would be kept on temporary folders.
Do the setting as the image bellow:

w3-total-cache-setup-browser-cache

You have everything need to setup. Now we need to clear the cache and access website for generating cache.
Click on Performance > Empty All Cache on admin toolbar.

clear cache

 

After that you should open private browse/Incognito mode and access your pages. It is slow on first-time visiting pages but then it will get faster on next time.

All done.

Our business themes Highstand, Hoxa, Arkahost, Aaika, Aloom, Linstar are using this method for caching demo site. Our themes work well with this plugins.

Hope you enjoy.

highstand-preview aaika-preview arkashot-preview hoxa-preview linstar-preview aloom-preview