イントロダクション
Webサイトやブログの、各ページの読み込み時の負荷は、少なければ少ないほど良いです。ページが表示されるまでに、ページが真っ白であったり、ページ内の要素が表示されるまでに時間がかかったりすると、閲覧者に待ち時間が発生することになり、ストレスを与えることになります。
最悪、ページの表示待ち時間が長すぎると、閲覧者はページを表示させるのを諦めて、立ち去ってしまうこともあります。
Web制作者は、このページの読み込み負荷を減らすために様々な工夫をしています。
その一つに、見えない部分の処理を遅延させるという方法があります。
ブログやwebサイトのページの、読み込み時の負荷を減らす：見えない部分の処理を遅延させる
まえがき
最近のブログや Web サイトのページは、それ単体の HTML 文書のファイルだけではなく、様々なファイルを外部から読み込むことによって構成されているケースが多くなりました。特に近年では、画像ファイルのサイズの増加や、1ページ内で使用している画像ファイル数の増加、各種SNS連携の外部スクリプト・ファイルの読み込み、外部プラグインの読み込み等々、様々なファイルを読み込んでいます。
そのページがどのくらいのファイルを読み込んでいるのかは、ブラウザの開発者用機能を使うことで使用ファイル数・データ量を知ることができます。
また、GTmetrix のような、Web サービスを使用して使用ファイル数・データ量を知る方法もあります。
それらによって実際にページを測定してみると、１ページを表示するために、外部のファイルが数十～数百ファイル、読み込まれているページがあることも確認できます。
最近はインターネット回線が高速になってきているため、ファイル数多く、ファイルサイズが大きくても気にならなくなってきている場合も多いです。
しかし、やはり場合によってはそれらによる負荷が気になるケースや、ブラウザの同一ホストへの同時接続数の制限から、ページが表示されるされるまでに時間がかかる場合もあります。
さて、前書きが長くなりましたが、そのような状況の中でページ表示時の読み込み負荷を減らすにはどうすればよいでしょうか？
可能であれば、外部から読み込むファイル数を減らしたり、外部から読み込むファイルサイズを減らすといった対策をとることができます。
しかし、外部から読み込むファイル数や、ファイルサイズを変更できない場合には、どうしたらよいでしょうか？
その一つの解決策として、ページを構成する画像ファイルや、スクリプトファイルの読み込みを、ページの表示時ではなく、実際に閲覧者が見えるときに行うという方法です。
見えない部分の処理を遅延させる
Webサイトやブログのページを開いた時に、一番最初にスクロールせずに見える領域のことを”ファーストビュー”といいます。
ファーストビューとは 【 above the fold 】 - 意味/解説/説明/定義 ： IT用語辞典
http://e-words.jp/w/%E3%83%95%E3%82%A1%E3%83%BC%E3%82%B9%E3%83%88%E3%83%93%E3%83%A5%E3%83%BC.html
http://e-words.jp/w/%E3%83%95%E3%82%A1%E3%83%BC%E3%82%B9%E3%83%88%E3%83%93%E3%83%A5%E3%83%BC.html
このファーストビューに表示される要素を、いかに遅延なく、素早く表示させるのかが重要になります。
逆に、スクロールしなければ見ることができないファーストビュー以外の領域については、表示を遅延させても閲覧者への影響は小さくなります。
特に、ページの下部の要素については、すべての閲覧者がそこまで見ていることはないでしょう。
そこで、そのような見えない部分の処理をページの表示から遅延させて実行させることにより、ファーストビューの表示を素早く行う方法があります。
この "そのような見えない部分の処理をページの表示から遅延させて実行" にはいくつかの方式が考えられます。
(1) その部分が見えてから、実際に読み込みを実施する
(2) その部分が見える少し前から、実際に読み込みを開始する
(3) ページの読み込みが行われてから、指定時間経過後に読み込みを実行する
(1) その部分が見えてから、実際に読み込みを実施する
閲覧者が、ページをスクロールして、その部分が見えるようになってから実際にその部分の画像やスクリプト要素などの読み込み処理を実施する方式です。実際に、その部分が表示されなければ要素が表示されることはないため、見えない領域のために、無駄な処理を行う必要が無くなります。
(2) その部分が見える少し前から、実際に読み込みを開始する
閲覧者が、ページをスクロールして、その部分が見える少し前から実際にその部分の画像やスクリプト要素などの読み込み処理を実施する方式です。(1) のその部分が見えてから、実際に読み込みを開始する場合には、閲覧者にまだその要素が読み込まれる前の様子が見える場合があります。
その点、その部分が見える少し前から読み込みを開始すれば、閲覧者がその部分に到達する頃には、ファイルの読み込みが終わり、画面上に要素が配置された状態にすることができます。
(3) ページの読み込みが行われてから、指定時間経過後に読み込みを実行する
(1) や (2) の方法では、ページのスクロール位置をチェックして、実際の読み込み処理を実施する必要があります。そのような処理は、ブラウザの設定や、標準の JavaScript では、用意されていないので、自分でそのような処理を記述したり、外部から提供されているスクリプトを導入する必要があります。
(jQuery を用いた JavaScript コードとして、画像の遅延読み込みや任意処理の遅延実行などを実現する便利なコードが配布されていることを確認しました。)
そのような手間がかかるため、ページの読み込みが行われてから、指定時間後に、見えない部分に配置する要素を読み込む方式があります。
この方式の場合、JavaScript のタイマなどを用いることで、比較的簡単に実現することができます。
なお、この方式を採用した場合には、閲覧者が想定以上の速さでその見えない部分の要素にたどり着いた場合には、待ち時間が発生することになるので注意が必要です。
まとめ
このように、閲覧者のストレスを軽減することや、閲覧者が待ち時間に耐えられず立ち去ってしまうことをふせぐために、見えない部分の要素の読み込みや処理を遅延させることで、ファーストビューを素早く表示させる方法があります。快適なWebサイトやブログを作って、多くの人にそのページを見てもらえるようにしましょう。
関連記事
 |
コメントを投稿
コメント投稿機能について