スマホサイトを見ていて、
「表示されるのが遅いなあー」
と感じたことはありませんか?
意識はしていなくても、表示速度が遅いとすぐに「戻るボタン」を押したり、ブラウザを閉じてしまったりという経験は、誰しもあると思います。
表示速度は二の次に対応すればいいと思われがちですが、日本ラドウェア株式会社の調査によると、
「操作開始時間が2秒遅いだけで、直帰率が50%も増加してしまう」
という、驚愕のデータもあります。
ページの表示速度は、サイトのコンバージョンに影響が出る大きな要素といえます。
表示速度を改善する方法はいくつかあります。
今回は画像やSNSツールに絞って対策を考えてみました。
遅延ロード。つまり、最初の表示で必要なもの以外は、あとでロードするということです。
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″>
ダウンロード、オプション設定はこちら
ブログなどでよく見かけるアイコンボタンや、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の観点で不利になる可能性があるなどの課題がありますので、よく検討してから導入を進めてみてください。