CloudFlareのRocket Loaderがやたらに早い・・・

≪≪この記事をすべて読むには約 6 分かかります≫≫

この前から使っているコンテンツデリバリーネットワーク（CDN）のCloudFlare。

標準状態では画像やフォント、スタイルシート（CSS)、スクリプト（JS）などの静的ファイルしかキャッシングしてくれませんが、ルールをいじったりすればなんでもキャッシングしてくれるようになります。

本当に便利なサービスです。

Rocket Loader

CloudFlareには、Rocket Loaderというサービスがついてきます。

設定画面で、Automaticに変えるだけです。ベータサービスと書いてありますが、十分に働いています。

何をしてくれるのかというと、設定画面に書かれている通り、JavaScript（JS）を含むページの読み込みを高速化してくれます。

どのくらいかというと、

Rocket Loader (Automatic)

読み込み時間 620ms

Rocket Loader (OFF)

読み込み時間 2790ms

異様なまでのスピードの変化です。

もう一度Rocket Loader ON

読み込み時間 700ms

Automaticにした状態で計測し、すぐにOFFにしてもう一度計測しています。Automaticに戻してから、少し置いてもう一度Automaticに変えて計測しました。

リクエスト数とページサイズがそれぞれ違っていますが、リクエスト数、ページサイズともにRocket Loaderを使ったページの方が大きいのにも関わらず読み込み時間が大幅に短縮しています。サイズとリクエスト数の違いは、広告の内容が少しずつ違うのと、Rocket Loaderを有効にするためのファイルが足されているのではないかと思います。

ページの書き換え

この読み込み時間短縮にRocket Loaderが役立っているのですが、Rocket Loaderが読まれる仕組みは、CloudFlareを介してページが読まれる際に

<script async=async src=スクリプト.js></script>

で読まれるスクリプトが

<script async=async data-rocketsrc=スクリプト.js type="text/rocketscript">

に変わっていたり、インラインの

<script type="text/javascript">

などの記載が同じく

<script type="text/rocketscript">

に変更されています。CloudFlareが挿入してくるスクリプトはtype=”text/javascript”のまま変わりませんが、他のものは皆書き換えられています。

何故rocketscriptが速いのかはさっぱりわかりませんが、速くなるのはうれしいですし無料プランでも有効にできますので、良いです。

CloudFlareは時々反応が遅くなるときが確かにありますが、全体的には高速化します。

Rocket Loaderの導入方法

CloudFlareを使っていれば、管理画面のSpeedにあるRocket LoaderをAutomaticに設定するだけです。Manualは良くわかりませんが、Automaticで良いのではないかと思います。

WordPressの場合

WordPressでは、W3 Total Cacheを使っていれば、プラグインのメニューでRocket LoaderをON/OFF出来る機能がついています。

そうでなければ、CloudFlareの管理画面から操作する必要はありますが簡単です。

サーバーの要件は？

どこのサーバーでも有効化できるものなのかは分からないのですが、Javascriptは閲覧者のブラウザが処理するものです。

なぜ早くなっているのか謎ですが、公式ページのブログでは、仮想ブラウザを使っているとだけ書かれていました。（いつの間にか公式ページから削除されていました。//support.cloudflare.com/hc/en-us/articles/200168056-What-does-Rocket-Loader-do-。現在アクセスするとRocket Loaderの解説ページに飛ばされるようになっています。）どこのサーバーでも使えそうなものですが、わかりません。

CloudFlareは導入する時と止める時にネームサーバーの設定を触らないといけないので、反映に時間がかかるのが難点ですが、大きな効果が得られると思います。

無料で始められるので、試してみると幸せになれると思います。

Adsenseなどとの相性は？

少し古いブログには、Adsenseの表示に問題があるとか、ソーシャルボタンの表示が遅くなるという話が出ていましたが、今のところこのブログでは問題ない、ような気がします。

改善したのかもしれません。