WordPress高速化プロジェクト 番外編「クライアントキャッシュの利用と圧縮」

アブストラクト:
WordPress高速化プロジェクト第2回目の記事は番外編です.クライアント側のブラウザキャッシュを利用/コンテンツの圧縮をして,実質的なコンテンツ表示の高速化を目指します.


WordPress高速化プロジェクト 記事一覧:


Google PageSpeed Insights

今回は,Google の PageSpeed Insights [1] の結果を参考に,クライアントのブラウザキャッシュを利用/レスポンスコンテンツを圧縮して,実質的な高速化をしました.
改善前の PageSpeed Insights の結果を下の図に示します.
このうち,具体的には,「修正が必要」とくくられた項目の「ブラウザのキャッシュを活用する」,「圧縮を有効にする」を改善しました.

[1] PageSpeed Insights: PageSpeed Insights

前回と同じく環境は以下のとおりです.

  • CentOS release 6.6 (Final)
  • PHP 5.3.3
  • Apache 2.2.15

WordPress を標準インストールしてデフォルトでは効いていない項目である「クライアントのブラウザキャッシュの利用」と「レスポンスコンテンツのgzip圧縮」を設定します.

Read more »

WordPress高速化プロジェクト 手法1「PHP高速化」

アブストラクト:
このサイトはWordPressで構築されています.
今回はPHPコードをキャッシュして高速化する Zend OPcache を使用して,レスポンスの約1.5倍の高速化しました.


WordPress高速化プロジェクト 記事一覧:

WordPress は遅い?

WordPress はコンテンツの更新しやすさ,テーマ/プラグインの適用の容易さ等でかなり優れているツールですが,レスポンスが遅いなと感じることが多々あります.体感でもページ表示に1秒ぐらい要する感じです.
この辺はCMS特有のデメリットだと思いますが,特に WordPress はレスポンスごとに発生するデータベースへのアクセスと PHP での動的コンテンツ生成で時間を消費してしまいます.
このサイトは特にアクセスが多いわけでもないですが,レスポンスが遅いときあってたまにイライラするので今回から複数回に分けて高速化を検討していきます.

WordPress 高速化手法

WordPress を高速化にはいくつかの方法があります.簡単に分類すると次にようになります.現在Webサーバにapacheを使用していること前提です.

  1. PHPの高速化 (APC, Zend OPcache 等を使用)
  2. データベースの高速化 (インデックスの設定,クエリ数の削減等)
  3. WordPress高速化プラグインの使用 (WP Super Cache等)
  4. リバースプロキシサーバのキャッシュを利用 (Varnish, nginx等)
  5. Webサーバ自体を軽量なものにする (nginx等)
  6. Webサーバをnginxに変更した上で (FastCGI / proxy cache) を使用

参考文献:
WordPressを100倍速くする! MySQLの調整やnginx proxy cache | KRAY Inc
さくらVPSのWordPressをチューニングして30倍高速化した方法 – 原宿・表参道.jp
Nginxを使ったもう一歩進んだWordPressチューニング | cloudrop

以上,1~6 まで挙げましたが,数字の順にハードルが高くなっている(導入/設定が面倒)と思います.しかし数字の順に効果は大きいと推測しますが.
また,3 のWordPress高速化プラグインの使用は,平気で config.php や .htaccess を書き換えたりしたり,中身で何やってるかよくわからないのでできれば使用したくありません.結局やろうとしていることは動的コンテンツのキャッシュなので,プラグインで実現する機能は 4 や 6 のWebサーバのキャッシュ機能で実現できます.
2 のデータベース高速化に関してはプラグインや自前関数でとんでもないSQLクエリを実行していない限り大きな問題にはならない気がしますので手を触れません.

他にも,コンテンツのキャッシュ期限を明示的にすることによってクライアント側のブラウザキャッシュにコンテンツを残す,レスポンスコンテンツをgzip圧縮すること等によって,間接的に高速化することができます.

参考文献:
WordPressキャッシュ系プラグインの比較とサイトに適した選び方 | ゆっくりと…

よって,1, 4, 5, 6の方法によってWordPressの高速化をしていきます.

Read more »

宇宙一馬鹿げたルービックキューブの解き方

去年の記事「ルービックキューブをアルゴリズムで解くということ」に続き,ルービックキューブとアルゴリズム ネタシリーズ第2弾です.
今回は宇宙一無駄な努力をしてルービックキューブを解く方法です.

無駄な努力

スピードキューバ(ルービックキューブを早く解くことを追求する人たち)には常識的に知られていることですが,ルービックキューブは容易に分解できます.

したがって,未完成状態のルービックキューブを分解して,物理的に組み上げることでルービックキューブを完成させることができます.
この一連の操作を目をつぶった状態で実行するとどうでしょうか.
それは多分一生完成しないだろうと予想されるでしょう.全くその通りです.
この手法は言い換えると次のようになります.

アルゴリズムBG:
入力: スクランブルされたキューブ
出力: 完成状態のキューブ
(Step 1) ルービックキューブのパーツを分解する.
(Step 2) 分解したパーツをシャッフルする.
(Step 3) シャッフルされた順にキューブを組み上げていく.
(Step 4) キューブが完成したら終了,完成しない場合 Step 1 に戻る.

コンピュータサイエンスを(ネタ的に)知っている人ならピンとくると思います,これはボゴソートに対応します.

ボゴソート (英語: bogosort) は、ソートのアルゴリズムの一つ。平均的な計算時間はO(n×n!)で、非常に効率の悪いアルゴリズムとして知られている。安定ソートではない。 ボゴソート – Wikipedia より

こんなの終わるわけないやんと思いますが,「無限の猿の定理」により十分長い時間をかければ完成することは示せます.
完成までの試行回数(キューブが組み上げられた回数は)は平均で $ T_{bg} = (8! \cdot 3^{8} \cdot 12! \cdot 2^{12}) / 2 = 259512019646939136000 $ 回です.
これはエッジの位置と向き,コーナーの位置と向きの全パターンの半分です.
平均がなぜ半分でいいのかよくわかりませんが,以下の文献でそう書いてあったので半分にしてます.
参考文献: Bogobogosortについて – w125のブログ

さて,1回キューブを組み立てるのに1分要すると仮定します.
すると完成するのに 259512019646939136000分 かかる計算になります.これは,493744329617464年,すなわち 493兆7443億年です.
ちなみに地球が誕生したのは46億年前,宇宙が生成されたのが138億年前とされています.

以下の文献により,「無限の猿定理」で最も例に取り上げられる,1秒間に10万文字タイプできる猿がハムレットを執筆するのに $ 10^{360790.5} $ 年要するとされていますので,ハムレットを書くのとルービックキューブを揃えるのは確率的にはルービックキューブを揃える方がずっとずっと簡単なのです.
参考文献: 時間の比較 – ニコニコ動画:GINZA http://www.nicovideo.jp/watch/nm16202721

最良で1回の試行回数で完成しますが,この確率は限りなく0に近です.最悪の場合の試行回数は無限大です.

めげない努力

一旦ばらばらに分解してから組み上げるのはさすがに馬鹿すぎるでしょう.
ちゃんとルービックキューブのパズルらしく面を回転させて完成させます.
しかし,回転させるといってもどの面をどの向きに回転させれば揃うのか一向に見当がつきません.

そこでとりあえずやみくもにトライしてみるとします.
この手法は言い換えると次のようになります.

Read more »

WCAデータベースで遊ぶ実践編「自己ベスト記録のリストを作成する」

昨年末の記事 「WCAデータベースたわむれ入門」 でWCAデータベースを用いる取っ掛かりを説明しました.
その記事はデータベースを扱うためのoverviewを重点的に書いたので具体的なWCAデータベースの操作方法までは触れていませんでした.
今回は実際に簡単なアプリケーションの開発をしながら,具体的なSQLの使い方を見ていきましょう.
ということで「自己ベスト記録のリスト」を作成します.

今回の目的

WCAの個人記録ページの最上部に出てくるような,種目ごとにSingleとAverageの記録を表示するリスト(表)を作成することを目的とします.
下の図のようなものが完成図です.

Read more »

ブログカード風リンク表示WordPressプラグイン「TeraShare」をアップデート (version 0.2.0)

以前作成したブログカード風にリンク表示するWordPressプラグイン「TeraShare」を バージョン 0.1.0 → 0.2.0 にアップデートしました.

前回の記事を下に貼り付けます.
ブログカード風リンクとはまさに下に貼り付けたようなリンクのことです.

Thumbnail of ブログカード風にリンクを表示するWordPressプラグイン「TeraShare」を作ったブログカード風にリンクを表示するWordPressプラグイン「TeraShare」を作った
terabo.net
ブログカード風にリンクを表示するWordPressプラグイン「Tera Share」を作りました.WordPressエディタでショートコードを挿入すると画像のようにリンクを表示できます....

変更点

バージョンアップによる変更点は以下の2点です.

  1. ブログカード内タイトルのh1タグをspanタグへ変更
  2. CSS修正

1. はSEOのためです.
以下の記事などを参考にどうやらh1タグは1記事に1つが良いようで,リンクを貼るたびにh1タグをつけてしまっては重要なポイントが分散してしまうので,リンクのタイトル部はspanタグへ書き換えました.
参考文献: SEOの基本中の基本!「titleタグ」「meta description」「h1タグ」の書き方まとめ | 株式会社LIG

2. は本当にどうでもいいような文字サイズの修正です.

Read more »

Dropbox代替アプリとしてのCopy.com (無料で容量+5GBもあるよ)

dropbox-and-copy

先日,このようなメールが届きました.
つまり要約すると,『「無料容量獲得レース」で獲得した17GB分が無くなるよ.無くなると新規アップロードできなくなるよ.』ということです.

dropbox-email

私はメインのオンラインストレージとしてDropboxを使用していて,手元にあるほぼすべての文書・プログラム・データ(メディアデータを除く)をDropboxで管理しています.
ちょうど2年前の「無料容量獲得レース」でDropboxのデフォルト容量である7GB(この値はちょっとしたボーナスを含んでいるかもしれない)から22GBに拡張させました.そして22GBのうち17GB(77%)使用していました.
しかし2年経つとこの拡張分はなくなってしまうということは前々からわかっていたので,期限までにどうにかしようかと思っていたら気づいたら期限まで残り1日になってしまいました.

Read more »

ブログカード風にリンクを表示するWordPressプラグイン「TeraShare」を作った

ブログカード風にリンクを表示するWordPressプラグイン「Tera Share」を作りました.
(厳密に言うと今まで自作テーマ内で使用していたものをプラグイン化しました.)
WordPressエディタでショートコードを挿入すると画像のようにリンクを表示できます.

Read more »

「へごへごへごちん!」作った

完全に勢いだけで作った。

hegohego-hegochin

へごかわへごかわ。ツールページへ飛ぶには以下をクリック。

へごへごへごちん! — た゛め゛て゛す゛よ゛~ や゛め゛て゛く゛た゛さ゛い゛よ゛~

Read more »

triboxステッカー色の任意2色間類似度を計算してみた

背景

triboxストアが蛍光色ステッカーを一新するそうで,ステッカー色に関する話題です.
ステッカー色の”差”を曖昧な主観的な感覚の判断ではなく,客観的に見ることができないか考えました.
色間の類似度ってどっかで定式化されてないかなーって思って調査してみたら存在したので実際に計算してみました.

triboxステッカーの蛍光色がグレードアップします。

新蛍光色ステッカーの公式レビュー.

Read more »

Rubk’s Clock (ルービッククロック) 画像ジェネレータの紹介

この記事では,Rubik’s Clock (ルービッククロック) の画像ジェネレータを紹介します.

Rubik’s Clock の画像生成

N×N×Nキューブの画像生成ライブラリは,VisualCube などが有名ですが,Rubik’s Clock の画像生成ライブラリはあまり知られていません.
私もさっきまで知りませんでした.
WCAの公式スクランブラTNoodleやレギュレーションを管理してるGitHubのチーム Cubing のリポジトリを眺めていたらClockのいい感じの画像ジェネレータを発見したので本記事で紹介します.

こんな感じの画像が生成できます.

sampleimage-of-clock-1

Read more »