Categories
Tutorials Wordpress

How to configure W3 Total cache for best performance

Since the time Google announced that the Page Load time also plays an important role in ranking a web site, all of us are craving for a faster site load to get the SERP. But WordPress is notoriously famous for giving slow performance as it dynamically generates every posts and pages using database queries. Usage of various plugins for customization of a WordPress based site adds to this to make the site more slower. It does not mean that we will abandon WordPress and embrace another blogging platform. WordPress is the best blogging platform and have millions of good things to offer. There are various ways to make the WordPress based site faster.

Using a good performance optimization plugin is one of the best way to make your site faster. When we think of performance optimization plugin 2 things come to our mind e.g W3 Total cache and WP Super cache. For a week or so I have been testing both the plugins in various websites and in all my tests W3 total cache has far exceeded WP Super cache in all aspects. The Page speed and Yslow scores are higher in all my tests while using W3 total cache. Only problem with W3 total cache is that, it has huge customization option and if not done properly will result into a negative effect. Hence in this tutorial, I will take you through a step by step configuration of W3 Total cache.

Before you activate W3 Total cache, we suggest you to check the PageSpeed and Yslow score of your website using GTMetrix. Make a note of the scores and see the differences in score after you finish configuring the plugin.

Installing W3 Total Cache

First of all uninstall/deactivate any performance optimization (caching) plugins like WP Super cache. This is mandatory to avoid any conflict in further steps. When you are sure there is no caching plugin running, Download W3 Total Cache for free from WordPress Plugin repository and save it on the desktop. Unzip the archive and use your favorite ftp program to upload it to the wp-content/plugins folder of the website where you want to configure W3 total cache. Before we activate and proceed with the configuration, we will need to make the wp-content folder writable. So using the FTP client, change permission of wp-content folder to 777 till we are done with set up. Now go to WordPress Admin panel and click on plugins, look for W3 total cache in the list of inactive plugins and activate it. Upon activation a new menu item as shown in figure will appear in Admin panel.

This plugin has a nice notification system, which will issue notification messages whenever some action needs to be performed.

General Settings:

The first step in the configuration process is the general setting. Click on the General settings from the new Performance menu that appear. You will be presented with the General settings page.

The General settings is an overview of different features available in W3 total cache. This will show settings for Page Cache, Minify, Database Cache, Object Cache, Content Delivery Network (CDN) and Browser Cache. From here we can globally enable or disable a feature available in W3 Total Cache. By Default the W3 Total cache runs in preview mode. In that mode any changes we make in the plug-in will not be applicable to the live site. So our very fast job is to enable the plugin for the live site by disabling the Preview mode, hence the General settings page will look like this:

If you disable any of the features under general settings the option “Deselect this option to disable all caching functionality” will be automatically unchecked. So if you disable any feature and see that the option is unchecked, do not worry about it. It looks like a wrong reference. While testing various options I found that the Minify settings from W3 total cache can be disabled and we can use another plugin called Wp-Minify for the best minification. So my suggestion for General settings is

Page Cache:  Enable  and the method is Disk (enhanced)

Minify: Disable

Database cache: Enable and the method is Disk

Object cache: Enable and the method is Disk

Content Delivery Network: Enable and the CDN type depends upon what kind of CDN you use.

Browser Cache: Enable.

Once you are sure the general settings look like the above, we can proceed with the configuration of individual features.

Page Cache Setting:

Click on the drop down that reads general setting and select Page cache or click on Page cache from the Performance menu on Admin panel to access the Page cache setting. The Page cache feature of W3 total cache creates static html pages of WordPress posts and pages. So the pages are not generated dynamically every time they are requested. hence it reduce load considerably on the server and site loads faster. There are many option here, but we need not worry about all the features and leave them as per default setting. We just need to change the settings under General category. See the image below:

The settings page above shows that the Page cache feature is currently enabled. Make sure in your set up it reads the same. If you have followed the general setting instruction above, it will read enabled. However for you, if it says disabled, go back to general settings and Enable Page cache. It also gives the option to Empty cache, which will rebuild a new cache with your changes if you have made any.

The option Don’t cache pages for logged in users has been selected for the benefit of Admin who can see the changes in the live site without clearing the cache every time they make any changes. Homepage being the most viewed pages for many site we have selected to cache Home page.

We recommend to go with the default settings for options under Advanced, cache preload and Varnish.

Minify settings:

Minify is the process of compressing CSS, HTML and JavaScript by removing the comments and line break as well as zipping it and then combining the similar files together. So the size of those files will be reduced and loading will be faster. In our test with JS files minified and combined, we ran into some issues with the sites where in tabbers, lazy loading as well as some other functions which depends upon JavaScript did not work. So we disabled the Minify features in W3 Total Cache and used a separate plugin called Wp-Minify. With Wp-Minify we were able to combine and minify the js and css without affecting site features dependent on JavaScript. We also got better Page speed and Yslow result with Wp-minify.

So our recommendation is disable the Minify features in W3 Total cache.

Database Cache & Object Cache Settings:

This Database Cache feature helps in caching Database queries. So when a database query is made it goes through the cache.  If the query is not found in the cache then only actual query to DB will be made. In a WordPress based site what we see at the front end is a result of many database queries in the back-end. Options like Page views, number of comments etc are pulled up from database using queries. So caching these queries will reduce the load on the DB and we can significantly improve the performance.

We suggest not to make any changes in the settings for Database cache and Object Cache, just leave the default intact. If you are on a shared hosting environment, you may even consider disabling these 2 options. 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 can considerably speed up the site.

Browser cache:

When we access a website for the first time, the static files like css, JavaScript etc are downloaded onto our browser and stored in browser’s cache. Next time we access the same website those static files are accessed from the cache. The Browser Cache feature of W3 Total Cache helps in the setting of the behaviors of those cache-able files. It enables http compressions and specify expiration header for the files. The setting in browser cache helps the web browser to understand how to behave with the cache-able files. The browser cache settings will change the rule in .htaccess file. So if you are not sure about modifying the rules in .htaccess file, making changes through the browser settings is the best option. A correct setting here will definitely increase the PageSpeed as well as Yslow score.

By default Enable HTTP (gzip) compression and set W3 Total Cache header is enabled. We suggest you the following settings for browser cache:

Under General Setting Enable(check) the options Set expires header, Set cache control header, Set entity tag (eTag), Set W3 Total Cache header, Enable HTTP (gzip) compression and disable only the option Do not process 404 errors. Enable all the options under Cascading Style Sheets & JavaScript, HTML and Media & Other Files.

The final setting for browser Cache should look like this:

User Agent Group settings:

The user agent group setting has no impact in performance. This is always enabled and helps in redirecting user based upon the user agent of the browser to a different website theme or a different page or altogether a different domain. We can create a group of user agents and take specific action for the group. This option is useful to redirect mobile users to a mobile theme and normal computer users to a normal website theme.

Content Delivery Network Settings:

This is another very important feature of W3 Total Cache plugin. One limitation of web browsers is that simultaneously a browser can download 2 resources from a  domain. So while accessing a website the download able objects have to wait in a que to be downloaded to the browser, so the site load time increases. By using a Content Delivery Network we separate those objects from our primary domain as well as we offer the flexibility of those files being served from a  globally distributed network of the CDN service we use. Hence the site loads much faster. We can even use a sub domain like cdn.primarydomain.com and serve our static files from that sub domain to allow simultaneous download of files.

Currently we at Techie Zone use Speedy Mirror as our CDN provider. This offers 50GB of free bandwidth which is enough for a normal website with around 1000 visitors per day to sustain for 6 to 8 months. If you are looking for a free CDN provider, Speedy Mirror is the best among all. It requires minimal configuration and very easy to set up. The CDN settings we provide here is for speedy mirror. The setup procedure for speedy mirror is so easy that we do not feel like providing the steps here. You just need to register there and provide your domain name. It will provide you a sub domain URL like xxx.speedymirror.com. The static files automatically gets downloaded to their server.

For Speedy Mirror as your CDN provider, we need to Enable the CDN option and set mirror as the CDN type in General setting. Now in CDN settings page under configuration, put the sub domain name you obtained from Speedy Mirror (while setting up the account) for replace site’s host name with option and Auto for SSL support option. Click on Test mirror to test if this is working correctly.

Under general setting, we need to check the options Host wp-includes/ files, Host theme files and Host custom files. Leave the options under Advanced as default.

As we are done with all the settings now, you can check the site performance in GTMetrix and note the scores and compare that with your earlier score. You will surely have a smile on your face looking at those green values.

This concludes the tutorial for setting up the W3 Total Cache plugin. I have tried my best to provide the steps in as simple ways as possible. If you are stuck while setting up the plugin or need any help, you are always welcome to ask for help and we will be glad to help you.

If you need advanced support for setting up this plugin or improving your site speed, we can assist you for a small fee. You contact us and we will get back to you with details.

Categories
Webmaster Wordpress

How to make your WordPress site faster

If you have a blog running on a WordPress installation you might have noticed that the loading time of the blog is not as impressive as other non wordpress based sites. WordPress is database driven and is developed with PHP and MySql. Contrary to a static html based website where all the available pages are already present, WordPress generates the pages on the fly with the help of database queries. If you are on a shared hosting, where there are restrictions in CPU usage and system resources, it is very much required to make your WordPress installation as optimized as possible. Failing this your site will be very very slow and increase server load considerably resulting in cancellation of your hosting account. Also a faster site will provide a better user experience and a lesser bounce rate. It has been noted that 40-60% of daily visitors to a site are first time visitors so they come with an empty cache. Making your page fast for these first time visitors is key to a better user experience.

There are various ways to improve the load time of any websites, but in this topic we will primarily discuss about a WordPress based website. Following the methods described below will definitely make your website lot faster as well as reduce the load on the server.

1. Optimizing the header.php

If you look at the header.php file of a WordPress theme, you will see a lot of php codes in it. For the easier usage of themes the theme developer usually pulls lot of data from the database. But when we install the theme we need to make as many option static and hard coded as possible. Making the header of any WordPress theme static/hard coded will reduce almost 10 to 12 queries. Let’s see this with an example of one of our in-house developed theme Mashlife:

We have the following lines in header.php that can be changed to hard-coded code once this theme is installed on a website.

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico" />
<script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/jquery.js"></script>
<script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/tabber.js"></script>
<script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/superfish.js"></script>
<script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/lazyload.js"></script>

The above codes can be easily changed to the below code and it will still give the same result.

</pre>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="http://sitename.com/wp-content/themes/themename/style.css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="Sitename RSS Feed" href="http://sitename.com/feed/" />
<link rel="alternate" type="application/atom+xml" title="Sitename Atom Feed" href="http://sitename.com/feed/atom/" />
<link rel="pingback" href="http://sitename.com/xmlrpc.php" />
<link rel="shortcut icon" href="http://sitename.com/favicon.ico" />
<script language="javascript" type="text/javascript" src="http://link-to-javascript-folder-in-theme/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://link-to-javascript-folder-in-theme/tabber.js"></script>
<script language="javascript" type="text/javascript" src="http://link-to-javascript-folder-in-theme/superfish.js"></script>
<script language="javascript" type="text/javascript" src="http://link-to-javascript-folder-in-theme/lazyload.js"></script>

The best way to convert the dynamic php code to hard-coded static html code is, by viewing the source of the website and copy those lines directly from the source and replace with corresponding lines in header.php. The above example will reduce the database queries by 10.

2. Optimizing the footer.php

The footer area in WordPress blog is served by footer.php file. This file also contains some lines of code that can also be converted to static hard-coded html code. You can look for Powered by line and also “template_directory” lines in the code and replace them accordingly (refer the tips in header optimization. In our Mashlife theme we can replace the following codes:

<a href="http://qlogix.net/"><img src="<?php bloginfo('template_directory')?>/images/logo-small.png" width="97" height="25" alt="Qlogix Solutions" /></a>
<a href="http://wordpress.org/"><img src="<?php bloginfo('template_directory')?>/images/wp-logo.png" height="25" alt="Wordpress" /></a>

With this one:

<a href="http://qlogix.net/" title="Qlogix Solutions"><img src="http://techiezone.net/wp-content/themes/mashlife/images/logo-small.png" width="97" height="25" alt="Qlogix Solutions" /></a>
<a href="http://wordpress.org/"><img src="http://techiezone.net/wp-content/themes/mashlife/images/wp-logo.png" height="25" alt="Wordpress" /></a>

This changes will reduce another 2 queries to the database.

3. External Stylesheet and script:

Put the stylesheets and java scripts in external files so that these files will be cached by the web broswer and will not be downloaded upon every page visits. This will also reduce the size of html document.

4. Reduce the number of http requests:

Each mention of style sheets and scripts in an html/php document increase the http request by one there by increasing load time. So whenever possible combine all css into one style sheets and all scripts into a single scripts. For images, the best method to reduce http request is the use of CSS Sprites.

Also note that the plugins add Database queries as well as style sheets, those style sheets will again take additional queries to retrieve the style information. We can combine these styles with our theme’s style sheet and reduce queries as well as clutters in the website. To see if any plugin is adding style sheets and Javascript, just view the source of the website and look in the header and footer area.

<p id="line28"><link rel="stylesheet" href="<a href="view-source:http://techiezone.net/wp-content/plugins/sharebar/css/sharebar.css">http://techiezone.net/wp-content/plugins/sharebar/css/sharebar.css</a>" type="text/css" media="screen" />

A code like above indicates that the sharebar plugin in my WordPress installation is adding styles through sharebar.css file. WordPress beginner has a nice post detailing the effects of WordPress plugin to site load.

5. Remove unnecessary plugins:

Use only the required plugins, do not over load your WordPress installation with unnecessary plugins which is not serving any real purpose. Most of the time I am tempted to install plugins to achieve something which is not really required. So always stay away from those plugins. We will publish a list of really important plugins for WordPress in a  future post.

6. Use a caching plugin:

The caching plugins like WP Super Cache creates html version of your WordPress pages which is directly served by Apache. This method of serving webpages does not require processing large chunk of php codes on each request, hence this substantially increase page load time to a higher extent and reduce server load.

7. Minify Javascript and css:

Minifying is the process of removing unnecessary characters, white spaces and comments from the code to reduce the size, which in turn improves the load time. You can use WP Minify plugin to compress and combine your css and javascript files. The WP Minify grabs JS/CSS files in your generated WordPress page and passes that list to the Minify engine. The Minify engine then returns a consolidated, minified, and compressed script or style for WP Minify to reference in the WordPress header.

8. Use Yslow to determine the load issue:

Yslow by yahoo is a Firefox extension which works wth Firebug add-ons. It analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages.

The above methods can be performed by any one and will help in page load time to a great extent. There are other methods which may not be as easy as the above and can not be recommended for a newbie, also they may incur cost like using Content Delivery Network (CDN) to serve your static contents.

Please let us know if your site load time increased after following the methods listed here. Also please share any other emthods which you feel will contribute to sites load time without lot of efforts.