]]>https://taylorlovett.com/2017/03/04/isomorphic-wordpress-applications-using-nodeifywp-wordcamp-lancaster-2017/feed/012051NodeifyWP and Twenty Sixteen React Debut at WordCamp Denpasarhttps://taylorlovett.com/2016/11/19/nodeifywp-twenty-sixteen-react-debut-wordcamp-denpasar/
https://taylorlovett.com/2016/11/19/nodeifywp-twenty-sixteen-react-debut-wordcamp-denpasar/#respondSat, 19 Nov 2016 03:22:46 +0000https://taylorlovett.com/?p=12045Today, I am speaking at the inaugural WordCamp Denpasar. I will be giving a talk on NodeifyWP and Twenty Sixteen React, giving the debut demo of the framework. NodeifyWP is a framework, created by 10up, for creating isomorphic JavaScript applications within PHP and WordPress. Twenty Sixteen React is an example theme using the framework along with

NodeifyWP is a framework, created by 10up, for creating isomorphic JavaScript applications within PHP and WordPress. Twenty Sixteen React is an example theme using the framework along with React.js and Redux.

]]>https://taylorlovett.com/2016/11/19/nodeifywp-twenty-sixteen-react-debut-wordcamp-denpasar/feed/012045Data Compression, PHP, and the Webhttps://taylorlovett.com/2016/10/09/data-compression-php/
https://taylorlovett.com/2016/10/09/data-compression-php/#commentsSun, 09 Oct 2016 18:02:32 +0000https://taylorlovett.com/?p=11954Data compression is an extremely important topic in modern computing, networking, and software engineering. Sharing information faster and in smaller sizes across a network is a boundary that will continue to be pushed as long as computers and the internet exist. Large companies like Google and very smart people have continuously refined and created new

]]>Data compression is an extremely important topic in modern computing, networking, and software engineering. Sharing information faster and in smaller sizes across a network is a boundary that will continue to be pushed as long as computers and the internet exist. Large companies like Google and very smart people have continuously refined and created new algorithms to make things smaller. Better compression algorithms not only make companies profit but have implications on low bandwidth users, critical health data, financial data, etc. The topic is so important, HBO even created a show about it!

Let’s discuss some compression basics as it relates to the web, networking, and PHP.

By far the most used compression technique is deflate which powers zip, gzip, and zlib. Gzip compressed data can be decompressed by modern browsers on the fly. Gzip compression is lossless, meaning the original data can be fully recovered during decompression. Due to it’s power and widespread browser support, it’s almost a standard that we must gzip a websites contents before returning that information to the browser. Here’s how that typically looks:

Browser requests web page -> Nginx receives request -> PHP output is generated/static file is returned -> Nginx gzip's the output and responds to the browser -> browser decompresses the data for the end user

Recently, Google and Facebook have released their own compression algorithms. Google’s algorithm, Brotli, is another lossless compression solution. In a paper comparing compression algorithms, Brotli’s compressed data (at maximum level) is about 30% smaller or denser than gzip.

However, when looking at compression algorithms, we can’t just look at density (also referred to as compression ratio). We also have to consider compression and decompression speed. If our algorithm produces denser data but takes a month to compress, what have we really accomplished? In the paper referenced above, Brotli, performs about the same as gzip in compression and decompression time.

Zstandard is a lossless compression algorithm announced by Facebook in August 2016. Facebook is touting Zstandard to be a solid balance between compression ratio, compression speed, and decompression speed and a big step forward in modern computing.

The results show Brotli has the best file density (compression ratio) while Zstandard has the worst. Zstandard has the fasted compression speed by far while Brotli has the slowest. I ran some of my own tests locally just on compression ratio:

So what does this all mean and how does it relate to the web, networking, and PHP?

Well, in the context of serving assets on the web, without a better compression ratio it’s unlikely that anything will unseat gzip. Therefore while Zstandard’s compression speed is very impressive, it is not useful for serving websites. Morever, modern browsers can all decompress gzip on the fly. There is no browser support for Zstandard. That being said, one can still use PHP and the zstd extension to compress and decompress files server side.

Brotli, on the other hand, does have a better compression ratio than gzip (and Zstandard). Google claims Brotli’s ratio is about 20-30% higher. Compression ratio improvements are heavily influenced by the type of file being compressed. The tests I ran (table above) show an average compression ratio improvement of about 24%. However, Brotli’s compression speed is about half that of gzip. However, for smaller file sizes (web pages), the compression ratio improvement trumps the loss in compression speed. Brotli is superior than gzip for serving web assets.

Brotli, unlike gzip, is not universally supported by browsers. In fact as of now it is not supported by Safari or IE/Edge but only new versions of Chrome and Firefox. Also, Brotli will only be properly decoded by browsers when served over https. There is a PHP extension for compressing as well as an nginx module.

As of today, Brotli is ready and worth it for production use based on my tests. We can use PHP to compress page cached files and decompress on the fly (perhaps an addition to Simple Cache) or use nginx to detect browser capabilities and serve Brotli compressed files accordingly. The nginx method is an easy win since all we need to do is compile the Brotli module in nginx and tweak our configuration file.

]]>https://taylorlovett.com/2016/10/09/data-compression-php/feed/511954WordPress Best Practices for Enterprise at Music City Codehttps://taylorlovett.com/2016/08/19/wordpress-best-practices-enterprise-music-city-code/
https://taylorlovett.com/2016/08/19/wordpress-best-practices-enterprise-music-city-code/#respondFri, 19 Aug 2016 17:48:10 +0000https://taylorlovett.com/?p=11907Today I’m presenting on Best Practices for WordPress in Enterprise at Music City Code 2016. Here are a few of the topics that will be covered: – Caching for high traffic situation – Security techniques – Writing maintainable/extensible code – Optimizing database reads/writes – Search Teamwork in software development – Browser performance – Workflows –

]]>https://taylorlovett.com/2016/06/25/elasticpress-wordcamp-europe/feed/011893post_class() and get_post_class() – Performance Killers for WordPress and WooCommercehttps://taylorlovett.com/2016/05/26/post_class-get_post_class-performance-killers-wordpress-woocommerce/
https://taylorlovett.com/2016/05/26/post_class-get_post_class-performance-killers-wordpress-woocommerce/#commentsThu, 26 May 2016 17:12:24 +0000https://taylorlovett.com/?p=11876Using the post_class() and get_post_class() functions can slow down your website. This post explains why and how to fix it.

]]>The get_post_class() function is a WordPress function commonly used within post “rivers”. For example, if I had a list of posts, WooCommerce products, or any content type really, I might have some code like this:

The classes added make it easy to style content that has a specific taxonomy term, has a thumbnail, a particular status, etc.

However, the queries needed to determine all this information are not cheap. Moreover, this function is probably called for every post you’re listing. So if you have posts_per_page set to 20, this function will be called 20 times.

Let’s take a look at the function’s code (I’ve trimmed some of the comments):

Within this code, the following functions might result in database queries: get_post_format, has_post_thumbnail, is_sticky, and get_the_terms. The most expensive of these queries is get_the_terms which for each taxonomy associated with the post type, selects all the terms attached to the post for that taxonomy. If there are four taxonomies associated with the post type being queried, get_post_class could result in 7 extra database queries per post. With 20 posts per page, that’s an extra 140 queries per page load! On WooCommerce sites where there are many taxonomies and usually many products per page being shown, this is a huge performance killer. Yes, object caching (and page caching of course) will improve our eliminate some of the database queries, but people will still be hitting the cache cold sometimes.

Solution:

Don’t use get_post_class or post_class. It’s not that important. 99% of people don’t use the tags it generates. What I do is output the function, inspect the classes it adds using Chrome, and hardcode the classes actually referenced in CSS into the theme.

]]>https://taylorlovett.com/2016/05/26/post_class-get_post_class-performance-killers-wordpress-woocommerce/feed/411876WordPress Best Practices at WordCamp Porto 2016https://taylorlovett.com/2016/05/14/wordpress-best-practices-wordcamp-porto-2016/
https://taylorlovett.com/2016/05/14/wordpress-best-practices-wordcamp-porto-2016/#respondSat, 14 May 2016 11:36:00 +0000https://taylorlovett.com/?p=11863Today I’m presenting on Best Practices for WordPress at WordCamp Porto 2016. This talk is similar to my WordPress Best Practices for Enterprise talk but will be a bit more general and has some updated topics. Specifically, this presentation will include: – Caching for high traffic situation – Security techniques – Writing maintainable/extensible code –

]]>https://taylorlovett.com/2016/05/14/wordpress-best-practices-wordcamp-porto-2016/feed/011863Fluxible at DevIgnition 2016https://taylorlovett.com/2016/04/29/fluxible-devignition-2016/
https://taylorlovett.com/2016/04/29/fluxible-devignition-2016/#respondFri, 29 Apr 2016 13:20:47 +0000https://taylorlovett.com/?p=11849Today I am presenting at DevIgnition 2016. Fluxible is a framework by Yahoo that follows the Flux architecture by Facebook. The framework enables you to build powerful isomorphic JavaScript applications that are extremely maintainable, extensible, and scalable using React.js components. The Flux architecture employs a “unidirectional dataflow” and has three major parts: “dispatcher”, “stores”, and

Fluxible is a framework by Yahoo that follows the Flux architecture by Facebook. The framework enables you to build powerful isomorphic JavaScript applications that are extremely maintainable, extensible, and scalable using React.js components. The Flux architecture employs a “unidirectional dataflow” and has three major parts: “dispatcher”, “stores”, and “views”. Yahoo’s Fluxible library contains some very powerful tools for setting up your application.

My presentation will run through the basics of React.js, Flux, and Fluxible. It will then run through the key pieces of my Fluxible Starter library which is a barebones Fluxible implementation using Gulp as a task runner.

]]>https://taylorlovett.com/2016/04/29/fluxible-devignition-2016/feed/011849Simple Cache Pluginhttps://taylorlovett.com/2016/04/12/simple-cache-plugin/
https://taylorlovett.com/2016/04/12/simple-cache-plugin/#commentsTue, 12 Apr 2016 05:00:26 +0000https://taylorlovett.com/?p=11834I 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

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.

]]>https://taylorlovett.com/2016/04/12/simple-cache-plugin/feed/511834Comparison of Popular WordPress Caching Solutionshttps://taylorlovett.com/2016/03/25/wordpress-caching-plugin-comparison/
https://taylorlovett.com/2016/03/25/wordpress-caching-plugin-comparison/#commentsFri, 25 Mar 2016 05:16:25 +0000https://taylorlovett.com/?p=11790WordPress 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

]]>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.

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.

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 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.

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.

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 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 🙂