Author Archives: Taylor Lovett

WordPress Plugins

Simple Cache Plugin

I released a new plugin called Simple Cache.

In my blog post Comparison of Popular WordPress Caching Solutions, I rated a number of popular caching plugins pointing out what I like and dislike about each. After writing the post, I decided to create my own plugin that embodies all the characteristics that I think are best for users based on my research and years of experience in WordPress.

Simple Cache is built on the notion of “two paths”: simple and advanced. The plugin defaults to simple mode which simply allows you to turn caching on and off. It “just works” and makes your site run fast.

Advanced mode let’s you set up page caching and object caching using either Memcached or Redis. The plugin uses forked code from WP Redis, Memcached, and Batcache – all plugins that are used on enterprise WordPress websites serving millions of page views.

The plugin is developer friendly with hooks and filters. It also provides very simple and user friendly instructions, notices, field explanations, and warnings.

Give it a try and let me know what you think in the comments below.

Standard
WordPress Plugins

Comparison of Popular WordPress Caching Solutions

WordPress has gotten a reputation of being, among other things, "slow". Is that true? Well, yes and no. One of the most important factors in website performance is "caching".  Caching is the act of saving things that are computed often in easy to access places. For example, rather than running a tough database query every time a web page is loaded, save the results of that database query the first time it's run. When that same query is about to be run later, use the previously saved version and skip the query. WordPress does not cache "out of the box" but provides a powerful underlying API (or interface) for plugins to accomplish this. This is a dramatic oversimplification of caching and website performance but is enough for my post.

Having a properly setup caching solution in WordPress is extremely important for providing fast page loads. This post will investigate some of the popular caching solutions for standard WordPress users. I’ll make a recommendation at the end of the post to aid in choosing the right plugin for you.

Note that I am only judging basic caching functionality – page, database, and object caching. I believe, and my extensive experience working with client shows, that cramming a ton of extra features into a plugin usually results in a less effective and harder to use plugin. I recommend finding separate, more focused, plugins for CDNs, file compression, minification, etc.

All plugins have been tested with WordPress 4.4.2, nginx 1.9.9, PHP-FPM 5.5.9, MySQL 5.5.46, and Ubuntu 14.04.

I am rating each plugin on the following categories:

  • Ease of Use – How easy is the plugin to use and configure for the average user?
  • Clutter and Upsell Free Dashboard – Is the plugin settings page filled with links to irrelevant websites? Does it contain upsells or ads? Is the plugin settings page logically organized?
  • Page Caching – How effectively does the plugin provide page caching? Page caching is the act of caching entire pages so subsequent requests receive cached versions.
  • In-memory Object Caching – How effectively does the plugin provide in-memory object caching? In-memory object caching is the act of caching arbitrary chunks of data for use later in something like Memcached or Redis.
  • Free Support Quality – How effective is free support being provided?
  • Uninstall Clean Up – How effectively does the plugin clean up after itself? Many caching plugins add and/or modify a number of files in WordPress. These modifications and additions can cause problems if not cleaned up properly.
  • Security – How secure is the plugin to run?

W3 Total Cache

Ease of Use 2/10
Clutter and Upsell Free Dashboard 2/10
Page Caching 4/10
In-memory Object Caching 8/10
Free Support Quality 4/10
Uninstall Clean Up 3/5
Security 9/10
Overall 4.9/10

W3 Total Cache does a LOT of stuff besides standard caching e.g. CDN support, Varnish, Google Page Speed, minification, site monitoring via New Relic, and more. There are a ton of options; 99% of which are not useful for most people. This makes the plugin more complicated to use.

The dashboard is cluttered with up-sells.

Disk and Memcached based page caching still resulted in MySQL queries being run according to my tests. Disk and Memcached based database query caching also still resulted in MySQL queries being run. These are either bugs or poorly explained functionality. Once I enabled the object cache, no more MySQL queries were ran.

After removing the plugin, all the cache files are left in my wp-content folder. The plugin did clean up important functional files.

A plugin audit revealed a good use of important code level security techniques such as escaping, nonces, permission checks, and sanitization. This plugin is safe to run on your website and does not make you vulnerable to hackers.

Regarding support, WP Tavern has reported some serious support concerns.

WP Super Cache

Ease of Use 7/10
Clutter and Upsell Free Dashboard 8/10
Page Caching 9/10
In-memory Object Caching 0/10
Free Support Quality 6/10
Uninstall Clean Up 5/5
Security 9/10
Overall 6.7/10

WP Super Cache keeps things pretty simple with standard functionality. I really like how it has “easy” and “advanced” tabs. Besides basic caching, it supports CDNs and a number of advanced options.

The plugin dashboard is clean and uncluttered. There are no upsells.

Static file page caching works perfectly out of the box. No MySQL queries were ran in my testing of page caching. In-memory object caching on the other hand is not supported by the plugin at all. This is a huge disadvantage as the object cache API is very powerful allowing us to cache complex queries and utilize in memory caches such as Memcached.

The plugin authors (Automattic) seem to be responding to threads in the WordPress.org support forum.

The plugin is well-written. There are no obvious security flaws.

Uninstalling the plugin cleaned up all necessary files.

WP Fastest Cache

Ease of Use 5/10
Clutter and Upsell Free Dashboard 0/10
Page Caching 7/10
In-memory Object Caching 0/10
Free Support Quality 8/10
Uninstall Clean Up 5/5
Security 0/10
Overall 3.8/10 

WP Fastest Cache is somewhat easy to use. All of it’s important features are easily visible. It could be made much clearer what is needed to be done to turn on basic caching.

The plugin has filled with upsells. About half the functionality requires a premium license. However, basic caching functionality is provided for free.

Enabling caching immediately threw a PHP warning. It isn’t exactly clear the type of caching the plugin enables. Is it disk based? Is it page caching? It’s not very clear. The plugin performs disk based page caching. An option must be read in the database before static output can occur. No in-memory object caching is provided.

The plugin author seem to be responding to threads in the WordPress.org support forum.

The plugin uses nonces properly. However, it has some sanitization issues. This plugin is not completely safe for use.

Uninstalling the plugin cleaned up all necessary files.

Hyper Cache

Ease of Use 4/10
Clutter and Upsell Free Dashboard 5/10
Page Caching 7/10
In-memory Object Caching 0/10
Free Support Quality 3/10
Uninstall Clean Up 3/5
Security 0/10
Overall 3.3/10 

Hyper Cache is confusing to use. There is no option to enable caching. Instead you have to click save in the settings page without changing anything. Very strange. The first option shown on the settings page is “Disable Translations” which seems pretty unimportant.

There is some clutter in the dashboard for other plugins by the author, but there are no upsells.

Up front, it isn’t exactly clear the type of caching the plugin employs. Is it disk based? Is it page caching? After testing, I found out the plugin performs disk based page caching. No MySQL queries were ran when the cached page was served. There is no in-memory object caching unfortunately.

Regarding support, the plugin author does not seem to be actively responding to support threads. There also does not seem to be community members providing support.

The plugin has serious sanitization issues and poses a security threat when installed.

Uninstalling the plugin cleaned up important functional files but did not remove everything properly.

Comet Cache

Ease of Use 4/10
Clutter and Upsell Free Dashboard 2/10
Page Caching 7/10
In-memory Object Caching 0/10
Free Support Quality 7/10
Uninstall Clean Up 4/5
Security 0/10
Overall 3.7/10 

Comet Cache makes it very clear how to enable caching. This is a huge plus. Enabling caching gives me an error message to update my nginx configuration. However, after looking at the configuration updates, they are not necessary for basic caching. The plugin has a lot of useful help text. The plugin is not compatible with PHP 5.2; there fore it is not compatible with all versions of WordPress.

The plugin dashboard is cluttered with plugin author promotions as well as upsells. The clutter makes the plugin harder to navigate.

Like many caching plugins, it isn’t 100% clear what type of caching the plugin employs. After testing, I found out the plugin performs disk based page caching. No MySQL queries were run when the page cache was served. There is no in-memory object caching unfortunately.

Regarding support, the plugin authors seem to be actively involved in the support forums. There are also people volunteering their time for assisting others.

The plugin seems to properly sanitize and escape data. However, it is doing some slightly scary things with direct database queries.

The plugin has an option for uninstall method. You can either just delete the plugin or delete the plugin and all it’s data.

Recommendation

If you are looking for easy to use caching that “just works”, WP Super Cache is for you. The plugin provides disk based page caching that will dramatically speed up the vast majority of websites. The support community is vibrant, and the plugin is well maintained.

If you want in-memory object caching and don’t mind getting your hands dirty, install the Memcached and Batcache drop in plugins. Both of those plugins require manually moving files into your wp-content folder. Neither plugin has a settings page as they are both plug and play. They can be somewhat unforgiving if you run into an issue. If you want in-memory object caching but want something easier, I recommend W3 Total Cache.

Spirited comments around these recommendations as well as new ones are welcome 🙂

 

 

EDIT: Lot’s of people recommended I review WP Rocket which is a premium file based page caching plugin. Overall, WP Rocket is a solid plugin. It’s written well and “just works”. However, it is not free and only offers file based page caching. It does not support object caching. I also think the plugin’s UI could be a bit simpler.

Based on my experience with all these plugins, I wrote my own called Simple Cache. Simple Cache offers file based page caching. The plugin literally only has one setting “on or off” unless you turn on advanced mode. Advanced mode let’s you do object caching and in-memory page caching. The plugin is written securely and is extremely performant. Anyone looking for a caching plugin should give Simple Cache a try and leave me some feedback below 🙂

Standard
WordPress Plugins

JSON REST API Subscriptions Plugin

This week I released the JSON REST API Subscriptions plugin for WordPress. The plugin requires the JSON REST API plugin.

The JSON REST API plugin creates endpoints like so

yoursite.com/wp-json/wp/v2/posts
yoursite.com/wp-json/wp/v2/posts/253
yoursite.com/wp-json/wp/v2/pages
yoursite.com/wp-json/wp/v2/pages/987
...

Obviously the /posts endpoint returns all posts and the posts/253 returns the post with ID 253.

The JSON REST API Subscriptions plugin adds webhooks style subscriptions to those endpoints like so:

yoursite.com/wp-json/wp/v2/posts/subscriptions
yoursite.com/wp-json/wp/v2/posts/253/subscriptions
yoursite.com/wp-json/wp/v2/pages/subscriptions
yoursite.com/wp-json/wp/v2/pages/987/subscriptions

By sending an HTTP request to yoursite.com/wp-json/wp/v2/posts/subscriptions like so:

{
"target": "http://notifyurl.com"
"events": ["create", "update", "delete"]
}

http://notifyurl.com would be sent a notification HTTP request every time a post is created, updated, or deleted. All subscription routes, requests, and notifications are explained in detail on Github.

Using this plugin gives websites digesting your content an alternative to parsing feeds.

Standard
WordPress Plugins

Custom Contact Forms 7.1 – Advanced Notifications

Custom Contact Forms 7.1 has been released. The new version contains some bug fixes for sitemap SEO, non-American date formats, and advanced notifications. Specifically, I wanted to highly the advanced notifications feature which is very powerful.

In the new version, you can create an unlimited amount of notifications which allows you to send different notifications to administrators, editors, the form submitter, etc. Here is a screenshot of the new notification editing experience:

imageedit_2_6327966872

 

For each of your forms, you can view notifications in list view giving you an easy way to see all your notifications:

imageedit_4_7552164338

Advanced notifications will continue to be improved in newer versions as we believe notification functionality is extremely important to web forms.

Download Custom Contact Forms

Standard
Ansible, Systems

WordPress Ansible Playbook

Ansible is a powerful tool to automate the provisioning and maintenance of servers. There are a variety of other provisioner tools like Puppet, Chef, and Salt available. Ansible is awesome because it works over SSH so is simple to setup; you ONLY need to install stuff on your local machine.

Working on a server without a provisioner is similar to writing code without version control. It’s a huge pain. Using this playbook will provision and maintain server(s) with the latest stable versions of nginx, PHP-FPM, MariaDB, WordPress, Memcache, Webgrind, and Postfix.

I wrote a simple Ansible playbook that provisions a high speed WordPress environment.

Here are the steps to use it:

1. Install Ansible locally. (this is for OSX, see installation instructions for more operatoring systems):

sudo easy_install pip
sudo pip install ansible

2. Clone the repository onto your local machine:

git clone git@github.com:tlovett1/wordpress-ansible-playbook.git && cd wordpress-ansible-playbook

3. Now we will create a file to tell Ansible where our servers we want to provision/maintain are. Create a file in the root of your playbook named hosts:

[examplesite]
YOUR_FULLY_QUALIFIED_DOMAIN_NAME

[examplesite:vars]
server_hostname=example.com
remote_user=root
dev_server_hostname=dev.example.com
wp_db_password=SECRET-PASSWORD

In this file we can create as many hosts as we want in the event that we want to provision/maintain multiple environments.

4. Now it’s time to do our first provision. In the terminal enter the following:

ansible-playbook -i hosts site.yml

Remember, Ansible uses SSH so your SSH keys will need to be setup correctly. This playbook will default try the root user on each of your servers (as defined above) so adjust your keys appropriately.

That’s it! Your server(s) should be provisioned and ready to go. Continuing to run the playbook on an existing site will not overwrite or break anything but will upgrade things as needed. This is a great way to bulk manage/update a group of servers. Want to upgrade PHP on all your servers? Just run your playbook. Want to deploy a security patch to all your servers? Add it to your playbook and rerun.

Enjoy.

Standard
Presentations

Best Practices for WordPress in Enterprise at ZendCon 2015

Today I am presenting at ZendCon 2015 on best practices for WordPress in enterprise.

10up open sourced their WordPress Best Practices (PHP, JavaScript, tools, and workflows) in late 2014. As the Director of Web Engineering at 10up, I drove this project and am the lead contributor to the docs. These best practices allow developers to build sites that scale, perform, and are secure on sites receiving millions of page views per day. They also standardize development practices in such a way that facilitates team collaboration. This talk will highlight some important parts of the best practices and reveal some valuable tips about how we (10up) engineer some of the most complex and most viewed WordPress sites in the world.

The slides are available here:

Standard
Dockunit

Dockunit.io Beta Launch

Dockunit.io has officially launched in beta.

dockunit

Dockunit.io lets you run containerized continuous integration tests with the Dockunit tool. With Dockunit.io you can test your software (in any programming language) in environments (containers) you define. You can configure your software to be tested across a number of environments ensuring your software just works for people no matter how their system is configured. Each push and pull request to your Github repository will show a status of whether the tests passed or failed. With Dockunit.io you can more effectively deliver bug-free, quality assured code to your clients and the open source community.

Travis CI is the most popular continuous integration service. Why should you use Dockunit over Travis CI:

  • With Travis, you are stuck with the versions of each programming language and service that they want to support. For example, these are the supported versions of Node on Travis CI (as of today Travis isn’t supporting Node 4.1.0). With Dockunit you define your environments and therefore your programming language and service versions. No need to worry about Travis ending support for an older version you still want to test in.
  • Travis CI just started supporting Docker but the new system is cumbersome, difficult to use, and somewhat of an after thought. Dockunit.io is built for Docker.
  • Dockunit is meant to be run locally first so you don’t have to push changes to Github just to test a change in some obscure language version. This results in a more organized project and project workflow for your team. It is extremely difficult to test Travis locally.

Containerized integration testing is the future. Right now Dockunit.io is completely free. Give it a try on your project. Feedback is welcome 🙂

Standard
JavaScript, Node.js

Modifying the DOM using jQuery within React Components in Isomorphic Applications

React works awesome within isomorphic JavaScript applications. There are a number of frameworks and design patterns available for accomplishing this. My personal favorite is Fluxible.

In an isomorphic application, your JavaScript renders views both server side and client side. Essentially the same view code is being executed client side and server side. At first it was hard for me to wrap my head around that concept. React components can be used to implement those views.

jQuery, especially it’s UI libraries, is a useful client side tool. Since jQuery itself relies on a client side DOM, we can’t use it server side. Therefore we need to execute jQuery code in our React components but only during client side renderings.

Here is an example ES6 React component using JSX. Let’s pretend we are using this as a view in an isomorphic JavaScript application where it is being rendered both server side and client side:

import React from 'react';
class MyComponent extends React.Component {
  render() {
    <div>
      This is my React component. <a title="Checkout my tooltip text.">Tooltips</a> are pretty helpful.
    </div>
  }
}

Let’s use the jQuery tooltip plugin to power our tooltip. First make sure you include jQuery and the tooltip plugin in your page output. It usually makes sense to add external scripts to your base React component.

Let’s setup our tooltip code:

import React from 'react';
class MyComponent extends React.Component {
  componentDidMount() {
    jQuery(React.findDOMNode(this.refs.tooltip)).tooltip();
  }

  render() {
    <div>
      This is my React component. <a ref="tooltip" title="Checkout my tooltip text.">Tooltips</a> are pretty helpful.
    </div>
  }
}

First, we added a ref tag to our tooltip. This let’s us reference our component node later. We then added a componentDidMount method. componentDidMount executes after initial rendering on client side only. Refer to the React lifecycle for more details on this. React.findDOMNode selects our tooltip node based on ref. We then wrap the node in jQuery and call the jQuery tooltip method. Since componentDidMount executes client side only this works perfectly and doesn’t cause any issues with our server side rendering.

Standard