今回も他のwebサイトのソースコードを読み取っている時に感じた疑問点について備忘録として記録しておこうと思います。
webページを開いた時、画像や動画を読み込んでからwebページの表示を行う為に、ローディングアニメーションを実装しているサイトが多いのですが、自分が見つけたソースコードはこのような内容でした。
<script>
const loaded = () => {
//ローディングアニメーションを終了させる処理
}
// 全てのコンテンツを読み込んだらloadedを発火させる
window.addEventListener("DOMContentLoaded", loaded, false);
// 10秒経過したらloadedを発火させる
settimeout(loaded, 10000);
</script>
当時の自分はローディングアニメーションの事を
ページ内のコンテンツが全て読み込まれた状態でないと閲覧者にサイト内のコンテンツをしっかりアピールできない大掛かりなサイトに実装するもの
だと思っていました。
なので、
10秒経過したら読み込みが終わっていなくてもコンテンツを表示するなら、初めからローディングアニメーションは必要ないのでは？
という疑問が浮かびました。
そこで、ローディングアニメーションが実装される背景から調べてみる事で以下の事が分かってきました。
- ページの読み込みに時間がかかり、真っ白なページがずっと表示されていると直帰率が高まる（閲覧者が不安になる）
- 具体的にはページの読み込み時間が3秒を超えたあたりで閲覧者の直帰率が大幅に上昇する
- ページの読み込みの間にローディングアニメーションを表示することで現在のページの状態を閲覧者に伝える事で直帰を防ぐ効果がある（閲覧者の不安を解消する）
更に、「待ち時間」そのものについての資料も調べてみる事にしました。
調べた中でwebサイトとローディングアニメーションに関係する内容は下記6つです
-
何もしないで過ごす待ち時間は長く感じる
- スマホやPCのディスプレイでwebサイトを開くときは、ディスプレイがwebサイトに占有されている為、読み込み時間の間は閲覧者は何もすることが無い状態になっている
-
本来のサービスの前後に付随する待ち時間は長く感じる
- webサイトのコンテンツが本来のサービスだとすると、ウェブサイトの読み込み時間は本来のサービスの前に付随している待ち時間になる
-
不安があると待ち時間は長く感じる
- webサイトを開いた時に画面が真っ白のまま待たされると、閲覧者はwebサイトがこのまま表示されなかったらどうしようと不安になる
-
不確定な待ち時間は長く感じる
- 仮にローディングアニメーションを設定していたとしても、現在の読み込みの状況が分からないままずっと待たされる様な場合は余計に待ち時間が長く感じられる
-
理由が分からない待ち時間は長く感じる
- webサイトを開いた時に画面が真っ白のまま待たされると、今ページを読み込んでいるから表示されないのか、自分の端末や電波の調子が悪いのから表示されないのか等の原因が分からない
-
独りで待つときは待ち時間が長く感じる
- スマホやPCでwebサイトを開く時は高確率で一人の時だと考えられる
↓参考記事
上記の内容を調べた事でローディングアニメーションの役割は
- ページの読み込み時間が3秒を超える前に、ローディングアニメーションを挟むことで閲覧者の直帰率にブレーキをかける
- ページの読み込みを行っているという事をわかりやすく閲覧者に伝える事で、閲覧者の待ち時間の理由を明確にする
- ページ内のコンテンツが全て読み込んでから表示する事で閲覧者にサイト内のコンテンツをしっかりアピールする
という事なんだと思うようになりました。
（※更に、ローディングアニメーション中に閲覧者がミニゲームで遊べるようにしたり、今の読み込み状況を表示する機能を付ければ更に心理的に効果的なローディングアニメーションになるとは思いますが、そこまでやるならページの読み込み時間を短縮する方に力を入れた方が良いような気もします）
（※ちなみに、自分が実際にローディングアニメーションを実装しようとした時、予めローディングアニメーションを表示している状態から始まるwebサイトで、ローディングが終了したらローディングアニメーションを終了させる処理を実行させたい時、コンテンツの読み込みを始めてからローディングの終了用関数を発火させるまでの読み込み中にエラーが発生した場合、コンテンツの読み込みが終わらずにローディング画面から進まない不具合が発生した事があったので、万が一不具合が発生した時の為に、一定のタイミングで強制的にローディングを切り上げる機能はあった方が安全なのかもしれません）