遅延ロードでスマホサイトの表示速度を改善しよう！

スマホサイトを見ていて、

「表示されるのが遅いなあー」

と感じたことはありませんか？

意識はしていなくても、表示速度が遅いとすぐに「戻るボタン」を押したり、ブラウザを閉じてしまったりという経験は、誰しもあると思います。

表示速度は二の次に対応すればいいと思われがちですが、日本ラドウェア株式会社の調査によると、

「操作開始時間が２秒遅いだけで、直帰率が50％も増加してしまう」

という、驚愕のデータもあります。

ページの表示速度は、サイトのコンバージョンに影響が出る大きな要素といえます。

表示速度を改善する方法はいくつかあります。

今回は画像やSNSツールに絞って対策を考えてみました。

遅延ロード（Lazy Load）で後から読み込む！

遅延ロード。つまり、最初の表示で必要なもの以外は、あとでロードするということです。

JavaScript（jQuery）を使用して、画像を後から読み込ませます。

ファーストビューの画像だけは最初から表示させておき、それ以外の画像を遅延ロードさせることで表示速度を上げ、操作できるまでの時間を早めます。

使用するプラグインは「Lazy Load」で、プラグインの読み込みとイニシャライズ、遅延ロードさせたい画像に特定のclassを付けるだけで実装できます。

Lazy Loadはオプション設定により、クリック操作による表示や、スクロール量に応じて表示したり、フェード効果を与えたりと、表示のさせ方は様々です。

<script src=”jquery.js”></script>
<script src=”jquery.lazyload.js”></script>
<script>
$(function() {
$(“img.lazy”).lazyload();
});
</script>
<img class=”lazy” data-original=”img/example.jpg” width=”640″ height=”480″>
ダウンロード、オプション設定はこちら

SNSボタンやタイムライン表示に最適！Scroll Trigger

ブログなどでよく見かけるアイコンボタンや、Facebookの「いいね」ボタン、Twitterのタイムラインなどですが、ディベロッパーツールなどで調べてみると、意外と表示速度に影響しています。

SNSパーツのほとんどがJavaScriptで読み込んでいるため、ページの読み込みと、表示速度に影響を与えます。

改善するには、スクロール量に応じてSNSパーツを表示させる「Scroll Trigger」を使用します。

実装方法はLazy loadと同じ手順で、プラグインを読み込み、対象のコンテンツに対してid、classを設置するだけです。

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script><script src=”jquery.scrolltrigger.js”></script>
<script>// <![CDATA[
jQuery(function() {
jQuery(‘div’).scrolltrigger({
trigger: ‘#foo’,
callback: ‘bar’
});
});
var bar = function(){
// 実行したい処理を記述
};
// ]]></script>
…中略…
<div id=”foo”></div>
ダウンロードはこちら

独自に組み込む遅延ロード

遅延ロードで検索すると、プラグイン以外にも独自で実装されているものがあります。
デモページを用意しているサイトもありますので、参考にしてみてはいかがでしょうか。
画像遅延読み込みを書いてみた
遅延ロードでJavaScriptのお勉強
jQueryで画像などコンテンツ要素を順番にフェードインさせる方法

最後に

遅延ロードは画像を複数表示させるサイトや、SNSツールを設置しているサイトには最適な方法です。
ただ、ブラウザにより遅延処理が行われなかったり、SEOの観点で不利になる可能性があるなどの課題がありますので、よく検討してから導入を進めてみてください。

この記事を書いた人

モバイルラボ 編集部
ヨコハマ・モバイルラボとは？ モバイルならではの表現ってなんだろう？ 一瞬のひらめきや感動は手のひらから始まっています。 新しいクリエイティブのカタチをここから探してみましょう。