WEB担当・制作者必携のスマホ表示計測アプリ「WebDevTools」がリリースされましたよっと!!

2014年1月21日

【営業連絡】先日、このブログにてWEB制作パートナーになってくれる会社を募集したら、びっくりするくらいの応募があり、面接などをいろいろしまして能力の高い数社とパートナーシップを結びました。いままで新規案件は着手まで最大4ヶ月とかかかっていたのですが、これでリアルタイムに着手ができるようになりました。ほっとしました。これからは複数の制作会社とネットワークを組んで、私めは設計と運用コンサル中心に行こうと思います。これからはWEB制作のゼネコン野郎と呼んでください(笑)・・・

さて、ちょっと前に書いたこのエントリー

楽天がこれからヤバイ!! もうひとつの理由をKeynote MITEで証明してみましたよ

の中で、

iPhoneで今見ているサイトの表示速度を計測するアプリがあったらいいなと思って調べたけど・・・無い!!
自分のサイトだけ調べるならアナリティックスでなんとかなるけどいろんなサイトを調べるアプリが無い。作ったら業界関係者がこぞって買うので500円くらいで販売してください。

ということを書きましたら・・・メール頂きました。
な・・なあああんと。この通りのアプリを作ってくれた方が出現いたしました。作ってくれたのは株式会社ヌーラボの縣(あがた)俊貴さん。あがたって言う名字はフォークシンガーの「あがた森魚」さん以外で初めて遭遇。
でもってヌーラボって聞いたことあるな。ヌーブラヤッホーじゃないしな・・・と記憶を辿ったら、なんと自分がプロジェクト管理に愛用しているBacklogのサービス元じゃないですか!!

スマホ・ファースト、モバイル・ファーストの時代に、こうしたツールは絶対に必要!!
自分の持ってるiPhoneでサイト表示の時間が正確に計測でき、どこが原因で遅いかが分析できるという、WEB制作、WEBサイト担当にとっては神のようなツールなのである。日本の場合はiPhone率85%なのでAndroid版は無視(笑)。価格は「500円くらいで販売してください」を縣さんが真に受けて、500円になってました。www

プロモコードをもらったけど「金払って買う」と言った以上自腹で買いました。でもって「ココ直して」「この機能付けて」とかいろいろ注文付けたりして、いよいよこの日を迎えたのであります。Keynote MITEはあくまでも仮想的に計測しているわけで、実機とは異なることも多いだろう。実機だとどうなるのか・・・ちなみにテスト機はiPhone5s SIMフリー SoftBankです。
昨日Facebook見てましたら知人がauのiPhone5SとiPhone5とで、都内でスピードテスト競争をし、iPhone5が圧勝と書いてました。5sは800MHz帯のプラチナバンドを優先的に掴む分だけ帯域が混んでいて、5は従来の2.1Gなので速度が5倍くらい違ったそうです。特に都内はLTEの速度が時間と場所によってかなり違ってくることを念頭に入れてください。とりあえず基本は不安定なLTEではなくて3Gで数回計測して、LTEは参考値にしました。

PCの場合、大半のサイトは3秒以内に表示されます。一応参考までに各サイトのPCでのだいたいの読み込み時間を書いておきます(SEOチェキで計測)
楽天 0.12秒
Amazon  1.2秒
ゾゾタウン 0.8秒
eBay 1.7秒

いろいろなサイトのスマホ表示を新兵器でテストしてみた

1 まずは楽天

楽天の場合、モバイルサイトは最初に出てくる画面を読み込むと停止するようになっている。前回のエントリーの時、「自分でやったら速い」という声があったが、最初に出てくる画面、つまりここでいったん読み込みを停止しているのです。

IMG_1936

いつまでも読み込んでいると「遅い」と思われるので、いったんここで読み込みを停止して「速い」と思わせるわけです。速いと思った方はまんまとひっかかったと・・。
しかし実際に買い物をしようとすると、下のコンテンツまで読み込まないとならず、結局はもっと時間がかかる。下までスクロールするとコンテンツのアイコンがぐるぐる回ってます。んで、何度かテストしたのだが、ものすごくばらつく。一番遅いときは3Gで102秒!!!まあ、平均的にはこんな感じ

IMG_1937

16.68秒(ロード9.93秒)

ロードというのが最初の読み込みタイムで、その前の数字が完全に読み込んだ時の時間です。なにが原因で遅いのかというのもこのアプリはわかります。
20120827_mobile_kuji_300x68.gif 1.219 sec 22.8KB
20140114_kobo_600x136.gif 1.187 sec 17.9KB
など、1秒以上読み込みに時間がかかるアイコン画像が大量にあるのです。これをテキストにするだけで相当に高速化されそうな・・

2 Amazon

IMG_1945

11.65秒(ロード4.71秒)

実はAmazonも読み込みを途中で停止しています。しかしそれはレコメンド(オススメ商品)の画像の読み込みで、各コンテンツへのリンクはテキストなので最初に読み込まれます。楽天のように継続して読み込まないと買い物ができないという事が無い。さすがAmazon、小ずるい・・・(誉めてるんだぞ)

3 eBay

IMG_1943

4.61秒(ロード4.18秒)

相当に速いです。世界最大のオークションとショッピングサイト・・・さすがです。eBayはいまやアジアや東欧含めて全世界で利用されているので特にスマホ対策には注力しています。

4 Appleストア

IMG_1941

6.09秒(ロード1.93秒)

まず、最初の読み込み(ロード)自体が異様に速い。全部読み込んでもこの速さ

5 ZOZOTOWN

IMG_1942

6.17秒(ロード5.86秒)

ここも速い。頑張ってます。前回のエントリー通り

んで・・・

6 ヤフー

IMG_1944

14.16秒(ロード4.24秒)

日本最強のポータルだが、速度は決して速くないです。ちなみにアメリカのヤフーは16.53秒(ロード5.13秒)、MSN Japanは15.97秒(ロード4.11秒)と、ポータルは情報表示の読み込みがかなり多いため、高速化が難しいようです。まあ、ポータル見る人は買い物と違って「ニュースや情報を取りたい」という強い意志があるので、多少遅くても我慢してくれるのかも・・・。

ショップサイトとして考えると、eBayとAppleが最強で、楽天の1/4の時間で読み込めてサクサクと買い物ができます。スマホファーストの時代に向け、このアプリで自社とかクライアントのスマホサイトの速度計測と、どこにボトルネックがあるのかやっといたほうがいいと思います。あと、このアプリはソーシャル機能を付けてもらったので、ココのサイトは何秒かかったよ的な計測結果をツイートしたりもできるのだ。みんなでツイートしよう!!

  • 0
    このエントリーをはてなブックマークに追加
  • 0
    follow us in feedly
PAGE TOP