サイト閲覧者のストレスを軽減してユーザビリティUP!!【前編：サイト表示速度の簡単チェック方法】

コメントはありません

サイトを見ていて、表示が遅いためにイラッとしたことはありませんか？
さらに、読み込み完了まで待てずに閲覧することをやめてしまったという経験もあるのでは？

私はあります。しょっちゅうあります。けっこうせっかちなので。

しかし、コレ、自分がそのサイトの運営者だったらと考えると……かなり痛い。せっかくサイトに来てくれた方にストレスを与えちゃっていたり、もういいやと思われちゃっているんですから。

この記事では、表示が遅くなる原因、その原因をつぶす前と後の速度検証結果などを紹介しますが、どうやって速度を検証するのかだけ早く知りたい～という私と同じくせっかちな方は、以下の目次から「4.今回使ったチェックツール」へお進みください。

表示速度が遅くなる原因

サイトの表示速度が遅くなる原因はひとつではありません。

  • 画像が多い・重い
  • 文章量が多い
  • ガジェットなどが多い
  • キャッシュがたまりすぎている

など

これらのうち、対策をとると効果絶大なのが、「画像」と「キャッシュ」。

この2つの対策を取るだけでどのくらい変わるのか、具体例を見ていきましょう。

ビフォーアフター

つい先日リニューアルした弊社サイト（このサイト）を例に、対策をとる前と後のスピードテスト結果です（検証したのはトップページ）。

GTMatrix ビフォーアフター

上がビフォー：「とりあえずサイトができた」の段階。

下がアフター：「半日ほど作業して2つの対策を取った」段階。

項目解説（左から）

Page Speed ScoreGoogleの評価基準による表示速度評価
※F（20％）→ A（92％）に改善
Y Slow ScoreYahoo!の評価基準による表示速度評価
※E （56％）→ C（76％）に改善
Fully Loaded Timeページが表示されるまでの時間
※6.5秒→4.9秒に改善
Total Page Sizeページのサイズ
※7.02MB→1.43MBに改善
Requestsサーバへのリクエスト回数
※90回→60回に改善

どの項目もガッツリ変わったことがおわかりいただけると思います。

高速化のためにやるべき「たった2つ」のこと

このビフォーアフター間にやったことが、先ほど効果絶大と書いた2つ。

  1. 画像を軽くする
  2. キャッシュ制御

もちろん、もっといろいろやれることはあるのですが、とりあえずこの2つだけでもやっておけば、ずいぶん（前掲のビフォーアフターくらいは）変わります。

あれもこれもやるのは大変だしね～という私のように面倒くさがりな方は、ぜひこの2つにトライしてみてください。

具体的に何をするのかは、近日アップ予定の後編にて。

今回使ったチェックツール

GTMatrix
https://gtmetrix.com/

チェックしたいURLを入力して、「Analyze」をポチっとするだけ。カンタンです♪ 結果や評価だけでなく、どこを改善すればよいかも教えてくれます。たいていは、ここで解説した「画像」と「キャッシュ」の見直しを指摘されると思います。

対策を施すかどうかはともかく、ご自身のサイトがどのくらいのスピードで表示されるのか（来てくれた方にどのくらいストレスを与えてしまっているか）を知っておくためにも、ぜひチェックしてみてください！

おまけとまとめ

ちょっと（だいぶ）いやらしいですが、誰もが知っているような超大手企業様のサイトいくつかをこのチェックツールにかけてみました。

GTMatrix 参考

わざと結果が悪いものだけを載せているわけではありませんよ！ 10サイトくらいチェックしてみましたが、いずれもこんな感じ（Google、Yahoo!ともに評価がF、表示速度は平均10秒台半ば）でした。

  • 事業内容が多い → 画像が多い
  • ブランディング重視 → 高画質の画像にしたい

などの理由からこういう結果になるのだと思いますし、ブランディングを重視するという点はとても共感できます。

反面、サイトに訪れたユーザーがストレスなく閲覧できること＝ユーザビリティも重要。

ブランディングとユーザビリティ、どちらも考えたうえでの落としどころが大切ということでしょうね