« Zenback の利用をやめるとき | メイン | ネットワークメンテナンスのお知らせ »

2013年11月 7日 (木)

平均20%+高速化!Zenbackのスクリプトコードが新しくなりました

本日、Zenbackのスクリプトコードを新しくしました!

新しいコードの 3 つのポイントをご紹介します。

  • もっと素早く ページ読込完了速度も平均20%以上に向上しています ※検証条件はは記事最下部をご覧ください
  • もっと優しく 非同期読み込みに対応したことで、Zenbackの読込が遅くなってもブログの他の要素の読込を邪魔しません
  • 古いのも動く 古いコードもこれまでどおり動作します。が、全てのユーザへ切替をオススメします :)

新しいコードに切り替えよう

2013年11月7日16時以降にZenback管理画面から入手したコードは全て新しいコードに切り替わっているので、以降の作業はいりません。

11月7日以前にZenbackのコードを入手し設置いただいていた方は、以下の方法でサイトに設置してあるコードの差し替えをオススメします。

1. Zenbackの管理画面から新しいコードを入手します。

Zenbackの管理画面 http://zenback.jp/ にログインして、対象のブログ名の隣にある <>CODE というボタンを押してください。

ボタンの下に出てくるのが、Zenbackのスクリプトコードです。

ちなみに、コードの冒頭が「<!-- X:S ZenBackWidget --><div id="zenback-widget-loader">…」で始まっているものが新しいもの、です。

Newcode_2

「<!-- X:S ZenBackWidget --><script type="text/javascript">document.write…」となっていたら、古いコードです。

2. 設置済みのコードを差し替えます

サイトの管理画面から、Zenbackのスクリプトコード設置箇所を新しいものに差し替えていただければ完了です!

あとは記事ページを開いて、ちゃんとZenbackが表示されるかご確認ください。

表示されました?

そしたらOKです!では、もっと快適になったZenbackで楽しいブログライフを♪

Zenbackへの無記名のフィードバックにて、ご意見ご感想お待ちしています! フィードバック&お問い合わせ - Zenback ブログ

追記 Zenbackの動作速度計測方法について

検証条件について補足します。同じテストを皆さまのお手元でも可能なので、ぜひ計測してその結果を教えていただけると嬉しいです!

検証対象サイト 6サイト

  • Movable Type系3サイト
  • WordPress系1サイト
  • ライブドアブログ系1サイト
  • はてなブログ系1サイト

検証方法

  • 上記サイトの旧コード設置時、新コード設置時の2パターンで以下動作速度計測サイトにて検証

検証環境 3種類の動作速度計測サイトを利用

  • WebPagetest 以下設定にて、Load time 値を利用
    • Test Location: Tokyo Japan
    • Browser: Chrome
  • GTmetrix 以下設定にて、Page load time 値を利用
    • Test Server Region: Vancouver, Canada
    • Using: Firefox (Desktop) 14.0.1, Page Speed 1.12.16, YSlow 3.1.7
  • Pingdom Website speed test のデフォルト設定にて、Load time 値を利用

検証結果サマリー

新コード切替時のページ読込動作速度は、11.33%〜43.68%向上と大きく差が有りましたが、平均すると27%程度速度向上につながったようです。

もちろんサイトによって、どれほどの影響が出るかは異なります。ですのでぜひ、ご自身のサイトでもお試しいただいてそのスピード差を教えていただきたいです!

Speed_summary_2

Twitterの @zenback へツイート、もしくは「フィードバック&お問い合わせ - Zenback ブログ」からこっそり教えていただいてもうれしいです。

Zenback ユーザ様の検証結果

検証いただいた方の数値も、追記します。

28.2% 高速化

まきこみ計画 :: Zenbackスクリプトコードの更新でページ表示速度が28.2%も高速化した!

ページ表示速度はなんと28.2%も高速化しました!約3割弱の変化は体感としても現れていて、実際に早くなったなぁという実感があります。これは凄い。

25.7% 高速化

[Zenback]ついに移行!新Zenbackコードでどれだけ早くなるか比較したら驚異の25%向上 | Hokkaidosm bot管理

おっ、早い!とブラウザで開いてもわかるくらい。

20.9% 高速化

[Zenback]ついでなのでbotブログにも新バージョンを導入。botブログでは約20%向上 | Hokkaidosm bot管理

こうして得られた結果、平均で20.9%の向上となった。

-1%〜74.8% 高速化

20%高速化されたZenbackのスクリプトコードを試してみた - みちしるべ

一部1%ぐらい遅くなったものもあるが、極端に遅くなったのはないし、効果はありそう。

16% 高速化

新しいZenbackのスクリプトコードで16%高速化しました - 半地下備忘録

平均すると1秒弱の短縮。 以前のコードに比べると、16.7%程度の高速になっていました*1。