ラウンドナップ・コンサルティング公式ブログ 代表中山陽平が記事執筆。コンサルのノウハウ進化のための情報収集の一部を発信中。2004年〜開始。

Googleガイドライン変更「モバイルサイトは1秒以内でファーストビューを表示させるべき」

2013-08-09_mobile-one-secondGoogleがモバイル端末向けサイトに関してのガイドラインを一部修正しました。Googleが出すガイドラインということで、いつも注目されているものです。

今回の白眉としては

「モバイル用ページについては、ページ全体を素早く読みこまなくてもいい。ただAboveTheFoldについては、1秒以内で表示させて、できるだけ早くユーザがページを操作できるようにすべきだ」

という記述が追加されたことです。Above The Fold(→用語詳細)は日本では「ファーストビュー(→用語詳細)」と呼ばれる概念と同じです(恐らくファーストビューという言葉は日本だけでしか使われていないと思います)

Foldは「折り目」新聞の折り目より上(Above)と言う意味で「スクロールせずに見ることが出来る範囲」ということになります。

Google「ページ全部はいいから、最初に見える範囲を1秒以内に出すべし」

今までは、ページ全体を7秒以内に読み込み完了させる、OnLoadイベント完了までを7秒以内にする、などの方針でした。しかし、今回は、とにかく「最初に見える範囲を1秒以内で表示させよう」というガイドラインになりました。

Googleの公式アナウンスはこちらです。

▼Official Google Webmaster Central Blog: Making smartphone sites load fast

なぜ「1秒」なのか? – 1993年のニールセンの調査から

この1秒の根拠としては、公式アナウンスでは1993年のヤコブ・ニールセン氏のアラートボックスが参照されています。

ヤコブ・ニールセン氏と言えば昔からホームページ制作に携わっている方は、きっと知っているはずの、ユーザビリティの大家です。具体的にはこの記事が引用されています。

ここには

  • 人間が「瞬間的」「即座に」と感じるのは0.1秒以内
  • 人間が「読み込みを待つのが鬱陶しいな(interrupted)」と感じるのは1秒が限界
  • 人間が「少々お待ちください」などのダイアログによって「待たされる」限界は10秒

ということが、書いてあります。

1993年の記事を引き合いに出した意味は、ちょうどいいものがあったからなのか、それともバックにある調査データを信頼してのことなのか、その辺りは分かりません。

実際、1秒というのは結構「長い」かもしれません。単一ページならいいですが、複数ページを頻繁に移動するような場合は、1秒は長い印象です。アプリなどのようにシャキシャキ動いて欲しいですよね。

ページ移動の際の、読み込み時間は、経験上平均PVに直結します。そういう意味ではこのサイトもひどいものです。SNSボタンやメルマガのボタンはなかなかでてこないですし…そもそもスマフォ対応が…(手一杯です、誰か助けてください…)

1秒というけれど、実は0.4秒しかない

そして、ここが大事ですが、1秒にするということは、ただページのファイルを軽くするといったことだけで済む問題ではありません。

読み込むということは、実際には以下の様なことが行われています。これはGoogleのPageSpeed Insightにあるレンダリングに関する図です。

英語版しか無いので勝手ながら和訳を付けました。

2013-08-09_14-24-52

この赤字の部分は「どうしようもない部分」です。

強いて言えば「良いネットワーク経路を持つサーバに変える」などでしょうか。現実的に対応が難しい部分です。そして緑の部分が「何とか出来る部分」としてGoogleも書いている部分です。

なので実は「400ミリセカンド、0.4秒しか無い」んですね。

具体的にどうして行けばいいか?

まずはやはり「PageSpeed Insights」の活用をGoogleも薦めています。これを使うことによりモバイル版とデスクトップ版両方のパフォーマンスを測定し、対策提案までしてもらえます。

調査はすぐ終わります。ちなみにこのサイトはこんな感じ。まずいですね。

2013 08 09 14 32 23

PageSpeed Insightに記載されている対策は、PageSpeedで教えてくれる対策以外には、以下のようなものも推奨されています。

  • 200ミリ秒以内に反応してくれるサーバに変える
  • リダイレクトを極力減らす(特にドメインを移動するようなもの。DNSルックアップが発生するため)
  • TCP first roundtripを可能な範囲で小さくする
  • レンダリングを阻害するJavaScriptやCSSを後に回せるようにする、非同期にする
  • レンダリングしやすいHTMLにする

終わりに

とは言え、単純にJavaScriptを非同期にしたら、読み込み順番が重要だった場合にエラーが起きてしまったり、あるいは外部のCSSなどはどうしようもなかったり、入れなくてはいけない外部スクリプトなどもあるかと思います。

ブラウザのキャッシュ制御も、page_casheなどのモジュールが使えないと、どうしようもありません。

この辺りは、そこに対応してくれるサーバ会社を選んでいくしか無いのかなと思います。

定期的にページのスピードなどを診断して、アドバイスしてくれる会社なんかあるととってもうれしいなと思います。

 

とは言えまずは、「PageSpeed Insights」あるいは「GTmetrix」などで診断してみてはいかがでしょうか。そして今できることを行なってみてはいかがでしょうか。

 

追伸:ちなみにうちはGTmetrixだとこんな感じです。読み込み4.39秒なので悪く無いかなとは…。サーバ変えたら一気に改善しました、私の場合。

2013 08 09 14 41 39

 

photo by brizzle born and bred

Webコンサルタント中山陽平公式サイトお悩みの方へ。一回のご相談で解決することもあります
ラウンドナップ・コンサルティングへのお問合せ方法 お電話でのご相談もお気軽に。[048-234-3361](10〜16 土日祝日除)全国対応 24時間受付 お問合せメールフォーム

コメントはこちらから

Loading Facebook Comments ...

No Trackbacks.