【初心者必見!】Webサイトの表示速度のチェック方法

Webサイトの表示速度が遅いとそれだけ離脱率が高くなります。

確かに同じような内容のWebサイトならサクサクと表示される方を選ぶのは当然でしょう。

レンタルサーバーを借りてWebサイトを運用しているなら、自分が構築したWebサイトがどれくらいのスピードなのか定期的にチェックすることは大切です。

 

 

 

無料で使えるWebサイトの表示速度チェックツール

以下の各ツールは無料で使えます。

それぞれ特徴があるので自分に一番合った(一番使いやすい)ツールを見つけてください。

 

■Webサイト表示速度チェックツール一覧

  • Google PageSpeed Insights
  • Google Analystics の「サイト上でのページ読み込み速度」
  • GTmetrix

 

 

Google PageSpeed Insights

「Google PageSpeed Insights」は、Googleが提供している無料のツールで「モバイル端末(スマホ・携帯電話)」「パソコン」向けのページのパフォーマンスを測定できます。

 

Google PageSpeed InsightsのURLです。

https://developers.google.com/speed/pagespeed/insights/?hl=ja

【初心者必見!】Webサイトの表示速度のチェック方法

 

測定のスコアは0~100ポイントで表示されます。

スコアが高ければ高いほどWebサイトの表示速度が速いと言えます。

 

 

使い方

Google PageSpeed Insights」のページへ移動します。

https://developers.google.com/speed/pagespeed/insights/?hl=ja

 

 

下図のページに移動したら表示速度の調査をしたいWebサイトの「URL」を入力して「分析」ボタンをクリックします。

 

 

結果を確認します。

結果ですが100点満点中61点でした。

どうすれば改善されるのか?「修正方法を表示」のリンクをクリックして確認します。

 

 

下図のように具体的にどうすれば表示速度が速くなるのかヒントがもらえます。

例えば下図の場合はレンダリングをブロックするリソースが多数あるので見直してねと言っています。

 

 

 

Google Analystics の「サイト上でのページ読み込み速度」

「Google Analystics」はGoogleが提供している無料のアクセス解析ツールです。

無料のツールであるにもかかわらず、多機能且つビジュアル的にユーザーアクセスのデータが表示されるので十分すぎるほど細かく解析することができます。

 

Google Analysticsを使うために準備

初めにGoogle Analysticsを利用するために「タグ」と呼ばれるコードをWebサイトに設置する必要があります。

※Googleアカウントを持っている前提で「Google Analytics」の「タグ」を設定する手順を説明します。

 

以下のURLにアクセスをします。

https://analytics.google.com/analytics/web/

 

Google Analyscticsにログインしたら下図のように左側ペインより「管理」をクリックして対象の「アカウント」を選択します。

その後「プロパティ」には対象のWebサイトを選択して「.js トラッキング情報」をクリックします。

【初心者必見!】Webサイトの表示速度のチェック方法

 

 

更に「.js トラッキング情報」-「トラッキングコード」をクリックします。

【初心者必見!】Webサイトの表示速度のチェック方法

 

下図のように「ウェブサイトのトラッキング」-「グローバルサイトタグ(gtag.js)」をコピーします。

【初心者必見!】Webサイトの表示速度のチェック方法

 

タグをコピーしたら下図のように自身のWebサイトの<head>タグの下に貼り付けます。

【初心者必見!】Webサイトの表示速度のチェック方法

 

 

以上でタグの貼り付けは終わりです。

 

 

Google Analysticsの使い方

タグを貼り付けたら左側ペインより「行動」-「サイトの速度」-「ページ速度」をクリックします。

 

 Google Analysticsの使い方

 

 

また、「ページ速度」の下に「速度についての提案」がありますが、これは上で紹介した「Google PageSpeed Insights」とリンクしています。

 Google Analysticsの使い方

 

 

以上の手順でページ速度を確認することができます。

 

 

 

GTmetrix

GTmetrixは海外の無料Webアプリで、Webサイトのロード時間やページサイト、リクエスト数を解析してくれます。

■サイトURL

https://gtmetrix.com/

【初心者必見!】Webサイトの表示速度のチェック方法

 

 

GTmetrixの使い方

GTmetrixの使い方はサイトにアクセスをして下図のように解析したいWebサイトのURLを入力して「Analyze」ボタンをクリックするだけです。

【初心者必見!】Webサイトの表示速度のチェック方法

 

 

下図が解析結果です。

「Performance Scores」には

  • PageSpeed Score
  • YSlow Score

が表示されます。

「Page Details」には

  • Fully Loaded Time
  • Total Page Size
  • Requests

が表示されます。

【初心者必見!】Webサイトの表示速度のチェック方法

 

 

 

GTmetrixのユニークな点

GTmetrixを詳しく調べると他のサイトと比べてユニークな点があります。

下図のように「つまみ」をクリックします。

そうすると「Relative Score The average PageSpeed score is 70%」と表示されています。

計測したWebサイトのPageSpeedは「51%」、この「GTmetrix」で計測したWebサイトの平均的なページ速度は「70%」なので「平均より下」というスコアが出ました。

つまり他のWebサイトと比べて自分が計測したWebサイトはどこら辺のポジションにいるのかが分かります。

平均以上か?平均以下か?が分かるのです。

【初心者必見!】Webサイトの表示速度のチェック方法

 

 

下図のように「YSlow Score」のつまみをクリックすると「Relative Score The average YSlow score is 68%」と記述があります。

これは「GTmetrix」で計測したWebサイトの平均的な「YSlow Score」「68%」であることを示しています。

また、計測したサイトの「YSlow Score」「65%」でした。

【初心者必見!】Webサイトの表示速度のチェック方法

 

 

YSlow Scoreとは?

YSlow Scoreとはサイトのパフォーマンスを計測するツールです。

JavaScriptで開発されています。

そのため、単純な静的サイトだけでなく、動的に作成されたコンポーネントを含む、Webサイト上のすべてのコンポーネントを含めてパフォーマンス解析をします。

サイトのパフォーマンスを計測するだけでなく「Google Analystics」のようにどうすればWebサイトのパフォーマンスを向上させることができるのか提案もしてくれます。

また、ページに関する統計情報も分析します。

 

以下、「YSlow」のサイトです。

http://yslow.org/

【初心者必見!】Webサイトの表示速度のチェック方法

 

YSlowというツールはブラウザにインストールして使用することもできます。

下図のブラウザ(Firefox、Google Chrome、Opera)に対応しています。

また、「ソースコード」も公開しています。

【初心者必見!】Webサイトの表示速度のチェック方法

 

 

 

 

まとめ

Webサイトのページ表示速度の計測方法が分かったと思います。

自身のWebサイトのページ表示速度が分かった所で具体的にどうすればいいのかを今後解説します。

 

 

 

Posted by 100%レンタルサーバーを使いこなすサイト管理人

コメントを残す

メールアドレスが公開されることはありません。