ウェブサイトのページ表示速度チェックツールの各種まとめと使い方

ウェブサイトのページ表示速度チェックツールの各種まとめと使い方を解説します。

・GTmetrix

使い方

GTmetrix(http://gtmetrix.com/)にアクセスします。

入力画面

「Analyze Performance of:」と書かれているアドレスの入力画面が表示されます。こちらで、ページ表示速度を調べたいサイトのURLを入力します。

アドレス入力

入力後、「GO!」ボタンをクリックします。

解析中

クリックすると、ページの解析が開始されます。

結果

解析が終了すると、結果が表示されます。

Summary(要約)

Page Speed Grade:ページ速度の評価・階級を表示してくれています。評価は、Googleのサイト速度計測サービスによるもの。

YSlow Grade:サイトの評価・階級を表示してくれています。評価は、Yahoo!のサイト速度計測サービスの「YSlow」によるもの。

Page load time:ページの読み込み時間を表示してくれています。

Total page size:指定のウェブサイトをウェブブラウザで表示するために受けとったデータのサイズです。

Total number of requests:ウェブブラウザとサーバーとの間の要求の合計数です。

Breakdown(明細)

ページ速度

Breakdown(明細)では、ページスピード(Page Speed)の詳細な内訳が表示されます。

YSlow

YSlowでは、Yahoo!のサイト速度計測サービスでの詳細な内訳が表示されます。

Timeline4

Timelineでは、ウェブブラウザとサーバーとの応答時間などの内訳が表示されます。

PDFをダウンロードする

GTmetrixでは、測定したウェブサイトのページの結果をPDF形式でダウンロードすることができます。

PDFダウンロード

ダウンロードする場合は、右上の「Download PDF」という表示をクリックします。

 PDF report

クリックすると、「Regular Report」と「Full Report」の2つの選択肢があります。

「Regular Report」は通常版のレポートです。「Full Report」は、推奨事項が含まれています。注意すべきところなどが確認できます。

どちらか1つを選択し、「Download」ボタンをクリックすると、ローカル上に保存されます。

・Load Impact

使い方

Load Impact(https://loadimpact.com/)にアクセスします。

free test

アクセスすると、「Write code that scales」と表示された画面になります。その下に、「Enter a URL to test」と表示された入力フォームがあります。こちらに測定したウェブサイト、もしくはページのURLを入力します。

入力後、「Run free test」ボタンをクリックします。本ツールは有料版もありますが、試用版でページ速度が確認できます。

解析中

クリックすると、解析が開始されます。多少、解析完了までに時間がかかります。気長に待ちましょう。

Finished

解析が完了すると、「Finished」と表示されます。

ページ速度

ページ速度を確認する場合は、「Pages」をクリックすると確認できます。

Load zone:負荷テストをした場所が表示されます。

Test max:テスト時の最大対応時間です。

User scenario:設定したシナリオが表示されます。今回は試用版なので、自動生成されます。

・webwait

使い方

webwait(http://webwait.com/)にアクセスします。

webwait

 

アクセスすると、中央に小さく「website (e.g. “listoftweets.com”):」と表示された画面になります。その下に「http://player.fm」と表示された入力フォームがあります。

サイトを入力

こちらで、「http://player.fm」の文字を消して、測定したウェブサイト、もしくはページのURLを入力します。入力後、「time it!」ボタンをクリックします。

速度の表示

 

解析が開始されて、入力フォームの下にページ速度が表示されます。

・Pingdom Website Speed Test

使い方

Pingdom Website Speed Test(http://tools.pingdom.com/fpt/)にアクセスします。

Pingdom Website Speed Test

アクセスすると、「Pingdom Website Speed Test」と表示されます。その下に「www.example.com」と表示された入力フォームがあります。

testnow

こちらで、測定したウェブサイト、もしくはページのURLを入力します。入力後、「Test Now」ボタンをクリックします。

解析が開始

クリックすると、解析が開始されます。

結果ページ

しばらくすると、解析が完了。結果が表示されます。

結果の詳細

結果では、

Perf. grade:パフォーマンス(Performance)の階級を数値で表示。最大数値は100。

Requests:ウェブブラウザとサーバーとの間の要求の合計回数です。

Load time:ページの読み込み時間です。

Page size:指定のウェブサイトをウェブブラウザで表示するために受けとったデータのサイズです。

これらが表示されます。結果はTwitterやFacebook、Eメールに送れます。

明細

・waterfall

ページやファイルの表示時間が細かく見れます。

ページやファイル

・PerformanceGrade

ページの速度のパフォーマンスが数値による段階で表示されます。最大数値は100。

ページ速度性能

・Page Analysis

解析したページの詳細が表示されます。

ページ解析

解析データをダウンロードする

Download

解析データをダウンロードする場合は、解析結果に表示されている「Download HAR」をクリックします。

ローカル上に保存

(Windows8の場合)

クリックすると、ダウンロードが開始されます。ローカル上に「har」というファイルが保存されます。このままではファイルが開けませんので、名前を変更します。

名前を変更します。

右クリックで、名前の変更を行います。

名前変更後

(今回は、「pageperformance.har」というファイル名にしています。)

「○○.her」というファイル名で変更します。

ファイルを開く

このファイルを、pcapperf(http://pcapperf.appspot.com/)というサイトの「Chose PCAP or HAR file:」の「ファイルを選択」ボタンをクリックして、アップロードします。

upload

アップロードが完了すれば、「ファイルを選択」ボタンの右横にアップロードしたファイル名が表示されます。完了後、「Upload」ボタンをクリックします。

中身確認

クリックすると、ファイルの中身が確認できます。

・Google PageSpeed Insights

使い方

Google PageSpeed Insights(http://developers.google.com/speed/pagespeed/insights/)へアクセスします。

PageSpeed Insights

アクセスすると、中央に「ウェブページのURLを入力」と表示されたフォームがあります。こちらに、測定したウェブサイト、もしくはページのURLを入力します。

分析

入力後、「分析」ボタンをクリックします。

分析結果

クリックすると、モバイルとパソコンの両方の分析結果が表示されます。

サーバーの応答時間する

サーバーの応答時間

サーバーの応答時間を確認する場合は、「サーバーの応答時間を短縮する」の下に表示されている「修正方法を表示」で確認できます。Googleが行ったテストの結果を見れます。

他にもGoogleが提供する修正方法が確認できます。

・OctaGate SiteTimer

使い方

OctaGate SiteTimer(http://www.octagate.com/service/sitetimer/)にアクセスします。

OctaGate

アクセスすると、「URL of Site to Time:」と表示された横に入力フォームがあります。こちらに、測定したウェブサイト、もしくはページのURLを入力します。

入力後「Start」ボタンをクリックします。クリックすると、解析が開始されて結果が表示されます。

今回試しましたが、「Status: Monitor failed: Too many running monitors!」と表示され、モニタに失敗。

・GoogleAnalytics

使い方

GoogleAnalytics(http://www.google.com/intl/ja/analytics/)にアクセスします。

Analyticsログイン

アクセスすると、右上に「ログイン」と表示されています。こちらをクリックします。Analyticsにログインするには、Googleアカウントが必要になります。事前に登録しておくことが必要です。

Analytics管理

クリックすると、管理画面にログインできます。こちらで既にトラッキングコードを設置し確認されたウェブサイトで、ページ表示速度を確認したものを選択します。

ページ速度

選択したウェブサイトから、右メニューにある「行動」、「サイトの速度」の「サマリー」をクリックします。

サマリー

クリックすると、平均読み込み時間やサーバーの平均応答時間などが確認できます。

サイト上でのページ読み込み速度

「行動」の「サイトの速度」、「ページ速度」では、ウェブサイト内のページの平均の読み込み時間などが確認できます。

他のページ表示速度チェックツールと比べた時に、平均読み込み時間が遅い

GoogleAnalyticsの平均読み込み時間が、他のページ表示速度チェックツールと比べた時に遅い場合、”読み込み時間”なのか、”サーバー応答時間”なのかといったことを確認しましょう。つまり、問題となっている部分を”セグメント(部分)”的に見ていく必要があります。

サーバー応答時間は、サーバーがユーザーの要求に対して費やす時間です。

読み込み時間は、対象サイトに移動した場合、サイトが読み込まれ表示するまでの時間です。これにはキャッシュ(cache)というものが影響します。キャッシュという高速な記憶装置にサイトのデータを蓄えておけば、読み込まれる速度は早くなります。

もちろん、サーバーの応答が遅くて、読み込み時間が遅くなることもあります。

他にも、

・アクセスが増える、もしくは急増する

・プログラムの影響

・動画や画像のファイルの影響

・CMSの影響

etc…

といったことが可能性として考えられます。

サーバーの応答やページの読み込み速度が遅い場合は見直しが必要になります。このようなパフォーマンスは、ユーザーの満足度を低下させる恐れがあります。