Smartphone スマホ

 
スマホデザイン・UI

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

遅延ロードで表示速度改善
スマホサイトで表示されるのが遅いと感じたことはありませんか?
意識はしていなくても、表示が遅いと「戻るボタン」を押したり、ブラウザを閉じてしまった経験は誰しもあると思います。
表示速度は二の次に対応すればいいと思われがちですが、日本ラドウェア株式会社の調査によると、操作開始時間が2秒遅いだけで、直帰率が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の観点で不利になる可能性があるなどの課題がありますので、よく検討してから導入を進めてみてください。

この記事を書いた人


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

記事mobifyロゴ
Mobify(モビファイ)とは

Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。

▸Mobify(モビファイ)についてさらに詳しく

 最新記事