foldのコンテンツを1秒未満で表示することをGoogleは推奨しています。foldのコンテンツ表示のスピードアップに役立つ3つのテクニックを紹介します。foldで表示されるのコンテンツのHTMLコードを先に記述します。2つに分けるという点です。foldで表示する部分のサイドバーのコードも残りとは分けて、HTMLに記述します。基本的に、ブラウザはHTMLを上から順に読み込み、表示します。foldのコンテンツを先に読み込ませて表示させるのです。付随して、もう1つのテクニックと併用します。foldのコンテンツに適用するCSSは外部参照させずにインライン化します。foldのコンテンツを表示することができます。CSSを最適化する以下の2つを守ります。外部参照のCSSファイルは1つだけにする(HTTPリクエストで生じるレイテンシーを削減するため)そのページに固有のCSSは、外部ファイルを参照させずにインラインで記述する(上で言ったこと)CSSの最適化に関しては、feedthebotの別のページで詳しく解説されています。機会を改めて紹介したいと思います(英語のわかる方はもちろん自分で読んでください)。foldのコンテンツが読み込みが終わるまで、JavaScriptの読み込みを遅らせます。foldにある重要なコンテンツの表示に必要なJavaScriptはともかくとして、たとえばソーシャルボタンのためのJavaScriptの読み込みを遅らせて、ボタンが後から出現したとしてもまったく問題ないはずです。真っ先にツイートボタンを押すユーザーはいないでしょう。JavaScriptの読み込みを延ばすには、body終了タグ(</body>)の直前に以下のコードを埋め込みます。downloadJSAtOnload;</script>赤文字の「defer.js」は、自分の環境での外部参照のJavaScriptファイル(のパス)に置き換えます。JavaScriptの読み込み延長に関しても、feedthebotの別のページで詳しく解説さています。実際に実装する前によく読んでください。こちらも、機会を改めて紹介したいと思います。上の3つのテクニックを利用して作られたサンプルページがこちらです。お遊びで作ったそうなので極めてシンプルですが、とにかく外部への呼び出しをいっさい発生させていないとのことです。foldの1秒以内の高速化表示を目指してみましょう。foldに限らず、ウェブページの表示を高速化するためにできることはたくさんあります。この記事で紹介した以外にもこういったテクニックの採用もぜひ検討してください。カンファレンスでのスピーカー登壇が決定。Consoleに追加。ラウンドナップ・Webコンサルティング。