Categories
English Nginx Optimization & Speed PHP WordPress

WordPress Meetup Tokyo — WordPress Server Optimization

I recently gave a quick talk about how I use Nginx, HHVM, MariaDB with WordPress on this blog at the March WordPress Meetup in Tokyo. Here are the slides:

I’ve published a Vagrant template for the setup detailed in the slides.

Categories
English Nginx Optimization & Speed WordPress

SSL and SPDY

In my quest for faster response times and page load speed, I’ve been playing around with Google’s SPDY. I finally got around to getting a SSL certificate for this website and installing the latest version of the SPDY module for Nginx.

WordPress, alone, doesn’t really support SSL on all pages out of the box — here are some extra things you probably want to implement.

  1. Redirect all non-HTTPS traffic to the HTTPS server. For example, this is what I use:
    server {
      listen 80;
      server_name keita.blog;
      return 301 https://keita.blog$request_uri;
    }
    
  2. Use HTTP Strict Transport Security:
    server {
      listen 443 ssl spdy;
      ...
      add_header Strict-Transport-Security "max-age=31536000";
      ...
    }
    

    Using HSTS has the benefit of letting the user agent know that all requests should be using the HTTPS protocol for this domain. This is important because some WordPress plugins and/or themes will prefer to use HTTP, even though the connection is HTTPS. I had a problem with some AJAX functions and Jetpack’s Infinite Scroll.

  3. (Optional) Install a HTTPS plugin. Not required, but it might help some problems with non-HTTPS content domains, et cetera.

Categories
English Nginx Tools WordPress

WordPress on Nginx, HHVM, and MariaDB

Update 2014/4/24: I’ve updated the template to work with the latest HHVM 3.0+, and also squished some bugs.

I’ve been talking quite a bit about WordPress on HHVM recently, and it’s gotten a bit of attention, so I decided to open-source my Vagrant setup for running WordPress on HHVM.

I originally made this Vagrant setup to test HHVM on my local machine before deploying updates to the theme, plugins, etc.

Have fun, and please ping me if you have any problems!

GitHub link

Details

Categories
English PHP WordPress

HHVM and WordPress

Update 2014/4/17: This site now runs WordPress 3.9, which seems to be working fine with HHVM. Also, compatibility has improved, thanks to a patch in the WordPress core specifically for HHVM.

I recently posted about how I switched out PHP-FPM (PHP’s FastCGI pool) for HHVM. Today I’ll be talking more about the install process on the server, and using it to set up WordPress.

What is HHVM?

This is usually what happens in a (successful) startup[footnote]Twitter is (in)famous for its use of Ruby on Rails, which eventually had to be re-written in Scala, a language that runs on the JVM.[/footnote]:

  1. Initial codebase is written in an interpreted language, trading agility and developer productivity for slower response speeds and increased CPU usage on the servers.
  2. The service sees new users coming in and the initial codebase becomes strained.
  3. The service scales up the number of servers, but hits a wall.
  4. The codebase is re-written, either wholly or partially, in to a more performant and efficient language.

Facebook did steps 1 to 3, but refused to do step 4. Compiled languages, while having strengths in performance and efficiency, are usually harder to program in than interpreted languages. So, Facebook made something called HipHop for PHP. HipHop for PHP, or HPHPc for short, compiles PHP into C++, then compiles that into a big binary file. This allows PHP developers to do what they do best — develop in PHP, without worrying (too much) about performance.

As Facebook grew even more, HPHPc began to show its limitations[footnote]Compile time, compiled binary size, lack of MARKDOWN_HASH0f953f8e8cc058300e5041e6f079ab63MARKDOWN_HASH and MARKDOWN_HASH346e614b0b5901e8cdf0ca89b1b3950cMARKDOWN_HASH support, to name a few.[/footnote].

Out of this, came HHVM. HHVM is short for HipHop Virtual Machine, and uses a Just-in-Time (JIT) compiler to run PHP code. The main benefit developers do not need compile the whole binary every time they want deploy new code. With HHVM, Facebook has also worked towards full PHP 5.5[footnote]Wow HHVM is fast…too bad it doesn’t run my code[/footnote] support, support of create_function() and eval(), enabling the majority of PHP application frameworks to work with HHVM.

This includes…

WordPress

WordPress is written in PHP, and runs very well on HHVM. Previously, getting WordPress to work on HHVM required some patches to the core code[footnote]Getting WordPress running on HHVM « HipHop Virtual Machine[/footnote], but these issues have been resolved.

I’ve been running this blog on HHVM for about a week now, and response time is consistently 10x faster than before — 100x if using something like Batcache.

Installation

This server is running CentOS 6.3. While there are packages with HHVM pre-compiled, these packages are not officially supported by Facebook, and are usually compiled by individuals. Your mileage may vary, but package conflicts prevented me from installing any pre-compiled HHVM packages — so I had to compile it myself.

If you plan on running a server with HHVM from scratch, I highly recommend using Ubuntu, and the official precompiled packages for Ubuntu 13.10 / 12.04.

Bugs / Things to watch out for

Because HHVM is not PHP, you may occasionally run into unexpected behavior. Here are some problems I had while setting this site up:

  • No MySQLi support — this means tools like phpMyAdmin and database backup plugins that rely on MySQLi won’t work. Edit: HHVM 3.0 and above have MySQLi built in.
  • In the WordPress “General Settings” area, setting “Timezone” to something like “Asia/Tokyo” caused WordPress to crash. The “UTC +/- (hour)” settings seem to work fine.

That’s all, for now. When I run into more problems, I’ll make sure I post about them (with a workaround, if available).

Categories
English Tools

Japanese Input in Sublime Text

I really like Sublime Text. Today, I like it even more. Thanks to a blog post by Uesugi Shu, this long-open bug regarding Japanese character input has a viable workaround!

The link is in Japanese; I’ve (roughly) translated the steps required to achieve the same result below:

  1. Open the Sublime Text keymap file. This is at ~/Library/Application Support/Sublime Text 3/Packages/Default/Default (OSX).sublime-keymap — Sublime Text 3 didn’t let me edit the file in-place, so I had to use a different text editor.
  2. Find the following code blocks, and comment them out:
    // Find panel key bindings
    { "keys": ["enter"], "command": "find_next", "context":
        [{"key": "panel", "operand": "find"}, {"key": "panel_has_focus"}]
    },
    
    // Replace panel key bindings
    { "keys": ["enter"], "command": "find_next", "context":
        [{"key": "panel", "operand": "replace"}, {"key": "panel_has_focus"}]
    },
    
    // Incremental find panel key bindings
    { "keys": ["enter"], "command": "hide_panel", "context":
        [{"key": "panel", "operand": "incremental_find"}, {"key": "panel_has_focus"}]
    },
    
  3. (Optional) Comment out the following to fix kana-kanji conversion while typing regularly, as well:
    { "keys": ["tab"], "command": "insert_best_completion", "args": {"default": "\t", "exact": true} },
    { "keys": ["tab"], "command": "insert_best_completion", "args": {"default": "\t", "exact": false},
        "context":
            [
                { "key": "setting.tab_completion", "operator": "equal", "operand": true }
            ]
    },
    
  4. Re-open Sublime Text!

Categories
English Meta

Moved… Again!

So, I’m making some changes to this blog.

I’ll start with the first, which is most obvious. I’ve decided to change the theme I’ve been using for 2 years to Expound by Konstantin Kovshenin.

Second, which may (or may not) be so obvious. I’m running this site on NGINX (blog post), but I’ve switched out PHP-FPM for Facebook’s HHVM. Based on my preliminary benchmarks, response time is around twice as fast, and throughput has increased ten-fold. I will write a more comprehensive post about using HHVM in the near future.

The third is quite long, so bear with me:

I’ve been thinking recently, and in the first two to three years of blogging, I have started three blogs with more than three posts. This blog, which was previously hosted at http://keita.flagship.cc/, has always been my “main blog”. The idea of this blog from the start has been to make a repository of mistakes I’ve made, hopefully helping someone else who has run in to the same mistake later in time.

This core concept, will remain unchanged. I will continue to help people by writing about mistakes and problems I have made along the way. What I am changing, is the content on this blog.

Recently, I have become infatuated with the space-simulation game Kerbal Space Program. This infatuation has led to a re-kindling of my childhood desire to go to outer space — while I may never have the privilege to see our Earth from outside its atmosphere, I want to do whatever I can, to help the advancement of our civilization to a true space-faring civilization.

There are many hurdles humans face before this goal can be achieved, and we’re going to need as many people working on problems as we can manage. If just one person is motivated by reading about what I have to say on the issues that are preventing us from advancing as a civilization, I will be satisfied — the greatest obstacle we face may very well be ourselves.

Of course, I will still be writing about programming problems and solutions I encounter in my daily life and work — don’t worry!

Categories
English WordPress

wp_enqueue your scripts and styles.

The ease of making a WordPress theme is both a blessing and a curse. It allows people to get started with programming relatively easy — most hosting providers have PHP / MySQL, and the majority have a WordPress quick-install. However, this easiness comes with a dangerous pitfall — it’s easy to do the wrong thing. The classic example of this is query_posts (hint: never use it).

Today, I’ll talk about wp_enqueue_script and wp_enqueue_style. If you have ever made a plugin that requires additional stylesheets or scripts in the front-end, you know exactly what this is (and why it’s important).

The easy way out in this situation is to manually write scripts and styles in header.php like this:

...
<script src="<?php echo get_template_directory_uri(); ?>/hello.js"></script>
...
<?php wp_head(); ?>
...

Although this will work, you may start to notice funny things happening when you want to use jQuery.

...
<script src="<?php echo get_template_directory_uri(); ?>/hello.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/my_jquery.js"></script>
...
<?php wp_head(); ?>
...

The problem here is that WordPress actually uses jQuery internally for the admin bar. And, it doesn’t know that you’ve packaged your own version of jQuery — so it actually loads twice, when the admin bar is showing. This can cause problems that are time-consuming to fix, and just a waste of time.

WordPress has a mechanism to deal with this, wp_enqueue_script and wp_enqueue_style. These functions will determine the order of scripts and styles based on dependencies, and will only output the styles / scripts that are needed. This kills a few birds with one stone: loading everything in the correct order, making sure nothing is loaded twice, and not wasting bytes on scripts or styles that won’t be used by the current page.

Enough talk! Let’s get into the code.

First, you’ll need a functions.php, with the following code.

/**
 * Enqueue theme scripts and styles
 */
add_action( 'wp_enqueue_scripts', 'THEME_NAME_register_scripts' );
function THEME_NAME_register_scripts () {
  // wp_register_script( script identifier, absolute URI, array of dependencies, version )
  wp_register_script('home', get_template_directory_uri() . '/js/home.js', array('jquery'), filemtime(dirname(__FILE__) . '/js/home.js'));

  if (is_home()) {
    wp_enqueue_script('home');
  }
}

In this example, there is a JavaScript file called “home.js” in the “js” directory. This file requires jQuery, so it will be loaded after jQuery has finished loading. At the bottom of the function, the is_home() conditional is used to load the script only when the home page is showing.

Instead of using conditional tags in the wp_enqueue_scripts action, you can also register your scripts in the enqueue action, then enqueue them in the actual template file. Add the following to the template file, before get_header();:

add_action('wp_enqueue_scripts', function() { wp_enqueue_script('home'); }, 15);

This will load the ‘home’ script that we set up in the earlier snippet.

Have fun! I would be interested to hear feedback — any cool uses of wp_enqueue, et cetera.

Documentation

The syntax of wp_enqueue_style and wp_register_style is similar to the script counterparts, and they go in the same wp_enqueue_scripts action.

Documentation for wp_enqueue_style

Documentation for wp_register_script, including the scripts that WordPress has pre-packaged for you!

Documentation for wp_enqueue_script

Categories
English Uncategorized

Ruby 2.1.0-preview2

Ruby 2.1 is coming soon!

Personally, I’ve noticed quite a few speedups, and it seems like they’ve fixed a large memory problem I was running in to on pre-release staging environments:

fix memory consuming issue on RGenGC (r43532 and r43755)

I’d be interested in your experiences!

Categories
English Uncategorized

Git and Local / Server Hooks

I have been a proponent of pre-commit hooks for a very long time. After doing some searching, I found this lovely gem. It consists of a bunch of checks before you commit your code into the repository. A couple of my favorites:

  • php – Runs a PHP syntax check on all PHP files
  • merge_conflict – Makes sure you aren’t about to commit merge conflicts (you know, >>>>>>>> HEAD, stuff like that)
  • ruby_symbol_hashrockets – Prevents you from committing old-style Ruby hashes ( :hello => 'there' )

And much more. Highly recommended!

Categories
English Uncategorized WordPress

Turbolinks and WordPress

Rails Turbolinks is pretty cool, right? I thought it would be pretty cool to use it on WordPress, too.

There are probably a lot of bugs, and it probably doesn’t work well with JavaScript-heavy sites. I’ve included the jQuery compatibility layer, but it’s still not perfect. Use at your own risk.

To install, just search the WordPress plugin repository for “turbolinks”

wp-turbolinks

Or, available for download here:

http://wordpress.org/plugins/wp-turbolinks/

Contributors welcome!!!