Webページを軽くするテクニックWebページを軽くするテクニック

表示が遅くて余計なものがたくさん表示されているページは読まずに閉じてしまう表示が遅くて余計なものがたくさん表示されているページは読まずに閉じてしまう

コンテンツと無関係な部分の表示に時間がかかってしまうようなデザインは避けましょう。

余計な表示に時間がかかるページはアクセス者を逃す余計な表示に時間がかかるページはアクセス者を逃す

コンテンツと無関係な部分で表示に時間がかかるようなページデザインは避けましょう。

最近は高速な回線が普及してきたため、多少重たいページでもそれほどストレス無く表示されるようになってきています。

しかし、それでも早く表示されるに越した事はありません。

また、伝送されるパケット量に応じて課金される携帯端末などの接続形態もあります。

余計なものの表示はできるだけ減らすほうが良いでしょう。

Webサイトの閲覧に慣れたアクセス者であればあるほど、ほんの少しの待ち時間にもストレスを感じがちです。

何か情報を差がいている最中のアクセス者で、検索結果に表示されたたくさんのページを同時に閲覧している場合、表示が遅くて余計なものがたくさん表示されているページは読まずに閉じてしまうかもしれません。

余程他にはないユニークな情報があるのでない限り、アクセス者は辛抱強く待ってはくれないでしょう。

一瞬で表示されるためには、極力無駄を省いた軽いページである必要があります。

Webページを軽くする方法は一つではないWebページを軽くする方法は一つではない

ページを軽くして表示速度を速めるには以下のような方法があります。

  • 大きな画像や動画を活きない掲載しない
  • テキストでもかまわない文字列を画像にしない
  • デザイン目的だけにJavaアプレットやFlashを使わない
  • 外部に独立できるソースは独立させる

 

また、データ量は軽くならないものの、早く表示されるように感じる(体感速度が向上する)ものとして、以下の方法があります。

  • 段組構成は、上部で一旦区切る
  • 上部にコンテンツと関係ない文章を掲載しない
  • 面積の大きな画像は下部に表示させるか、本文を回り込ませる

 

大きな画像や動画を活きない掲載しない

アクセス者が予期しない場所で、いきなりサイズの大きな画像や動画を表示するのは避けましょう。

読み込みに時間がかかるような大きな画像や動画は、まずはサムネイルなどを表示させておき、それをクリックすることで表示できるような構成にします。

そうする事で、それらを見たいと思わないアクセス者には余計なデータをダウンロードさせずに済みます。

画像の場合は、表示面積を小さくする(縮小する)事でデータサイズを減らせるほか、画質や色数を下げる事でもデータサイズを減らせます。

どうしても大きな面積を使って掲載する必要がある場合は、画質や色数を落とせないか検討してみましょう。

写真で一般的に使われるJPEG形式では、画質(圧縮率)を自由に指定できます。

たいていの場合、最高画質が必要になる事はありませんから、実施に確認して許せるレベルまで下げましょう。

テキストでもかまわない文字列を画像にしない

普通のテキストで掲載しても問題のない文字列をわざわざ画像化して掲載しないようにしましょう。

文字列を画像化すると、閲覧者が文字サイズを変更できない、検索にぎっとしない、読み込みに時間がかかる、テキストをコピーできない・・・などの様々なデメリットがあります。

携帯端末のような、表示面積が限られている環境やアクセス速度が比較的遅い環境では、テキストでもかまわない文字列が画像になっているページは嫌われます。

わざわざ画像にしなくても、スタイルシートを使えば大きさを細かう調整できますし、フォントの指定や色の指定も可能です。画像にする必要性の無い文字列は、できるだけテキストで表示するようにしましょう。

画像化しないほうが修正も容易になるためメンテナンス製も高くなります。

デザイン目的だけにJavaアプレットやFlashを使わない

Web歳途上の機能やコンテンツとして必要なものではなく、例えばデザイン目的だけに使われるアプレットやFlashなどは使わないでおきましょう。

Javaアプレットを使うと、Javaの起動やアプレットの読み込みに時間がかかります。

本当に必要ならともかく、ただ凝ったタイトルロゴを表示するためなどにアプレットを使うと、アクセス者に大きなストレスを感じさせてしまうでしょう。

外部に独立できるソースは独立させる

スタイルシートやスクリプトは、独立したファイルに分離させておきましょう。

多くのブラウザは、一度読み込んだファイルをローカルにキャッシュしておき、何度もサーバから読み込むような事はしません。

スタイルシートやスクリプトのように、複数のページで共通して利用する可能性の高いファイルは、外部に独立させておくほうがWebサイト全体でのアクセス速度は向上します。

また、HTMLソース内にたくさんそれらを書き込むと、メンテナンスが行いにくくなるデメリットもあります。

たとえ、その1ページからしか読まれない事が解っているスクリプトやスタイルシートであっても、将来的に他のページで使うことになるかも知れませんから独立させておくほうが望ましいでしょう。

段組構成は、上部で一旦区切る

段組レイアウトを使っている場合、買う壇が縦に長いと、上部の表示に時間がかかる可能性があります。

なぜなら、段組構成は、上から順番に表示されるわけではなく、1段ずつ順番に表示される事になるからです。

長い段組構成によって表示が遅く感じられるのを避けるには、ページ上部で段組構成を一旦区切るのが有効です。

そうすると、ページ上部の段組構成だけが速く表示されるようになります。

上部にコンテンツと関係ない文章を掲載しない

各ページに共通の文章や、著作権表記、使用上の注意、面積事項など、そのページコンテンツと無関係な内容は、上部には配置せず下部に移動させましょう。

全体のデータ量は変化しなくても、体感表示速度が変わります。

ページにアクセスしたとき、最初に余計な文章が表示されている場合と、最初から本文が見えている場合とでは、校舎のほうが速く表示されているように感じられます。

面積の大きな画像は下部に表示させるか、本文を回り込ませる

ページ上部に巨大な画像を配置すると、その画像の表示が完了するまで何も表示されていないように感じられてしまう可能性があります。

その場合は、その画像の表示にかかる時間がそのままページの待ち時間になってしまいます。

大きな画像を表示する必要があるページでは、本文を先に配置して画像を下部に表示させたり、画像の横に本文を回り込ませて配置したりするなど、文字列を上部に配置するようにしましょう。

そうすると、画像が表示されていない段階でも本文を読み始める事ができるため、待ち時間が長く感じられません。

ページを軽くする事は検索エンジンに対しても有効ページを軽くする事は検索エンジンに対しても有効

余計なものを排除してページを軽くする事には、SEO目でのメリットもあります。

余計な記述を省く事でデータサイズを小さくできた場合、検索エンジンに対しても本当に必要な点だけを読ませられる事になるからです。

それによって、話題が特定されやすくなったり、重要なキーワードの出現頻度の低下を防いだりできます。

Drupalの事をもっと知りたい …… Drupal FAQで質問してみる
Drupalで新規構築したい ………… 開発支援個別セミナーご案内
Drupalサイトを運営している …… 運用・保守で最低限必要な事
このページ の ページTOPDrupalサイト構築 の サイトマップDrupalサイト構築 の TOPページ