Google Chromeで簡単にサイトの速度調査！プラグインで表示速度も短縮してみた

どうもこんにちは。まえちゃんです。
4ヶ月ぐらいで12キロ(74→62)痩せたダイエット方法か、お役立ち的な内容についてか。
どちらを書こうか悩みましたが、今回はお役立ち的な内容で。

ウェブサイト運営者、管理者であればみんな気になるWebページの表示速度！！
googleのランキングに影響するし、サーバーに負荷をかけている可能性もあるし、下手するとユーザーがイライラして他のページに行っちゃうことも。
ページの表示が１秒遅くなれば数割もの人が直帰してしまう、なんて話もあるくらいです。

googleのPageSpeed Insightsからでも調査できるのですが、今回はもう少し詳しく調べることのできるgoogleのdevelop toolで表示速度を測ってみます。

google developer toolでの調査方法

1.google chromeで調査したいページを開きます。
2.ページが表示されたところで、windowsならショートカットキーF12、Macならcomman + option + Iを押します。
※Google Chrome右上のメニューから → その他のツール → デベロッパーツール、またはページ上で右クリック → 検証でも表示が可能です。

すると下記のようなウィンドウが表示されます。

3.ウィンドウ上部のメニューからネットワークタブをクリック
(一番上のtimeが754msとなっているのが最初に受け取ったレスポンスのhtmlです。)

4.一番最初に転送されて来たファイルの詳細を確認してみます。

あれ。ワクワクエストのページの転送に時間がかかっている…

Waiting(TTFB)の568msのところが、サーバー側でページを表示するためのPHPなどの処理をしている時間なのですが、どうやらそこで時間がかかっているようですね。
ワクワクエストのような記事のサイトで、最初のレスポンスが754msというのは時間がかかりすぎています。

というわけで、表示を早くするべく対応してみました。

WordPressにプラグインを入れて表示速度を短縮

ワクワクエストはwordpressで作っているので、対策にキャッシュプラグインをいれてみます。

87msまで短縮されました！！

このような感じで、表示速度で遅い結果が出た時や表示が遅いなと感じる場合にどうぞ試してみてください。

技術者の方でしたらgoogle developer toolを使うことで、

・サーバーからのレスポンスが遅い
・javascriptの実行待ちによるレンダリング遅れ
・大容量の画像を大量に掲載している時の転送遅れ

などのページの表示速度が遅い原因を切り分けもできちゃうんですよね。
とても便利なので、みなさん使いこなせるようになりましょう！！

以上、まえちゃんでした。

▼ジョイントメディアのホスティングサービス『J CLOUD』のWEBサイトはこちら▼
ホスティングサービス
【J CLOUD】