世の中のキニナル話題を紹介します

サイトの表示速度をチェックする方法!改善の前に現状を知ろう!

アバター
WRITER
 
site-speed-check
この記事を書いている人 - WRITER -
アバター
詳しいプロフィールはこちら

WEBサイトの表示速度はユーザーの離脱、クリック、コンバージョンに大きな影響を与えるだけでなく、SEOや検索順位のアルゴリズムにも関係すると、Googleが明確に宣言しましたね。

画像やエフェクトを多用して、ユーザーにとって見やすくわかりやすいサイトを作ることはとても大事なことですが、サイトの表示速度が遅くなってしまっては元も子もありません。

ページが表示され、ユーザーが操作を開始するまでの時間が2秒遅くなると直帰率が50%も上昇してしまうというデータもあるそうで、デザイン以上に「表示の速さ」がユーザーからもGoogleの検索アルゴリズムからも求められて来ています。

では、あなたのサイトの表示速度は本当に遅いんでしょうか?

速度改善はもちろん大切ですが、何事も前に進むためには現在地を知らなければなりません。

そこで今回は「あなたのサイトの表示速度を簡単に調べる方法」を紹介します。

スポンサーリンク
 
 

サイトの表示速度を簡単に調べる方法

Audits、またはLighthouseを使用する

Google Chromeのデベロッパーツールに標準搭載されている「Audits」、またはChromeの拡張機能である「Lighthouse」がおすすめです。

AuditsもLighthouseも同じものですが、Auditsの方がどのデバイスで計測するか、など計測の設定ができるためおすすめです。

Lighthouseは詳細設定なし、1クリックで使える簡易版Auditsといった印象です。

スポンサーリンク

Auditsで表示速度を計測する

Google Chromeでサイトを表示する

site-speed-check01

まずはGoogle Chromeを立ち上げ、表示速度を計測したいサイトを表示します。

スポンサーリンク

デベロッパーツールを開く

site-speed-check02

Chromeの画面右上にあるオプションより、「その他のツール」>「デベロッパーツール」と選択します。

ショートカットキーは

  • Macの場合:Command+Option+I
  • Windowsの場合:F12

となります。

各ブラウザには「デベロッパーツール」と呼ばれる開発者向けのWEBページ検証ツールが用意されています。

開発者ツールを使用することで、HTMLの構造や適用されているスタイルの確認、JavaScriptの動作確認やサイトパフォーマンスのチェックなど、さまざまな確認、検証ができます。

この開発者ツールの中にある機能のひとつがページの表示速度を計測する「Audits」になります。

Auditsでサイト速度を計測する

site-speed-check03

では、早速Auditsを使ってサイトの速度計測を行いましょう!

開発者ツール内のタブからAuditsを選択します。

Auditsタブを開くと計測のための各種設定ができます。

設定項目は以下の通りです。

Device

どの端末での速度を計測するかを選択できます。

PC表示を計測したい場合は「Desktop」、スマホ表示を計測したい場合は「Mobile」にチェックを入れましょう。

Audits

計測する項目です。

基本的に全てチェックしておきましょう。

Throttling

どの回線速度で計測するかを選択します。

「Simulated Fast 3G, 4x CPU Slowdown」を選択しましょう。

項目の設定が完了したら、「Run audits」をクリックして計測を開始しましょう。

スポンサーリンク

計測結果を見る

site-speed-check04

計測が終わると、スコアリングレポートを表示してくれます。

スコアが低い順にレッド、オレンジ、グリーンで表示されるため、視覚的にもわかりやすいですね。

スコアがレッド、オレンジの項目について改善が必要というわけです。

難点は英語でわかりづらいというところですが、それぞれの項目が何を表示しているか、簡単に説明していきます。

Perforemance

ページのパフォーマンスを示してくれます。

特に「First Meaningful Paint」は主要なコンテンツなどが画面に表示されるまでの時間を表しています。

ファーストビューの表示速度を見る際にはこちらを目安にすると良いですね。

ユーザーが感じるローディング体験に直結する値です。

Opportunities

パフォーマンス改善のために最適化すべきことを示してくれます。

Accessibility

WEBアプリケーションの使いやすさの評価です。

指標にマッチしていないものを提示してくれます。

Best Practicers

https化やキャッシュ利用など、最新の仕様に準拠しているかを評価してくれます。

SEO

WEBページがSEOに準拠してマークアップしてくれているかを評価してくれます。

スポンサーリンク

で、結局何を見ればいいわけ?

計測結果は全て英語なので、わかりづらい部分もたくさんありますね。

各項目を細かく見ていくと、いろいろな結果や改善施策を示してくれていますが、サイトの表示速度結果という点で言えば、まずは「Performance」の点数を指標にすればOKです。

Googleは各種項目の合格点を85点としています。

このスコアが上がることは表示速度の改善、ひいてはユーザーにとってより快適なサイトの実現へとつながる指標になりますので、最終的には全項目85点以上を目指して、改善していきましょう。

スポンサーリンク

まとめ

今回は「あなたのサイトの表示速度を簡単に調べる方法」を紹介しました。

速度改善は地道な作業と検証の繰り返しです。

改善後の成果がわかるように、まずは現在のサイトスピードを計測しておくことをおすすめします。

最後まで読んでいただきありがとうございました!

スポンサーリンク
 
この記事を書いている人 - WRITER -
アバター
詳しいプロフィールはこちら

Copyright© Kininal , 2019 All Rights Reserved.