Optimize WordPress on Nginx with Gzip, Browser Cache, and Page Cache

The following tutorial uses nginx gzip and server caching, eliminating the need for the W3 total cache and the many nightmares that can come from it’s use. In future tutorials we will integrate in the Amazon S3 CDN. The goal is a perfect score for page speed @ tools.pingdom.com

After completing this tutorial, if you have followed the previous tutorial AWS Ubuntu 12.04 LTS with Nginx and WordPress, you will have a WordPress site as fast, possibly faster than what many hosts charge $30 per month for. You will also be able to host an unlimited number of sites on your personal optimized Nginx server configuration.

Unlimited Site Hosting

Not just WordPress, but most PHP back platforms including Drupal, Magento and many others!

WP Engine, a well known WordPress hosting company, charges $249.00 per month for 25 sites using their Nginx configuration. As of this writing, WP Engine does not publicly disclose their pricing for the unlimited site service this tutorial will give you.

AND!!! If you configure your system using an Amazon EC2 micro-instance and micro database, then you may qualify for the hosting plan free for one year, under the Amazon Free Tier Plan.

Before we begin, test your site from the previous tutorial at tools.pingdom.com and note your stats. They are about to significantly improve :-)

Let’s start optimizing Nginx for WordPress

Enable the Nginx gzip abilities

First, we need to make some very easy edits to the nginx.conf

Using terminal on MAC or another command line interface, SSH into your servers root. For tutorials on setting up your Amazon AWS server and using command lines, please see Amazon AWS WordPress and Ubuntu Nginx AWS EC2 RDS WordPress

Once you are logged into your server through SSH use the following commands.

cd /

sudo vi /etc/nginx/nginx.conf

Remove the comments from the following. All you need to do is remove the # in front of the individual lines.

##
# Gzip Settings
##

gzip on;
gzip_disable “msie6”;

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

Save and exit the editor.

sudo reboot

That’s it!!! Test your site now at tools.pingdom.com and check your stats.

Use Nginx server caching for images, video and other cacheable files with extensions.

The following will use nginx to place Expires Headers on your resources. The time that these files use for caching can be modified as you wish. Separating file extensions into separate location blocks can allow you to configure different setting for different file types.

Begin with the following command:

cd /

cd /etc/nginx/sites-available

For each domain you are using, including the subdomains you have configured such as www.yoursite.com you will need to add the following to your configuration files. This tutorial will configure the nginx server caching for yoursite.com and www.yoursite.com. In the future we will look at combining these two “servers” under one configuration, but for now please continue.

sudo vi yourdomain.com

You should see the nginx server configuration for yourdomain.com and you will want to modify it to match below by adding:

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 1y;
log_not_found off;
}
location ~* \.(htm|html)$ {
expires 1m;
log_not_found off;
}

Nginx Server Caching Configuration

server {
listen 80;

root /var/www/websitescloudhost.com;
index index.php index.html index.htm;

server_name www.websitescloudhost.com;

location / {
try_files $uri $uri/ /index.php?q=$uri&$args;
}

error_page 404 /404.html;

error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/www;
}

# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9$
location ~ \.php$ {
#fastcgi_pass 127.0.0.1:9000;
# With php5-fpm:
fastcgi_pass unix:/var/run/php5-fpm.sock;
fastcgi_index index.php;
include fastcgi_params;
}
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 1y;
log_not_found off;
}
location ~* \.(htm|html)$ {
expires 1m;
log_not_found off;
}

}

Save the new configurations and exit the editor. Restart nginx with the following command.

sudo service nginx restart

You may need to reset your symlinks. If so first remove from /etc/nginx/sites-enabled the symlink that you need to update.  After removing use the symlink command from previous tutorials to reset the link.

After adding the new location blocks to enable static file caching on nginx, it is time to run another page speed test on tools.pingdom.com :-) Keep taking those notes…

When analyzing your page speed you should see that html pages using WordPress “pretty links” are not being cached. The last piece of the puzzle involves caching these files. There are lots of methods to enable caching static html from the dynamic WordPress application. We will be covering the plugin Quick Cache. This plugin is much lighter and easier to work with than W3 Total Cache. Looking through the support threads at WordPress.org for W3 Total Cache will explain why we avoid using it.

Install and Configure Quick Cache

Quick Cache is the plugin labeled “Speed Without Compromise,” but after the many nightmares using W3 Total Cache, we always make full backups of our sites before enabling the Quick Cache plugin. Backups of WordPress databases and files are covered under other tutorials.

Log into your WordPress admin, install and activate the Quick Cache plugin (YES! It still works great, even with WordPress 3.6.1):

After the installation and activation, lets start configuring the plugin. The following configuration works well with comments, WooCommerce and Theme My Login.

DO NOT enable Quick Cache until after you configure and save the following. (If you update your site many times a day, you may want to modify the cache time to 3600 which is one hour):

Internal Debugging: False
Logged In Users: True (Don’t Cache)
Get Requests: True (Don’t Cache)
Client Side Cache: False (Disallow)
Cache Expiration Time: 86400
Dynamic Cache Pruning: Single + Front Page
No-Cache URI Patterns: USE THE FOLLOWING

wp-app
wp-signup
wp-register
wp-activate
wp-login
wp-admin
xmlrpc
cart
checkout
/checkout/pay/
/checkout/order-received/
login
logout
lostpassword
mijireh-secure-checkout
my-account
/my-account/change-password/
/my-account/edit-address/
/my-account/lost-password/
/my-account/view-order/
register
resetpass
shop
product
wp-comments-post

No-Cache Referral Patterns: LEAVE BLANK UNLESS NEEDED
No-Cache User-Agent Patterns: USE THE FOLLOWING

w3c_validator
iPhone
iPad
iPod
Android
BlackBerry
SymbianOS
SCH-M\d+
Opera Mini
Windows CE
Nokia
SonyEricsson
webOS
PalmOS

Mutex File Locking: Use Mutex (Semaphore)

MD5 Version Salt: LEAVE BLANK

Sitemap Auto Caching: No (not necessary)

Deactivation Safeguards: Leave Blank

SAVE the configuration!!!

Now check your page speed and begin boasting! Please share this page with your friends!

To avoid having a 200 success header on your 404 page you need to add the following at the top of your 404.php file in your themes files.

<?php
if (is_404()) {
    define('QUICK_CACHE_ALLOWED', false);
}
?>

Comments are closed.