「PageSpeed Insights」の使い方

公開日: : 最終更新日:2014/07/30 デベロッパーツール

拡張機能「PageSpeed Insights」の使い方を紹介します。

PageSpeed Insightsとは

PageSpeed Insightsは、Google Chromeのディベロッパーツールを拡張する機能です。

拡張することで、ウェブページの読み込み速度を測定し、速度を向上させる方法を提案してくれます。

PageSpeed Insightsのインストール

Chrome ウェブストア   PageSpeed Insights  by Google

拡張機能追加

PageSpeed Insightsの使い方

インストールが終わったら、ブラウザ右上にアイコンが追加されます。

f8ud6yjw4509kDi

アイコンは邪魔になるので非表示でいいと思います。

せっかくなので、先にオプションから設定します。

アイコンを右クリックからオプションを開きます。

もしくは、メニューからツール→拡張機能を選択し、「PageSpeed Insights」のオプションをクリックします。

すると、このような画面が開きます。

af6Fx5y8DG3

上から順番に説明していきます。

「Autorun:Run automatically when page loads」

チェックをいれると、ページ読み込むと自動で実行します。

「Optimized resources:Don’t produce optimized versions of resources」

チェックをいれると、最適化されたリソースを作成しなくなります。

「Select analyze filter」

分析するフィルターを4種類から選択できます。

「Select language」

言語を選択できます。

「Show PageSpeed score:Show PageSpeed score in the overview summary.」

チェックをいれると、ページ読み込み速度のスコアを表示します。

設定が終わったら、実際に機能を使ってみます。

速度を測定したいページで、右クリックから「要素を検証」をクリックします。

もしくは、メニューからツール→デベロッパーツールをクリックします。

すると、このような画面が開きます。

d9i3jJ9eIe90i

右上にある「PageSpeed」をクリックします。

見つからない場合は、隠れているので幅を広げるか「>>」のようなアイコンにマウスを乗せると見つかります。

クリックすると、このような画面が表示されます。

kds92okOke2

「分析を開始」をクリックします。

すると、読み込みが始まり終わると結果が表示されます。

kjds02KDo2do

 

(H)、(M)、(L)は優先すべきことを分類してくれています。

優先順位はH>M>Lです

個人的感想

機能自体はとても使える機能です。

でも、デベロッパーツールを多用するような人でなければ、普通にサイトから使えばいいかな。

  • このエントリーをはてなブックマークに追加
  • Pocket

関連記事

Chrome ウェブストア   PageRank

「PageRank」の使い方

拡張機能「PageRank」の使い方を紹介します。 PageRankとは PageRankは

記事を読む

Chrome ウェブストア   Clear Cache

「Clear Cache」の使い方

Clear Cacheの使い方を紹介します。 Clear Cacheとは Clear Cac

記事を読む

Chrome ウェブストア   Page Refresh

「Page Refresh」の使い方

拡張機能「Page Refresh」の使い方を紹介します。 Page Refreshとは P

記事を読む

Chrome ウェブストア   Zoom

「Zoom」の使い方

拡張機能「Zoom」の使い方を紹介します。 Zoomとは Zoomは、簡単にウェブページを拡

記事を読む

Chrome ウェブストア   Utime

「Utime」の使い方

拡張機能「Utime」の使い方を紹介します。 Utimeとは Utimeは、日付をUNIXt

記事を読む

Chrome ウェブストア   Link Checker

「Link Checker」の使い方

拡張機能「Link Checker」の使い方を紹介します。 Link Checkerとは L

記事を読む

Chrome ウェブストア   WhatFont

「WhatFont」の使い方

拡張機能「WhatFont」の使い方を紹介します。 WhatFontとは WhatFontは

記事を読む

Chrome ウェブストア   User Agent Switcher

「User-Agent Switcher」の使い方

拡張機能「User-Agent Switcher」の使い方を紹介します。 User-Agent

記事を読む

Chrome ウェブストア   Enable Copy

「Enable Copy」の使い方

拡張機能「Enable Copy」の使い方を紹介します。 Enable Copyとは Ena

記事を読む

Chrome ウェブストア   Page Ruler

「Page Ruler」の使い方

拡張機能「Page Ruler」の使い方を紹介します。 Page Rulerとは Page

記事を読む

PAGE TOP ↑