無駄に重いサイト

主観的な印象ではありますが、近頃、無駄に動作が重い(ページの読み込みに時間がかかる)Webサイトが多いような気がします。一見なんてことなさそうな(リッチなアプリケーションが実装されていたり、高解像度画像や動画が貼り付けられていたり、といった様子がない)ページであっても、ブラウザに読み込まれるのに時間がかかってしまい、コンテンツ内容を閲覧したり機能を操作したりできる状態にならないケースがたびたび見受けられるのです。

Webの世界では、以前より8秒ルールという言葉があります。ナローバンドの時代から言われているものですが、「8秒以内にフィードバックがないと(ページがブラウザに表示されて閲覧や操作が可能な状態にならないと)、来訪者はフラストレーションを感じ、サイトから離脱してしまう」というものです。昨今では、ブロードバンド時代(...という表現も古いかもしれませんが)を反映してか、6秒ルール3秒ルールといった言葉も聞かれます。

こうした言葉がある一方で、冒頭で述べたように重いサイトが多いのは、なぜなのでしょうか。「バックエンド」側の要因(サーバー環境や動的なシステム、ネットワークインフラなど)は別として、いわゆる「フロントエンド」側(ブラウザに表示されて実際にユーザーが操作する部分)の原因を考えてみると、以下のような要素が挙げられると思います。

  • ファイルサイズの大きなアニメーション(Flashなど)が貼り付けられている。
  • 動的なバナーや広告が必要以上に貼り付けられている。
  • 装飾的なアプリケーション(ブログパーツなどのウィジェット)が多く実装されている。
  • たくさんの、あるいはファイルサイズの大きなスクリプト(JavaScript、Ajaxのライブラリー、マッシュアップAPIに関する記述など)が含まれている。

これらの要素は、ビジュアル的に目を惹いたり、機能として充実している印象を与えたり、といったメリットがあるので、つい色々とサイトに組み込んでしまうことが多いのではないでしょうか?しかし、コラム記事「フィードバックを返す」で述べたように、すばやい表示こそが最良のフィードバックであることを心得ておきたいものです。ユーザーが目的を達成するために本当に必要か、という観点で冷静に見直しを行ない、個々の要素のサイズを軽減する工夫をしたり、ユーザーのニーズが低い(サイト運営側の自己満足的な)要素は思い切って外したり、といった措置が必要だろうと思います。

特にスクリプトの組み込みについては、表(おもて)からは見えないだけに、気をつけていないと「いつのまにかサイトが重たくなっていた」ということにもなりかねないので、注意が必要です。

ご自身のサイトが「最近ちょっと重いかな」と気になる場合は、計測ツールを使って「見える化」(数値化)し、原因を特定してみると良いでしょう。
計測ツールは色々ありますが、当サイトでは、Firefoxのアドオンである「Firebug」と「Hammerhead」を使用しています。

「Firebug」は、現在ブラウザ(Firefox)で開いているWebページに関係するあらゆるファイル(HTMLファイルや画像ファイル、JavaScriptファイルやCSSファイルなど)を足し合わせた、トータルのファイルサイズを計測する機能を備えています(図示)。
Firebugの表示例

「Hammerhead」は、Firebugの機能拡張です。ページの読み込み時間の実測値をリアルタイムで表示することができます(図示)。
Hammerheadの表示例
一点注意が必要なのは、この手の実測値を出すツールでは、動作検証する環境(PCやネットワークのスペック)に結果が大きく依存するので、恵まれた環境で計測した場合、出てくる評価が「甘くなる」ことです。「一般ユーザーに近い環境」を意識して検証することと、検証環境の基準を明確にしておくことが大事だと思います。

当サイトでは、アクセシビリティ指針のなかに、「ページの読み込み時間について」という項目を設けており、「どのような検証環境でどの程度の条件をクリアするか」という基準を明示しています。一部、例外はありますが基本的には:
「下りの速度が20Mbpsから30Mbps程度」で「無線LAN使用によるボトルネックあり」という環境下で「スーパーリロード(キャッシュをクリアした状態でのページ読み込み)したときのHammerheadでの計測値が、最大でも3秒台であること」としています。また、ページのトータルファイルサイズも読み込み時間に大きな影響を与えますが、これについては「スーパーリロードしたときのFirebugでの計測値が、500KB以内であること」としています。

記事を共有

Twitter に投稿 Facebook に投稿 はてなブックマークに投稿 Pocket に追加