スマホ用サイトの読み込み速度を改善し、1秒以内の表示を目指そう

携帯端末向けページのレンダリングを高速化するためのガイドラインができたことを紹介する内容です。ガイドラインは英語ですがなかなか勉強になります。

日本語版は準備中だそうです。

最初に見える部分は1秒以内に表示する

ここでは1秒以内にページ（スクロールなしで表示される部分）を見ることができる状態にすることが重要だといわれています。1秒を超えると我慢できなくなり離脱する人が増えるようです。1秒で諦めるのもちょっと短気な気もしますが、読込みは早いに越したことはないですね。

まず、3G環境では一般的にDNSルックアップ、TCP接続、HTTPリクエストにそれぞれ0.2秒かかるそうです。この辺のことはあまり詳しくないですが、とにかくこれらにかかる計0.6秒はこちらでどうしようもありません。

ですので1秒で表示しようと思うと残り0.4秒しかありません。ということで、サーバーのレスポンスとユーザー側のレンダリング（ブラウザへの表示）がそれぞれ0.2秒で完了するよう工夫が必要です。

1秒以内に表示するために

ということで1秒以内に表示するためのテクニックが紹介されています。要するにサーバーのレスポンスとユーザー側のレンダリングを0.4秒以内におこなうためのテクニックです。

• 0.2秒以内にレスポンスを返すようにする
• リダイレクトの数は極力少なくする
• 最初のレンダリング時のデータのやり取りを極力少なくする
• ユーザーに最初に見えるコンテンツを表示するのに必要となるJavaScriptおよびCSSを外部化せずにインライン化する
• ブラウザが表示にかかる時間（0.2秒）を考慮に入れる
• JavaScript の実行とレンダリング時間を最適化しておく

1番は、要求されたファイルを受け渡すのにかかる時間を0.2秒かそれよりも短くする必要が重要という内容です。ファイルサイズを小さくしたり受け渡すファイルの数を減らすなどの工夫が必要です。

全体的には基本的な内容になっていますが、3，4番あたりは最初に表示される部分を最優先する工夫が見られます。CSSやJavaScriptのインライン化は何となく抵抗があるし、面倒くさそう。

5番は、デバイスによって表示かかる速度も違っていますが、0.2秒程度かかるものとして設計することをお勧めしますという内容です。

6番やその後の質問でもありますが、jQueryなどのjavascriptライブラリの使用については、スクロールせずに見えるコンテンツ（ATF content）の表示を優先するように配置した方がよいとのことです。

高速化については以前こんな記事を書いたのでぜひご覧ください。

この記事で紹介しましたが、読込み速度について以下のようなことがいわれています。

• Googleによるとページの読み込みが0.5秒遅くなると、検索数が20%減少する
• Amazonによるとページの読み込みが0.1秒遅くなると、売り上げが1%減少する

せっかくよい記事を書いても、表示されるまでの時間が長く見てもらえなかったらもったいないです。

いい記事を書くだけでなく、検索エンジンやソーシャルメディアへの対策、読込み速度の改善など読んでもらうための工夫をすることで効果的なアクセスアップを図ることができます。

とはいっても、このブログはスマホ対策を一切していません。。

ガイドラインについては、できることできないことがある気もしますが参考になれば幸いです。