How I Made vizualrecords.com Fast

Updated 3 August 2014

Everyone wants their WordPress sites to load fast and as a web developer I am always trying to give my clients the best performance possible. When it's my site (like this one) reducing page load time is something of an obsession. After implementing some basic performance boosters such as a caching plugin I still had a time-to-first-byte (TTFB) delay of over 2 seconds so I was determined to reduce this as much as possible.

With vizualrecords.com I've spent countless hours analyzing the site's performance and implementing a myriad of ways to reduce page load time. Yet every site is different and what works on vizualrecords.com may not work on another site but I thought I would share some tips and tools that I am using.

General Performance Tips

The less the browser has to download the quicker the page will render. Here are some tips to reduce the footprint of your web site:

  • Optimize your images. Images are usually the largest chunk of data on a web page so use an image optimizer like SmushIt or Kraken.io to compress your images as much as possible. If you can, reduce the number of images on your page. Less is more.
  • CSS in the header, JS in the footer.
  • Use valid HTML and test your site's code with a HTML validator
  • Avoid bad requests, 404 errors
  • Use css instead of images where possible
  • Remove unused CSS
  • Minify css and js files

WordPress Performance Basics

As above, the more elements and requests on a web page, in general the longer it will take to load and WordPress sites are no exception. To get your pages to load as fast as possible you want your WordPress install to be lean and mean.

Here's some easy things that you can do right away:

Plugins

Use Only the Plugins You Need

While plugins are part of what makes WordPress so extensible, poorly coded plugins can really drag your site down. Only install plugins if they add necessary functionality to your site.

If you are not going to be using a plugin, delete it completely as even deactivated plugins add bloat to your database. If you have plugins that only apply to the WP Admin (such as P3 Performance Profiler), deactivate (or delete) them when they are not in use.

Test Your Plugins

Use P3 Performance Profiler to show which plugins are resource intensive and help track down some performance hogs. If a particular plugin is adding a lot to page load time, see if there is another plugin (or a simple function) that can do the job. For example, Jetpack has a ton of features but if you are only using one or two of them then see if there is a simple plugin or snippet that does what you need. In general, if you can find a simple php function that can do what a plugin does, use the function instead.

On vizualrecords.com, a P3 scan showed that our shopping cart plugin cart66 was adding almost 2 seconds to our time to first byte but we absolutely need it. Thus, I was determined to reduce the TTFB as much as possible so that forced me to look at other ways to accomplish that without disabling the plugin.

Plugin Organizer

Plugin Organizer is a plugin that allows you to selectively load plugins only on pages/posts that need them as well as specify the order that plugins load. I just started using this on vizualrecords.com which I configured to load cart66 later in the chain which reduced my TTFB (time to first byte) by over 1.5 seconds! You can activate/deactivate plugins on a page-by-page basis so it takes a bit of time to configure but it really helps a lot.

Lazy Widget Loader

The Lazy Widget Loader plugin allows you to defer widget loading until after the page loads. This can be very useful if you have served ads, social buttons or other content that takes a bit of time to load. I used it to defer loading of the cart66 shopping cart widget which helped load time even more.

Ajaxize

Ajaxize wraps any php function in an ajaxable div so it reloads every time a page is generated. Use Ajaxize to keep widgets or other functions dynamic while using the most robust caching plugin settings. We are using this to keep the shopping cart widget and recently viewed releases fresh.

Caching

Website caching can be very complex and often a combination of tools are needed to cache all the different elements on your page.

WordPress Caching Plugins

To really speed up your site you should use a caching plugin. Both W3 Total Cache and WP Super Cache are really good and can significantly reduce page load times. W3 Total Cache has a lot of features and can be somewhat daunting to set up but with a bit of effort you can achieve pretty significant results.

For vizualrecords.com I'm using WP Super Cache 1.3.2 with Legacy Caching and Late Init so it is not quite as fast as using mod_rewrite but this allows caching to work with dynamic widgets like our cart66 widget cart and Login With Ajax. Getting the proper WP Super Cache settings took a lot of trial and error but now I have it dialed in pretty well.

.htaccess rules

Adding .htaccess directives to leverage browser caching, expires headers, cache-control and gzip compression can have a huge impact. Doing a search for "wordpress performance htaccess" should lead you in the right direction. While I'm still trying to get a bulletproof default .htaccess file I'm getting closer.

WP Super Cache adds the appropriate rules that it needs and depending on what type of caching you are using but you may want to add more as necessary.

Reduce http requests

If you have a lot of elements on your page, from images to plugin stylesheets and js files each one represents a separate http request. Reducing the number of requests as much as possible will provide a significant speed boost.

One strategy I used was to dequeue plugin css and stylesheets and combine all plugin css and js into single files. This requires you to edit plugin core files so it is not recommended unless you know what you are doing. Another thing to remember with this is that if you dequeue scripts and styles in a plugin, when you update these changes will be lost and you could be loading styles and scripts twice so be careful.

If you are using jQuery plugins or modules you can add these to your theme's js file or create a separate file with all the js in one go. In addition, you can load js files only on pages that need them.

Google PageSpeed

Use PageSpeed in the Developer Tools in Chrome to test your pages. Following all the suggestions there will go a long way and help you find a lot of issues. PageSpeed no longer gives a score which I think is a good thing.

Test your pages

Use online tools like GTMetrix or the LoadImpact Page Analyzer to test your page loads and find bottlenecks.

Serve static resources from a cookieless domain

Sending a cookie with each file adds a lot of unnecessary bytes to your page. Using a cookieless domain for static files like css, images and js can eliminate this extra bloat. Depending on your host, you may be able to set up a cookieless subdomain but on DreamHost this doesn't work so I have a separate cookieless domain. Check the response headers of your static files using developer tools to make sure cookies aren't being sent.

Quick and dirty cookieless domain

On DreamHost, I registered and hosted another domain (vrstatic.com). Then is used the following .htaccess directives to make the domain cookieless:

SetEnv session.use_cookies='0';

Header unset Cookie;

Header unset Set-Cookie;

Then I just set vrstatic.com to "Mirror" vizualrecords.com. Thus even though the files are technically hosted on vizualrecords.com, setting the uri to vrstatic.com works and there are no cookies sent.

Use multiple domains to leverage parallel downloading

Along with the static domain, I have a couple other domains that serve files. Thus the browser can download files in parallel across mutliple domains. It is recommended that you use between 1 and 5 hosts.

Use a CDN

vizualrecords.com now uses Amazon S3 to serve all static image files and this has definitely helped with the TTFB.

Run your web server with nginx

I'm still running Apache as I haven't had any experience with nginx but it is supposed to be faster.

Advanced Caching

Server-side Caching

Server-side caching can really help to reduce load times and can work in tandem with WordPress caching plugins. Some hosts offer server-side caching by default or as an option in the hosting panel. With other hosts you can either activate it (like XCache with DreamHost) or you will have to install the packages/modules yourself (requires SSH access to your host).

Object Caching

vizualrecords.com uses DreamHost on a VPS which has the option to utilize XCache object caching on a domain by domain level which I have configured. This helped to reduce load time another 30-40%. Other popular object caching modules are APC and eAccelerator. These have to be installed on the command line so you need SSH access to your web host.

Database Caching

Using a new plugin called Query Monitor I was able to check all the mysql queries that occur when a page loads. With this I saw that cart66 had a lot of queries so I also installed Memcached to cache MySQL database queries which reduced load time even further. I haven't had any luck with the Memcached object-cache.php drop-ins (in fact they increased my load time) so I don't have one installed.

With both XCache and Memcached installed on my server, the time to first byte has been reduced significantly.

In conclusion

Hopefully these tips can help you make your site as speedy as can be. Every site is different so try some of these performance tips and find the right combination of tools that works for you.