画像遅延読み込みを使って直帰率が下がった

Webサービスの運営している中で、画像の遅延読み込みをしているサービスは多いのではないでしょうか。ファーストビューを速く見せるという意味では、とても大事な手法だと思っています。遅延読み込みと、一工夫加えたことで、直帰率を下げることができたので、紹介したいと思います。

そもそも画像遅延読み込みのメリット

画像遅延読み込みは、コンテンツが読み込み完了した後に、ユーザーのスクロールに合わせて画像を読み込んでいくことです。

ユーザーにとっては初期読み込み時にはページ下部の画像を読み込まずに済むので、レスポンス速度が上がりますし、不要な通信をしなくて済むので通信量の削減につながります。

直帰率とはGAで確認できる指標の一つで、ランディングページから別ページに遷移せずに戻ってしまったユーザーの割合です。高いから悪い、低いからいいというわけではないと思っています。ページの特性によって、直帰率は変わってくるでしょう。

ブログサイトの場合、記事ページにランディングしたユーザーが直帰してしまうのは、一定仕方ないと思います。しかし、一覧画面や、記事をまとめたページへランディングしたユーザーは出来るだけ次のページに遷移させてコンテンツを読んで欲しいです。

直帰率が下がるということは、サイト全体のPVが上がり、アフィリエイトやアドセンスといった収益増への好影響も考えられます。

特にモバイルユーザーにとっては、ページの読み込み速度が遅いとそれだけで離脱に繋がってしまうので、コンテンツを早く表示させたことで、離脱率を下げることができました。

この施策を行ったことで、直帰率を-2%ほど下げることができました。

ここの段階では、初期読み込み時には画像を表示するエリアが確保されていませんでした。そのため、スクロールしていくうちに、画像が読み込まれて表示されるので、本文のコンテンツがガタガタとずれていく現象が発生していました。

ページの表示速度は速くなったのですが、ページのユーザー体験が下がってしまっていました。

次にUX向上のために、画像読み込み完了前には、画像の高さのエリアを確保しておくように変更しました。

画像読み込み前には読み込み中のアニメーションを表示させました。

これで、画像が読み込まれることによる表示のガタつきを抑えることができます。この施策は、ページのユーザー体験向上のために行った施策でした。

しかし、後から直帰率を見てみると、さらに-2%下げることができていました。

ここまで2つの施策で-4%直帰率を下げることができました。

コンテンツには大きな変化はなかったので、画像遅延読み込みによるページ速度の向上と、ページの表示の見にくさの解消でここまで下げることができました。

どちらもUXの向上につながり、その結果として直帰率を下げることができました。今までページの表示速度や、ページの見た目で離脱していたユーザーに対してユーザーの欲しがっているコンテンツを届けることができるようになりました。

どうしても、直帰はユーザーが欲しがっているコンテンツではなかったと捕らえられがちですが、それ以外の要素もあるので、ユーザーが使いにくくないか、スマートフォンの回線で表示した時にストレスなく表示できるか、といった検証から課題が発見できるかもしれません。