Speed Index < 1000 with Nginx, ngx_pagespeed, PHP, W3TC

Nginx logo
Nginx logo
Nothing is more annoying than slow loading websites - but if you host WordPress yourself (in my case on a cloud server at JiffyBox) you have plenty of room for optimization. Here I present some of them.
The final result in advance: for the blog start page at www.tech-blogger.net determined webpagetest.org on 09. November 2013 a speed index of 601 (smaller is better, more information about the speed index) for the "First View" and 401 for the "Repeat View". All this for a normal WordPress blog page (lightbox for pictures, 10 posts on the start page, pictures for posts, Google Analytics) with a theme based on TwentyTwelve (a little bit adapted by me for SEO).

The Software

In order not to be slowed down by outdated software versions, I decided to use a virtual server with Debian 7.1 "Wheezy" for this project. For the Debian 6.0.8 I have been using so far, unfortunately not all packages are available in the versions I need. In detail the cornerstones of my setup look like this:

  • 3 CPU cores, 2 GB RAM, 75 GB HDD
  • Debian 7.2 "Wheezy"
  • Linux version 3.10.13-x86_64
  • nginx 1.4.3 with ngx_pagespeed and SPDY from dotdeb.org
  • PHP 5.5.5 with Xcache 3.1.0 from dotdeb.org

MYSQL runs on another vServer of my previous provider - the access to the database must be done via the internet, but this is not important because of the caching. In the future the database will be moved as well, but that needs some time and preparation.

The settings

With nginx, gzip and Pagespeed I have already dealt with this in the past - but I didn't like the use of Google's page speed service and the associated redirection of all requests via the Internet giant's servers anymore after a while. Furthermore, this way you lose the geolocation of the server's IP address in Germany (and a planned Support of SPDY does not get any easier). So after the software mentioned above was installed, it was time to make the right settings. I assume here that there is already a running WordPress blog, so PHP and Mysql are installed correctly, and I only show suggestions for changes.

activate ngx_pagespeed

The advantage of the Nginx package from dotdeb.org is that the Pagespeed module is already present and only needs to be activated. Add it to the nginx.conf (in Debian under /etc/nginx/nginx.conf) in the "http" section:

pagespeed on;
pagespeed FileCachePath "/var/www/pagespeed_cache/"; adapt #an own system
pagespeed EnableFilters combine_css,combine_javascript; #Two example filters

Now Pagespeed is enabled for all existing vHosts, in these vHosts it can be disabled (if it does not harmonize with a website at all) or adjusted accordingly - the latter is my goal. First the general settings that have to be used for each vHost that should use nix_pagespeed. Add these in the "server" blocks of the respective vHosts:

location ~ "\.pagespeed\.([a-z]\.)? [a-z]{2}\. [^.]{10}\. [^.]+" { add_header "" ""; }
location ~ "^/ngx_pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$" { }
location /ngx_pagespeed_statistics { allow; deny all; }
location /ngx_pagespeed_global_statistics { allow; deny all; }
location /ngx_pagespeed_message { allow; deny all; }
location /pagespeed_console { allow; deny all; }

Now to the specific settings using the filters. You have to try a little bit, not every filter works with every Javascript/CSS, in my case e.g. "defer_javascript" caused the lightbox to stop working and the pictures were simply loaded on a new page - not nice. In the end, I ended up with the following filter set:

1TP3Pagespeed Filter
pagespeed XHeaderValue "Pagespeed on kadder.de powered by Nginx
pagespeed EnableFilters insert_dns_prefetch;
pagespeed EnableFilters lazyload_images,recompress_images,rewrite_images,convert_jpeg_to_progressive;
pagespeed EnableFilters move_css_to_head;

W3TC - Install WordPress Total Cache

In interaction with XCache you can W3TC really make very good use of it. But also here you have to take care that functions do not overlap or are executed twice. For example, it is deadly to let CSS which W3TC minified was edited by Pagespeed - you have to decide which tool to use. But what W3TC is good for: increase browser caching accordingly, remove cookies for static files, and store database requests, objects and pages in the XCache (which should be at least 128 MB, otherwise it can get crowded even with a simple blog like this one). W3TC can easily be installed via the plugin management of WordPress, after that you have to copy some settings into the respective vHosts configuration to make everything work.

WordPress nginx compatibility

Most WordPress manuals refer to Apache. But I decided to use Nginx, because this server is "lighter" than Apache and convinces with really high speed. To make WordPress a bit easier, it is recommended to install the plugin "nginx Compatibility". This can be done via the plugin search, you should not be irritated by the fact that the plugin page is in Russian.

WordPress SEO by Yoast

Not a direct theme for performance, but you don't try to get a blog especially fast and you don't want to shine with the search engines. A tool that works without problems even with the measures mentioned here: WordPress SEO by Yoast. The functions of this plugin would certainly go beyond the scope of this article ­čÖé

Conclusion and outlook

With relatively simple measures I was able to increase the display speed of my blog significantly. The biggest hurdle is probably an own server or the right software on a rented webspace. As mentioned at the beginning, I see another important "expansion stage", namely the use of SPDY. SPDY is an HTTP/1.1 alternative and works only over SSL connections (I ordered a certificate for it, but unfortunately it was not finished over the weekend). Through the use of SPDY should be able to reduce loading times by another ~20 percent - I am curious. If you still have basic thoughts on this topic, you are welcome to share them here - I will continue to try to deliver my pages as fast as possible, and this should be in the interest of all users on the internet.

Leave a Reply

Your email address will not be published. Required fields are marked *