猶予時間は「僅か1秒」 – 読み込み速度と「Above the fold」
スマートフォンでサイトを見ると、いつまでたってもページが表示されないという経験はありませんか？スマートフォン・タブレット等、モバイル回線でWebにアクセスする機会が増えたことから、「ページの表示速度」への注目がより高まっています。
今回は最適なページ表示速度と、Googleが公式にコメントしている速度改善方法をご紹介します。
Webサイトは神速を貴ぶ
1993年、ニールセンが「人間が我慢できる時間（応答時間に対する限界）」についての調査を実施しました。
その時の調査結果では、
- 0.1秒以内に反応があれば「瞬時に反応した」と感じる
- 1.0秒以内のレスポンスは、「処理待ち」として許容する
- 10秒までであれば、どうにか集中力は途切れない
- 10秒を超えるとついに他の作業に意識を向ける
参考：Webサイトの応答時間 – U-Site
という４つの結果が発表されました。
また、SMX Advanced Seattle 2012では、次のような事実も発表されています。
- Googleではページスピードが検索の1%に影響している。
- ユーザーがページ表示に待てるのは2秒まで。
- 3秒以上かかると40%以上のユーザーは離脱する。
- フォーチュン500の企業のサイトは平均で表示に7秒以上かかっている。
- 表示が1秒遅れるごとにコンバージョン率は7%落ちる。
- 表示が1秒遅れるごとに顧客満足度は16%落ちる。
- 速いサイトはインフラと公開にかかるコストを50%かそれ以上削減する。
- Amazonの調査では0.1秒反応が遅くなると売上が1%減る。
参考：SMX Advanced Seattle 2012 | 海外SEO情報ブログ
このように今も昔もWebサイトの表示速度は、早ければ早いほど良いものと考えられています。
そしてこの表示速度問題は、脆弱なモバイル回線を利用するスマートフォンでははより深刻なものとなります。
スマートフォン到来、「より遅いWeb」の拡大
スティーブ・ジョブズのプレゼンテーションから始まったスマートフォン時代。スマートフォン人気は低速回線でのサイトアクセスを大幅に増加させました。
2013年4月にGoogle Analytics公式ブログがWebサイトの表示速度についての調査結果を発表しています。
参考：Is the web getting faster? – Analytics Blog
この中でモバイル回線の表示時間の国別統計が紹介されていますが、最も早い国でも2.5秒、日本や中国などでも「40％が離脱する」と言われている3秒という結果となっています。
LTEやwi-fi網の整備などで高速化が進んでいますが、モバイル回線からのアクセスを想定したサイト設計は依然重要課題の１つです。
Googleの提言-「パッと見だけでも1秒で」
こうした状況を受けてGoogleは2013年8月、「1秒以内にAbove the foldを表示することが重要である」と発表しました。
「Above the fold」とは直訳すると「折り目の上」という意味で、Webサイトの「スクロールせずに表示される箇所」を指す言葉です。別名「ファーストビュー」と言われています。
ニールセンの調査では訪問者の77％は「Above the fold」しか閲覧していないことが判明しています。
Jakob Nielsen’s study on how much users scroll (in Prioritizing Web Usability) revealed that only 23% of visitors scroll on their first visit to a website. This means that 77% of visitors won’t scroll;
サイトをスクロールするのは23％のみ。残り77％はスクロールしない。
出典：10 Useful Usability Findings and Guidelines | Smashing Magazine
またGoogleは、「Above the foldを1秒で表示すべき」とコメント。ユーザー満足度を高めるために表示速度の高速化はサイト管理者にとっては一生付いて回る問題です。
スクロールせずに見える（ATF）コンテンツを 1 秒未満で配信しレンダリングします。こうすることで、ユーザーは可能な限り早くページを利用し始めることができます。
出典：PageSpeed Insights でのモバイル解析
2つの高速化アクションと200ミリ秒の戦い
ではAbove the foldを1秒で表示するために何をすべきか？ Googleは2つの方法を提示しています。
１：スクロールせずに見える範囲の重要なコンテンツを最初に読み込むように HTMLを構成する
ウェブページはhtmlタグを上から順に読み込んでサイトを表示します。そこでAbove the foldからソースを読み込むようにHTMLを構成させることで「順番待ち」を回避することができます。
「外部jsファイルの読み込みはフッターで行うべき」と言われている理由も、この「順番待ち」による表示遅れを最小化するためのものです。
２：リソースで使用されるデータの量を減らす
もう１つの方法は、「読み込み量の最小化」です。HTMLやJavaScript・CSSを圧縮し、画像は極力CSSに置き換えます。またサーバー側でgzipを用いたHTTP圧縮を行うことでより表示速度を高速化することができます。
特にJavaScriptのminify化（不要なインデントやスペースを削除してデータを圧縮すること）は弊社のクライアントで検証した際の効果も高かったです。
参考：＜決定版＞レスポンシブECサイトの読込速度を上げるコーディング方法8選
残された時間は「僅か400ミリ秒」
Above the foldの高速化を図る際に知っておくべき情報がもう１つあります。それは「削減できる秒数は最大で400ミリ秒である」ということです。
標準的なブラウザとサーバー間の一連の通信を見ると、この時間のうち既に 600 ミリ秒が、IP アドレスに対するホスト名（google.com など）を解決するための DNS ルックアップ、TCP ハンドシェイクを実行するためのネットワークの往復、最後に HTTP リクエストを送信するためのネットワークの往復全体といったネットワークのオーバーヘッドに費やされています。これで残りはたった 400 ミリ秒になります。
出典：PageSpeed Insights でのモバイル解析
Google社員が明かした「奥の手」
最後にGoogleのウェブマスタートレンドアナリストであるPierre Far氏がGoogle+上で「奥の手」を紹介しました。その奥の手とは、「Above the foldコンテンツのみ全てインライン化する」ということです。
we recommend you inline the CSS and JS required for the above-the-fold content.
Above The Foldのコンテンツ表示には、CSSやJSのインライン化をおすすめします。
Above the foldのcss/jsをすべてインラインで記述することで、読み込みの「順番待ち」をしている外部ファイルよりも先に表示させてしまえば良いという発想です。
この手法を実現させるためには、「どこまでをAbove the foldにするか」を事前に決めなければなりません。より素早くユーザーに有益な情報を届けるためにも、WF段階でAbove the foldを設計する必要があります。
またここで紹介した以外にも読み込み速度を向上させる方法は様々ありますし、サイト構成によっても効果の「ある／なし」が出てくる可能性もあります。
それぞれのサイトに合ったコーディング方法を試行錯誤しながら考えていかなければなりません。
