スマートフォンサイトの読み込み速度を改善するために

2013年8月16日金曜日

多くのユーザーがその手軽さや利便性から、スマートフォンからの検索を 行っていますが (英語)、携帯端末向けのページではその読み込みに 平均して 7 秒以上かかっていることがわかっています (英語)。この読み込み時間が 1 秒以下になることはユーザーにとってもウェブマスターにとっても理想でしょう。そこで今回、ウェブマスターの方々へ、携帯端末向けページのレンダリングを高速化するための ガイドライン (英語、日本語も準備中です)を公開しました。また、このガイドラインにもとづき、 PageSpeed インサイト ツール も更新しました。

”above the fold” コンテンツを優先的に扱う
たとえば こちらのレポート (英語)によると、ページの読み込みに 1 秒以上かかった場合、ユーザーの集中が途切れてしまう傾向にあるようです。サイトの訪問者により良いブラウジング体験を提供してサイトを利用してもらうため、今回策定したガイドラインではいわゆる ”above the fold” と呼ばれる、ユーザーが最初に目にする、スクロールしなくても表示されるエリアのコンテンツを少しでも早く提供する(その他のコンテンツはバックグラウンドで読み込みを進める)ことを重視しました。また “above-the-fold” エリアをレンダリングするのに必要な HTML や CSS, JavaScript は非常に重要なレンダリング パス( critical rendering path (英語))として知られています。

携帯端末上でのユーザーに最初に見えるコンテンツの読み込み時間を 1 秒未満にするためのベストプラクティスをここでご紹介します。
  • 200 ms 以内にレスポンスを返すようにする
  • リダイレクトの数は極力少なくする
  • 最初のレンダリング時のデータのやり取りを極力少なくする
  • ユーザーに最初に見えるコンテンツを表示するのに必要となる JavaScript および CSS を外部参照せずにインライン化する
  • ブラウザのレイアウト、レンダリング時間を考慮に入れる (200 ms)
  • JavaScript の実行とレンダリング時間を最適化しておく
今回公開したガイドライン では上記のような項目についてより詳しくご紹介していますのでぜひ御覧ください。また、ご自身のサイトでの改善状況については PageSpeed インサイト ツール でご確認いただけます。

ご意見・ご感想は、 ウェブマスター ヘルプフォーラム までお寄せください。