Using W3 Total Cache and GTmetrix to optimize WordPress

As your site gains traffic and users, and as you add additional content, your site may begin to slow down because WordPress has to recompile every page every time a user accesses it. By utilizing caching, you can reduce the amount of work WordPress has to do for every page load, which in turn speeds up your site.

Because WordPress does not have built-in caching functionality, you can use the W3 Total Cache plugin to add it to WordPress. To quantify the improvement in speed, you can use the GTmetrix plugin.

Installing the GTmetrix Plugin

First, install the GTmetrix plugin to help test the speed of the WordPress site. To do this, follow these steps:

1. Log in to WordPress as the administrator.
2. On the left sidebar, hover over Plugins, and then click Add New.
3. In the search box, type GTmetrix, and then click Search.
4. Under the listing GTmetrix for WordPress, click Install Now.
5. In the confirmation window, click OK to install the plugin.
6. After the plugin has installed, click Activate Plugin.
7. On the left sidebar, click GTmetrix.
   At this point, you must obtain a GTmetrix API Key. The key is free, and allows you to run performance tests on your WordPress installation. Follow the procedure below to obtain an API Key.
8. Open a new browser window, and navigate to http://gtmetrix.com/api/
9. Click Generate API Key.
10. If you already have a GTmetrix account, log in with your account. Otherwise, click Create an Account in the popup and enter your account details.
11. After your account has been created, you may need to click Generate API Key again to generate the key.
12. Copy the API key, and switch back to the window with your WordPress administration page.
13. If you are no longer on the GTmetrix configuration screen, on the left sidebar click GTmetrix.
14. In the GTmetrix Account Email text box, type the e-mail address associated with your GTmetrix account.
15. In the API Key text box, paste the API Key you copied from the GTMetrix site.
16. Click Save Changes.

Running a performance test using GTmetrix

GTmetrix helps you determine the level of optimization in your WordPress site. To run a performance test, follow these steps:

1. Log in to WordPress as the administrator.
2. On the left sidebar, hover over GTmetrix, and then click Tests.
3. To test your home page, click Test your Front Page Now.
4. The test runs, and a graded score appears.
5. To view the detailed results of the test, click Detailed report under the results of your test.

Installing and configuring the W3 Total Cache Plugin

W3 Total Cache adds caching functionality to WordPress. To install the plugin, follow these steps:

1. Log in to WordPress as the administrator.
2. On the left sidebar, hover over Plugins, and then click Add New.
3. In the search box, type W3 Total Cache, and then click Search.
4. Under the listing W3 Total Cache, click Install Now.
5. In the confirmation window, click OK to install the plugin.
6. After the plugin is installed, click Activate Plugin.
7. On the left sidebar, hover over Performance, and then click General Settings.
8. If the error message “The required directives for fancy permalinks could not be detected” appears, follow these steps:
   • On the left sidebar, hover over Settings, and then click Permalinks.
   • Choose a method of Permalinks other than the default setting, and then click Save Changes.
   • To return to the W3 Total Cache Settings, hover over Performance in the left menu, and then click General Settings.
9. Under Page Cache, select the Enable check box.
10. Under Minify, select the Enable check box.
11. Under Database Cache, select the Enable check box.
12. Under Object Cache, select the Enable check box.
13. Under Browser Cache, select the Enable check box.
14. Click Save all settings.
15. If the error message “One or more plugins have been activated or deactivated, please empty the page cache” appears, click empty the page cache.
16. Open the front page of your WordPress site in a browser window, and refresh it a few times to verify there are no errors. This allows the W3 Total Cache plugin to generate the initial cache for your home page.
17. At this time, you can run another test with GTmetrix to verify the improved performance with the W3 Total Cache Plugin installed and enabled.

Enabling memcached

To further accelerate site performance, you can use memcached together with W3 Total Cache.

To configure W3 Total Cache to use memcached, follow these steps:

1. If you have not done so already, enable memcached for your account.
   For information about how to enable memcached for your account, please see this article.
2. Log in to WordPress.
3. On the left sidebar, hover over Performance, and then click Page Cache.
4. Under Advanced, verify the value in the Memcached hostname:port /IP:port: text box:
   • If your account uses a hostname and port number for memcached, you do not need to change anything.
   • If your account uses a socket for memcached, you must type the path to the socket. For example: /opt/memcached/run/username/memcached-1.sock
5. Click Test. If you do not receive a Test passed message, check the value you specified in step 4 and try again.
6. Click Save all settings.
7. On the left sidebar, hover over Performance, and then click Database Cache.

8. Under Advanced, verify the value in the Memcached hostname:port /IP:port: text box:
   

   • If your account uses a hostname and port number for memcached, you do not need to change anything.
   • If your account uses a socket for memcached, you must type the path to the socket. For example: /opt/memcached/run/username/memcached-1.sock
9. Click Test. If you do not receive a Test passed message, check the value you specified in step 8 and try again.
10. Click Save all settings.
11. On the left sidebar, hover over Performance, and then click Object Cache.

12. Under Advanced, verify the value in the Memcached hostname:port /IP:port: text box:
    

    • If your account uses a hostname and port number for memcached, you do not need to change anything.
    • If your account uses a socket for memcached, you must type the path to the socket. For example: /opt/memcached/run/username/memcached-1.sock
13. Click Test. If you do not receive a Test passed message, check the value you specified in step 12 and try again.
14. Click Save all settings.
15. On the left sidebar, hover over Performance, and then click General Settings.
16. Under Page Cache, confirm the Enable check box is selected.
17. In the Page Cache Method list box, select Memcached.
18. Under Database Cache, confirm the Enable check box is selected.
19. In the Database Cache Method list box, select Memcached.
20. Under Object Cache, confirm the Enable check box is selected.
21. In the Object Cache Method list box, select Memcached.
22. Click Save all settings. W3 Total Cache is now configured to use memcached.

Enabling Redis

To further accelerate site performance, you can use Redis together with W3 Total Cache.

To configure W3 Total Cache to use Redis, follow these steps:

1. Log in to WordPress.
2. On the left sidebar, hover over Performance, and then click General Settings.
3. Under Page Cache, confirm the Enable check box is selected.
4. In the Page Cache Method list box, select Redis.
5. Under Database Cache, confirm the Enable check box is selected.
6. In the Database Cache Method list box, select Redis.
7. Under Object Cache, confirm the Enable check box is selected.
8. In the Object Cache Method list box, select Redis.
9. Click Save all settings. W3 Total Cache is now configured to use Redis.
   Our Redis server configurations use the default Redis IP address and port of 127.0.0.1 and 6379, so no further configuration is needed.

Adding Expires directives to the .htaccess file

You must add Expires directives to the .htaccess file to fully allow browser-based caching. Expires headers instruct the browser to use a locally-cached copy of a file instead of downloading it from the server again, as long as the local copy has been obtained within a specific perfiod of time. You can adjust the expiration dates of the items in these directives however you want.

To add Expires directives to your .htaccess file, follow these steps:

1. Open an FTP connection to your WordPress site. For more information about how to do this, please see this article.
2. Download the .htaccess file and open it in a text editor.
3. Paste the follwing directives at the beginning of the file. Make sure they appear before any other directives:

   ## EXPIRES CACHING ##
   
   ExpiresActive On
   ExpiresByType image/jpg "access 1 year"
   ExpiresByType image/jpeg "access 1 year"
   ExpiresByType image/gif "access 1 year"
   ExpiresByType image/png "access 1 year"
   ExpiresByType application/pdf "access 1 month"
   ExpiresByType application/x-shockwave-flash "access 1 month"
   ExpiresByType image/x-icon "access 1 year"
   ExpiresDefault "access 2 days"
   
   ## EXPIRES CACHING ##
   

4. Save the .htaccess file, and then upload it to your WordPress site, overwriting the existing .htaccess file.
5. Open your WordPress home page and verify the modified .htaccess file does not cause any errors.
6. You can now run another test with GTmetrix to verify the improved performance with Expires directives enabled.

More Information

What Is GTmetrix?

GTmetrix is a free solution that can help with the analysis of your website's speed, performance and page loads. With the help of other optimization tools like Google PageSpeed and YSlow, GTmetrix will give its users a page speed score for their site. While the PageSpeed score and the YSlow score will both be reasonably helpful, they also will give your site's full loaded time. This you have will give you a quantifiable timed baseline to aim towards improving upon. GTmetrix users will also get specific, actionable improvements that can be made to a page to help correct any issues that could be slowing down a site.

GTmetrix users will also have access to a waterfall chart. The chart will show how many requests are made on the page and how long each of those requests takes to render. As far as page load speed is concerned, it is most desirable to have a waterfall chart with as few requests as possible, each taking a minimal amount of time to render.

What are the GTmetrix statistics?

Once GTmetrix evaluates your site, you will see a number of columns that you can click to get more information about how to improve the speed of your site. Two of those columns are PageSpeed and YSlow. You will find a list under both columns of specific actions you can make to improve your page speed, how your site currently scores for that recommendation (a score from 0 to 100) and the priority of those recommendations. Each recommendation also includes a detailed description of what the specific suggestion means.

To begin optimizing your site, make sure to focus on the higher priority recommendations that you don't currently score well for. Some of the higher priority recommendations include:

• Use and activate browser caching – This can improve page load times by having your visitors save the files used on your site to be reused for the next time they visit your site.
• Optimize the parsing of any JavaScript you're using– You can drastically improve your page load times by reducing the amount of unnecessary JavaScript on your page. The same can be said of delaying the parsing of any JavaScript that isn't crucial to the engagement of your site until later.
• Reduce The Amount Of Redirects Needed To Access A Page – The fewer amount of pages that are needed to be hit in order to reach your page's ultimate destination, the less time your visitors will have to wait to access your site.
• Use Keep-Alive For Your Site – Keep-Alive makes it possible for the same TCP connection to be used for each of your site's HTTP requests as opposed to requiring a new connection to be made for each request. The fewer TCP connections that are required to be made, the faster your website will load.
• Keep Your Site's Requests As Small As Possible – Ensuring that your request headers and cookies are optimized makes it possible for an HTTP request to fit into just one packet.
• Stipulate The Size Of The Images You're Using – Specifying image sizes to a browser ensures that the page only has to be built once. Otherwise, the page has to be built more than once to show your site's text and then subsequently download the images.