1ページのファイル容量はなるべく抑えよう

  • このエントリーをはてなブックマークに追加

ページを表示させる速度は1ページに使われているファイル容量に依存する

ホームページを検索して、しばらく待ってもページが表示されない・・・
気になる画像を見つけたのに、なかなか表示されない・・・
こんな時はありませんか?「このページ壊れてる」「ブラウザが遅い」と思う前にちょっとまってください。
そのページ、1ページを表示させるのに、どのくらいのファイルを読み込むんでしょうか?

ホームページを表示させるには、そのページの情報を全て読み込まなければなりません。
ページに使われている情報には「HTML」「CSS」の基本となる文字情報の他に「画像」「動画」「javascript」など、様々なものが必要になります。
最近では手書き風文字や特殊な書体を使われることも多くあるので、「フォント」も読み込んでいる場合もあります。

それらの容量が増えれば増えるほど、パソコンやスマートフォンといった端末へインターネット回線を使ってダウンロードする時間も増えていきます。
ホームページを表示するにはインターネット回線の速度と、転送するファイルの容量が大きく関わっているんです。
クリック(タップ)してもなかなかページが表示されないのは、単に容量の大きな写真や動画を沢山つかっているからかもしれません。

情報の発信者からしてみれば、機会の損失につながる

ホームページが表示されるまでにかかる時間が長くなればなるほど、見に来てくれた人は「戻る」ボタンから検索一覧へ戻ってしまいます。
せっかく興味を持って見てもらえるかもしれなかった人を逃がしてしまっているかもしれないんです。
それはとてももったいないことですよね。

あなたのホームページを見たら、見に来てくれた人は「満足したかもしれない」「抱えていた疑問や問題が解決したかもしれない」と考えると、とてももったいないことです。
発信者からしてみても、「お問い合わせがあったかもしれない」「お客さんになってくれたかもしれない」「商品を買ってくれたかもしれない」と思うと、もったいないなんて言葉では足りないくらい残念なことです。

ホームページでも実店舗でも企業でも、人を集めること、興味を持ってもらうことは、難しく、本当に有難いことですよね。
その有難いことを逃してしまっているのは、様々な機会の損失になってしまいます。

表示までの速度を上げる3つの方法

1ページの表示に時間がかかるなら、表示するまでの時間を短くすればいいんです!

そのためには、
1.画像ファイルの使用を控える
2.動画を直接埋め込まない
3.ひとつのページに情報を詰め込み過ぎない
などが有効ですね。
読み込みに必要となる容量を下げてしまえば、表示までの時間が短縮できます。

もちろん、ホームページの表示にかかる時間にはページの容量以外にも相手に依存する問題もあります。
例えばインターネットブラウザの環境や、パソコンのプロセッサやメモリなど、性能の不足による反応の悪さなどです。
これらの問題は制作者・発信者側からではどうすることもできません。
でもホームページを表示するのに必要となるファイルの容量だけは、制作者・発信者でコントロールする事ができますよね?
先ほど紹介した方法を試してみる事で、表示までにかかる負担を減らす事ができるので、ホームページがなかなか表示されない時にはやってみる価値が十分にあります!

jqueryを活用する

読み込む総ファイル容量を減らす以外でも、画面上に出てきていない画像の読み込みを遅延させる方法もあります。
例えばLazy Load:Lazy Load Plugin for jQuery

普通はページを読み込んだ時に、そのページ内に配置されている全ての画像を読み込むところ、まだ画面上に出てきていない画像、ページをスクロールしないと見る事のできない画像を読み込まないようにするjqueryです。
画像を読み込み始めるのは、隠れていた画像が画面内に表示された時です。
これであれば余計な読み込みがされないので、ページを表示させるまでの時間を短縮する事ができます。

情報の詰め込み過ぎに注意して、ページを複数に分ける方法も検討してみよう

Webページと紙面の違いとして、1つのページに詰め込める情報量があります。
紙面であれば用紙のサイズ以上には情報を詰め込むことができないので、複数ページに分けますよね。
でもWebページの場合は、スクロール量が増えますが、上限がありません。なのでつい情報を詰め込み過ぎてしまうんです。

紙面を作るときに入れる事のできる上限を考慮してページ割りを考えるのと同じで、Webページも1ページに収めるファイル容量を考慮してページ割りを考えてもいいのではないでしょうか?
ひとつのページに情報を沢山詰め込んでみても、全体が見てもらえなければ意味がありませんよね。
先頭となる部分には興味を持ってもらえる写真と文章を載せ、細かい部分はさらにページ分けをして見てもらう。そしてそのページへ直接移動できるようにリンクボタンを設置する。という具合にページを切り分けて複数ページにすることも検討してみるのもいい方法です。

まとめ

・ページの表示に時間がかかると様々な機会の損失につながる
・画像や動画を多用しすぎないで、1ページに使われるファイル容量を抑える
・1ページに情報をつめこみすぎない
・複数ページに切り分けるという方法も検討してみる
・jqueryを使って、画像読み込みを遅延させてみる

  • このエントリーをはてなブックマークに追加