[対象: 上級]

モバイルサイトにおいては、モバイルユーザーのユーザーエクスペリエンスを高めるためにスクロールせずに最初に見える、いわゆるAbove the foldのコンテンツを1秒未満で表示することをGoogleは推奨しています。

そこでこの記事では、feedthebotが解説しているAbove the foldのコンテンツ表示のスピードアップに役立つ3つのテクニックを紹介します。

feedthebot.comのスクリーンショット

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に限らず、ウェブページの表示を高速化するためにできることたくさんあります。

この記事で紹介した以外にもこういったテクニックの採用もぜひ検討してください。

このエントリーが役に立ったらシェアしてください

[Ads & Featured Contrents]

海外SEO情報ブログTOPUX・IA・CRO・EFO › Above the foldのコンテンツを1秒以内に高速表示させるための3つのテクニック

Comments

  1. By MNB on

    サンプルページには他にもテクニックが紹介されていますね。
    #誰でも実践できるものではないので紹介を控えられたのかもしれませんが。

    ・画像のURIを、バイナリをテキスト化した data: スキームにする。
    ・配信時には GZip で圧縮する(やり過ぎるとサーバの負荷が増えて却って重くなるようですが)。
    ・軽快なサーバを利用する(HDD の代りに SSD を採用したものにする、普通の共有サーバをやめて VPS か専用サーバにするなど)。

    うちではスマートフォンに配信する場合に限り外部リソース(CSS, スクリプト, 画像など)を HTML に埋め込む処理をウェブプログラムで実行することで、スピード改善しています(Google のスピードテストではまだ満点にはなっていませんが)。
    ただ、コンテンツを上下に分割するというのはまだやっていません^^;

    *** Reply from Suzuki Kenichi ***
    はい、今回はAbove the foldのコンテンツ表示高速化に的を絞って、HTMLファイルのコードを最適化する箇所に焦点を絞りました。
    高速化は突き詰めると際限がなくなってしまうので。

    もちろんMNBさんが気付いたテクニックもぜひとも適用したいですね。

    コメントありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


▲ページの一番上に戻る