Chromeで「何がページ表示速度のネックになっているのか」調べる方法


ChromeDeveloperToolNetwork_Cap 2016-05-11 15.20.59

ページ表示速度・改善計画実施中です。

ページ表示速度はSEOにも影響してきます。 ページ表示速度が遅いページは検索エンジンの掲載順に不利になるばかりか、実際のユーザもページが表示されるまで一定以上の時間がかかると、表示されきるまで待たずにページから出て行ってしまう…という情報もあるぐらい。

Tipstourはと言うと、実はあんまり芳しくなくてですね。 一般的に理想と言われる速度よりも遅い…という結果が出てしまっているもので、対応策を色々と試行錯誤しつつ改善しようとしているわけです。

まだ、結果はあんまり出てないけども。

 

そんなわけで、SEO対策上に使えそうなツールも、そのうちいくつか紹介していこうかなと思います。 まずはChromeだけで出来る、どの要素がページ表示速度のネックになっているのかを調べる方法です。

スポンサードリンク

関連記事

Chromeデベロッパーツールを使う

どの要素(画像やスクリプトなど)が悪さをして、ページ表示速度が遅くなっているのかを見極めるのは重要です。

言うまでもないですが、極端に表示に時間がかかっている要素、ボトルネックがあれば、それを停止するなり改善するなりという対応が取れるからです。

このネックとなる要素を見つける方法ですが、今回はGoogle Chromeのデベロッパーツールを使います。

ちなみにデベロッパーツール自体は、下記の記事でもさらっと紹介してました。

Chromeを更にディープに使うための知られざる10の小技まとめ(2015年11月版) | Tipstour

デベロッパーツールの開き方

デベロッパーツールを開くには、まずChrome右上のメニューボタンをクリックして「その他のツール」へ。

Cap_2016-05-11_15_20_30

続いて「デベロッパーツール」を選択。 これだけです。

Cap_2016-05-11_15_20_36

すると、こんな感じの画面が表示されるはず。 ここではWebページの開発者にとって役立つ機能が、たくさん揃ってます。 無料でこんだけのツールを提供しているGoogle、相変わらず太っ腹。

Cap 2016-05-11 15.20.59

ネットワーク読込速度を計測する

とりあえず今回はページ表示速度に絞って説明します。

デベロッパーツール上部のメニューから「Network」を選択。

Cap_2016-05-11_15_21_05

するとこんな感じの画面に移動します。 まだページ読み込みを実際に行っていないので、ここには何も表示されてません。

Cap 2016-05-11 15.21.16

実際に再読み込みして計測してみる

ここで改めてページを再読み込み(リロード)しましょう。 すると、こんな風に計測が始まるはず。 計測は勝手に終了します。

Cap 2016-05-11 15.21.27

読込時間とそのタイムラインの形式で図式表示されるので、視覚的にどの要素の読込に時間がかかっているのか、把握しやすいですね。 (1000ms = 1秒)

Cap 2016-05-11 15.22.05

どの要素がネックなのかを調べる

タイムラインの下に表示されているのがページ読み込み時に実際に読み込まれた要素の一覧。 ここで「Time」でソートをかけると、どの要素が一番時間がかかっているのかわかりやすいです。

Cap 2016-05-11 15.21.47

404などのHTTPエラーが返ってきている要素については、赤色で表示されたりもするので、エラーつぶしにも役立ちますね。

さらに一覧の要素をクリックすると、こんな感じでヘッダー部分やプレビューなどが見れたりもします。 読込に時間がかかってる要素はこうやって更に詳しく調べてみる、というのが進め方のセオリーかな。

Cap 2016-05-11 15.47.25

スポンサードリンク

 

とにかく、非常に便利な機能が標準でChromeには搭載されてます。

ただブラウジングするだけなら使うことはないけども、Webサイトやブログを運営する上ではいつか役に立つツールだと思います。

とりあえず、紹介までね。

それでは!

 

 

この記事が参考になったら、TipstourのFacebookページに『いいね!』をお願いします!

 

よろしければFeedlyもご登録ください!
follow us in feedly