×

Webページの表示速度が遅い原因とは?無料で使える速度チェックツールまとめ

2015年7月12日 SEO

遅い亀

Webページを見ている時に、表示が遅いと感じることがありませんか?

Webページの表示速度を改善すべき理由でもあるように、人は表示に2秒以上待たされるとイライラし始めるというデータがあり、表示速度を高速化はほぼ必須であるといえます。

戦闘機のように速くWebページの表示速度を改善すべき理由
Webメインのブログのつもりがグルメレポートばかり書いている今日この頃…。 そろそろWebのことを書こうと思います。 Web関連の...

Webページの表示速度が遅い原因とは?

Webページの表示速度が遅くなる原因としては主に下記のような項目が挙げられます。

  • サイトを運用しているサーバーの動作が遅い(共用サーバや使用料が安価なものを使用している)
  • ページを表示に必要なファイルの数、ファイルの容量が多い(CSS、JavaScript、SNS、画像)
  • データベース(DB)を使用して膨大なデータを管理している(DBからデータを抽出する時間がかかる)
  • キャッシュを無効にしている
  • 閲覧者のネットワーク環境が悪い

無料で利用できるWebページ表示速度チェックツール

単にWebページを見ただけでは表示速度が遅くなっている詳しい原因は分かりません。
そこで、表示速度チェックツールを使用します。

Webページの表示速度チェックツールを使用する目的は下記の2点です。

  • 表示が遅延している原因を見つけるため
  • 施策前と施策後で、どれくらい表示速度改善されたかを確認するため

ここでは無料で手軽に利用できる表示速度チェックツールをいくつか紹介します。
各ツールごとに異なる特徴があるので、自分で使い勝手の良いものを選んで利用してください。

PageSpeed Insights

pagespeedinsights

Googleが提供しているWebページの表示速度をチェックするツールです。1~100(上限100)までのポイントで表示速度を評価してくれます。

表示にかかる時間は表示していませんが、表示速度遅延の原因と改善案をPCとモバイルで別々に詳しく提示してくれます。

改善の具体的な手順は自分で調べなければいけませんが、改善案どおりに施策すれば表示を高速化できるようになっています。

【公式】PageSpeed Insights

Pingdom Website speed test

pingdom

Pingdomが提供しているWebページの表示速度をチェックできるツールです。1~100(上限100)までのポイントで表示速度を評価してくれます。ページを表示するためのファイルの読み込み時間を一覧で表示してくれるので、どのファイルが読み込みに時間がかかっているかが視覚的に分かりやすくなっています。

【公式】Pingdom Website speed test

GTmetrix

grmetrix

サイトの表示速度をA〜Fランクで評価してくれます。また、YSlowでの評価も同時に確認できます。他にもページのロード時間、ページサイズ、HTTPリクエスト回数などもチェックできます。

全て英語ですが、PageSpeedのタブで、画像の最適化がされているか、ブラウザのキャッシュが有効になっているかなどの項目、そのタイプ(サーバー、画像、CSS、JS)、優先度も一覧で確認できます。
ただし、使用しているサーバーによっては上手くツールが動作しないことがあるので注意が必要です。

【公式】GTmetrix

Site24x7 Tools

Site24-7tools

タイムラインでファイルの読み込み時間が視覚的に分かるようになっています。
ページのHTTPリクエストの回数、ダウンロードサイズが円グラフになっており、ファイルの割合なども分かりやすくなっています。

【公式】Site24x7 Tools

FirefoxアドオンFirebug

firebugネットワーク

Firefox使いならでhtml、cssコーディングの効率を挙げてくれるアドオンFirebugは有名ですね。

Firefoxをダウンロード・インストールします。ウインドウズの場合、F12キーを押してFirebugのネットという項目を見ると、ファイルの読み込み時間がタイムラインで確認できます。HTML、CSS、JavaScript、画像別に読み込み時間を確認できます。読み込み時間をチェックするときはCtrl+F5キーでスーパーリロード(キャッシュクリア)すると良いでしょう。

【公式】Firebug

Chromeディベロッパーツール

chromedeveloper

Chromeのディベロッパーツールでもファイルの読み込み時間を確認できます。ウインドウズの場合、chromeを起動してF12キーを押して、Networdをクリックするとファイルの読み込み時間をチェックすることができます。HTML、CSS、JavaScript、画像別に読み込み時間を確認できます。こちらでも読み込み時間をチェックするときはCtrl+F5キーでスーパーリロード(キャッシュクリア)すると良いでしょう。

【公式】Chrome

まとめ

いかがでしたか?

英語のサイトが多いですが、翻訳サイトなどを利用すればなんとかなります。
Googleが提供しているPageSpeed Insightsと、他2~3つのチェックツールを併用するのがおすすめです。

関連記事