転送:http://responsive.aruweb.net/ui/speed-withdrawal/

「1年でページ読み込み時間が22%も低下した小売業のWebサイト」の事例などを挙げていますが、確かに、HTML5で色々なギミックが使えるようになったこと、そしてブロードバンドの普及により、なんとなく「以前より重くても問題なくサクサク動くんだ!」と思いこんでしまっていることが多くなって、表示されるスピードに以前ほどこだわらなくなったサイトが多いように感じます。

でも実際は、スマホで当たり前のように移動中に表示するWebサイトが『重い』と感じられるようなった機会が圧倒的に多いのではないでしょうか。

レスポンス速度に影響をきたす要素

基本的なサイト制作時の指針を設けている企業・制作会社もあると思いますが、意外とコーディングのガイドラインなどないまま制作しているサイトは多いようです。それでも、Web制作会社の最低限の知識として、レスポンス速度の観点では以下のようなことが考えられているのではないでしょうか。一例としては、

  • HTMLのコーディングは、なるべくシンプルに、そしてCSSの直書きはしない
  • 外部リンクさせるCSSやJavaScriptはなるべく少なく
  • CSSなどの外部読み込みファイルもなるべくシンプルに
  • 画像ファイルの最大容量を定義する

など。

私の場合は、「塵も積もれば山となる」と、オーサリングツールで自動的に入るタグ整形のためのタブ(もしくはスペース)も、HTMLやCSS、JSファイルになるべく入れないように、またサイト構造の境界性をわかりやすくするために、だらだらと長いコメントを入れるのも禁止しています。

外部リンクの数や、「CSSを絶対に直書きしない!」はWord Pressを使う限り無理があるなぁと思う今日この頃ですが、レスポンシブサイトの制作に至っては、「どういう作り方にしたら、より重くなってしまうか」を考えながらワイヤーフレームを描いています。

特にレスポンシブサイトの重さは、コーディングするフロントサイドのエンジニアだけでなく、Webデザイナーや企画をするWebディレクターの作業から影響してしまいますので、両職種にもそれなりのHTMLに関する知識は必要になります。

WebPageTest.org を使ってみよう

前述の『サイト表示が2秒遅いだけで直帰率は50%増加!DeNA事例から学ぶWebの自動最適化手法』で紹介していた、『WebPageTest.org』を使ってみました。

WebPageTest.org

WebPageTest.org

WebPageTest.org

「Enter a Website URL」に表示速度を計測したいWebサイトのURLを入力します。

どれだけ影響するかはわかりませんが「Test Location」と「Browser」も選択。でも「Browser」のIEが9なので、あまりメンテナンスはされていないかもしれないですね。

「START TEST」を押下すると・・・

WebPageTest.org:テスト中

WebPageTest.org:テスト中

現在地と何秒経過しているかが表示されます。

「今何をやっているのか」と「どのぐらい経過しているのか」が解るっていいなぁと思いつつ眺めていると、やがて表示は「Test Started 1 minute ago」になって動かず・・・。

また、他の人がどこかで使っているのか?「Waiting behind 1 other test…」という表示が出て動かないこともあります。

テスト完了までは、試したサイト平均で3分ほどかかるようです。

WebPageTest.org に関する詳細は、別途調べてみようと思います。


T-SITEとGeo Onlineで比較

画像をたくさん利用していてレスポンスが遅そうな業種のサイトを比較してみました。DVDの宅配レンタルのTSUTAYA T-SiteとGeo Onlineです。

Tsutaya.t-siteのレスポンス速度

Tsutaya.t-siteのレスポンス速度

まずは、最近リニューアルをした、TSUTAYA T-SiteのPC版です。

全てを表示するのは、Geo Onlineと比較して半分ほどの時間ですが(それでも判定は「F」)、最初の表示が始まるまで、2秒もかかっています。

Amazonの調査では、ページの表示速度が0.1秒遅くなると、売り上げが1%低下し、Googleでは、ページの反応が0.5秒遅くなるとアクセス数が20%低下すると発表されているそうです。


GeoOnlineのレスポンス速度

GeoOnlineのレスポンス速度

Geo Online ではWaterfallではひとつの画像が飛びぬけて時間がかかっているのが気になりました。

といっても、大きいわけでもないし、別のドメインに置いてあるわけでもない…。他の画像と比較すると「Bytes In (downloaded)」の数値が大きいのですがその要因が想像つかないですね。

アクセス解析もそうですが、こういったツールはどこまでが合っているのか解りませんので、大まかなところを「参考」として利用するのがよさそうです。


その他のレスポンス/表示速度を測るツール

「WebPageTest.org」は小難しい、指標としてここまで出来なくてもいい、という場合はもっとシンプルなツールが良いかもしれません。

サイト表示スピード測定 | サーバレスポンス時間測定

サイト表示スピード測定 | サーバレスポンス時間測定

サイト表示スピード測定 | サーバレスポンス時間測定

サイト表示スピード測定 | サーバレスポンス時間測定

こちらで測定すると、「WebPageTest.org」とは大分違う結果になりますが、2つのサイトの「Load Time」の比率とは一致しました。細かい説明は置いておいて、「一般的に早いのか」「競合と比べてどうか」というのには手軽ですね。


GTmetrix

GTmetrix

GTmetrix

GTmetrix

こちらも数値は大分違います。22.202sだったGeo OnlineのLoad timeが13.55と若干速くなっています。TSUTAYA T-Siteに至っては、3分の1ほどのスピードになっています。

ビジュアル的には、一番報告資料に使いたい感じですね。


Pingdom

Pingdom

Pingdom

GTmetrix

こちらもビジュアル的に使っていて楽しいツールです。

Load timeでは、Geo Onlineは最遅を記録していますが…ロードに一番時間がかかっている画像は同じで、サイズも2.8MBと同じですね。


レスポンス速度に関してのまとめ

今や周知のことかもしれませんが、Googleではページの表示速度が検索順位に影響することを公表しています。ですので、「Load Time」も「First Byte」もできるだけ早くする必要があります。

レスポンス速度に影響するものは、バックエンド、フロントエンド両方に存在しますので、設計段階でどちらも「レスポンスを速くすることを考慮する」ことが重要です。

また、離脱率だけでなく、レスポンス速度がUX(ユーザーエクスペリエンス)に大きく関わることも忘れてはいけない要素です。同じようなサイトであれば、「サクサク動く」方をユーザーは好むでしょう。

見栄えの華やかさばかりにこだわっていないか、バナー広告の押し売り的表示はしていないかも、「早くなるように設計しているか」に併せて検討したいところです。

参考サイト