[対象: 上級]
モバイルサイトにおいては、モバイルユーザーのユーザーエクスペリエンスを高めるためにスクロールせずに最初に見える、いわゆるAbove the foldのコンテンツを1秒未満で表示することをGoogleは推奨しています。
そこでこの記事では、feedthebotが解説しているAbove the foldのコンテンツ表示のスピードアップに役立つ3つのテクニックを紹介します。
1. Above the foldのHTMLをそれ以外と分割する
サイドバーを含むAbove the foldで表示されるのコンテンツのHTMLコードを先に記述します。
ここでのポイントは、Above the foldのエリアとそれより下のエリア (Below the fold) の2つに分けるという点です。
メインコンテンツだけではなくAbove the foldで表示する部分のサイドバーのコードも残りとは分けて、HTMLに記述します。
基本的に、ブラウザはHTMLを上から順に読み込み、表示します。
サイドバーも含めて、Above the foldとBelow the foldのコードを完全に分割することで、Above the foldのコンテンツを先に読み込ませて表示させるのです。
さらに付随して、もう1つのテクニックと併用します。
Above the foldのコンテンツに適用するCSSは外部参照させずにインライン化します。
こうするとCSSが書かれている別のスタイルシートの読み込み完了を待つことなしに、そのページのHTMLの読み込みだけでAbove the foldのコンテンツを表示することができます。
2. CSSを最適化する
以下の2つを守ります。
- 外部参照のCSSファイルは1つだけにする（HTTPリクエストで生じるレイテンシーを削減するため）
- そのページに固有のCSSは、外部ファイルを参照させずにインラインで記述する（上で言ったこと）
CSSの最適化に関しては、feedthebotの別のページで詳しく解説されています。
機会を改めて紹介したいと思います（英語のわかる方はもちろん自分で読んでください）。
3. JavaScriptの読み込みを延ばす
Above the foldのコンテンツが読み込みが終わるまで、JavaScriptの読み込みを遅らせます。
Above the foldにある重要なコンテンツの表示に必要なJavaScriptはともかくとして、たとえばソーシャルボタンのためのJavaScriptの読み込みを遅らせて、ボタンが後から出現したとしてもまったく問題ないはずです。
真っ先にツイートボタンを押すユーザーはいないでしょう。
JavaScriptの読み込みを延ばすには、body終了タグ（</body>）の直前に以下のコードを埋め込みます。
<script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script>
赤文字の「defer.js」は、自分の環境での外部参照のJavaScriptファイル（のパス）に置き換えます。
JavaScriptの読み込み延長に関しても、feedthebotの別のページで詳しく解説さています。
実際に実装する前によく読んでください。
こちらも、機会を改めて紹介したいと思います。
上の3つのテクニックを利用して作られたサンプルページがこちらです。
お遊びで作ったそうなので極めてシンプルですが、とにかく外部への呼び出しをいっさい発生させていないとのことです。
サンプルページも参考にしつつ、上で挙げたHTML/CSS/JavaScriptを対象にした3つのテクニックを使ってAbove the foldの1秒以内の高速化表示を目指してみましょう。
またモバイルサイト、Above the foldに限らず、ウェブページの表示を高速化するためにできることはたくさんあります。
この記事で紹介した以外にもこういったテクニックの採用もぜひ検討してください。