テクノロジー観測所

Technology Observatory(テクノロジー観測所)は"初心者を卒業した(い)"人を対象とする情報サイトです。

ページ読み込み速度を見える化、どこで引っかかったかを調べる2つの方法

この記事は約1分23秒で読めます

ページの読み込み速度はアクセスアップを図る上で避けて通れない指標です。

ただ、「読み込みが遅い」といわれても、具体的にどこでどう遅くなっているのかって調べられます?

そこで今回は、ページの読み込み時に具体的にどういう作業が発生しているのかを見るツールをご紹介します。

方法①:Chromeデベロッパーツールを使う

chrome_developer_tool

目的のページをGoogle Chromeで開いてキーボードのF12を押すか、右クリックメニューの「検証」項目を選択するとデベロッパーツールが開きます。

chrome_network_check

その中から「Network」項目を選びます。

最初は何も表示されませんので、この項目を開いてからページを更新します。

network_timeline

するとこのように、そのページを表示する際に使われたファイルがドバーッと出てきます。

CSSファイル、Javascripファイル(JS)、ページ内の画像1つ1つなど、個別に出てくるので件数はかなり多いと思います。

一覧の後ろのほうにそのファイルを読み込むのにかかった時間がミリ秒単位で表示されます

1秒=1000ミリ秒です。

これを見て、読み込みに時間のかかっているファイルを特定し、個別に対処することでページ読み込み時間を削減できます。

たとえば特定のCSSやJSファイルが時間をかけているようなら、それをbodyやfooterで読み込むようにしてみるとか。

特定のPNG画像が時間をかけているようなら、サイズを絞ったりEXIFを削除する等の軽量化を施すとか。

方法②:Web担当者フォーラムが公開しているスクリプトを使う

Web担当者Forum版 ページ速度分析ツールを拝借して使用します。

bookmarklet

ブックマークレットなので使い方は超簡単、リンクをブックマークバーにドラッグして登録します。

Web担当者Forum版ページ速度分析ツール

あとは目的のページを開いてからブックマークレットをクリックすると、分析結果が表示されます。

読み込み全体に何秒かかったかもわかりますし、リソースごとの時間もわかります。

Web担当者Forum版ページ速度分析ツール2

また改善点もアドバイスしてくれるので、非常に頼りになります。

こうしたツールを使うことは自分のサイトのことをより深く知るきっかけにもなります。

関連記事

  1. Lighthouseがv8でウェイトが変化
  2. 解析不能な構造化データのエラー
  3. RankBuddy- iPhone and iPad app
  4. 今すぐできるテクニカルSEO URLを検査してみよう
  5. ChromeデベロッパーツールのNetworkタブの注目ポイント
  6. wordpress-seo-plugins-5-selection

コメントをお待ちしております

HTMLタグはご利用いただけません。