自サイトの表示速度などのパフォーマンスを評価してくれるツールとして、Googleの「PageSpeed Insights」をご存知の方も多いかと思います。
WEBページの表示速度は、ユーザービリティの観点からも重要ですし、Googleの検索結果にも影響を与える重要な要素です。
表示速度の遅いページは、ユーザーの離脱率も高くなってしまいますし、そのことはコンバージョン率にも影響してきます。
なので、こうしたツールを利用して、できる限り自サイトの表示スピードを上げていく必要もあるかと思います。
PageSpeed Insightsは、以下のページで自サイトのパフォーマンスを調べることができます。
検索ボックスに調べたいページのURLを入力し、[分析]ボタンを押します。
すると、以下のようにモバイル、およびパソコンで表示した際のパフォーマンスをそれぞれ点数で評価してくれます。
点数による評価とともに、修正すればさらにパフォーマンスが向上する修正個所を指摘してくれますので、それに従って修正していけば、点数も上がり、表示速度も向上します。
これだけでも十分便利なのですが、さらにPageSpeedInsightsのChrome拡張機能を使うと一層便利です。
PageSpeedInsightsのChrome拡張機能のインストール方法
まず、Chromeを立ち上げます（Chromeをインストールするにはこちらのページから）。
Chromeから以下ダウンロードページにアクセスします。
https://developers.google.com/speed/pagespeed/insights_extensions
ダウンロードページが表示されたら、緑色の「Install Chrome Extension」と書かれたボタンをクリックします。
そして、「PageSpeed Insights (by Google)」と書かれたページ右上の「無料」と書かれた部分をクリックします。
さらに、「新しい拡張機能の確認」のポップアップの「追加」をクリックします。
これで、ChromeにPageSpeed Insightsがインストールされました。
PageSpeedInsightsのChrome拡張機能の使い方
まず、調べたいWEBページをChromeで開きます。
Chromeの右上にある「Ξ」マークをクリック→[その他ツール]→[デベロッパーツール]の順で開きます。
すると、ブラウザの下方に、以下のようなデベロッパーツールが開きますので、その上部の「PageSpeed」をクリックし、続けて「分析を開始」ボタンをクリックします。
すると、以下のような「提案の概要」が表示されますので、あとは、各修正個所に対する提案に従い、改善していきます。
PageSpeedInsightsのChrome拡張機能の便利なところ
まず、PageSpeedInsightsのChrome拡張機能では、冒頭のWEB版のPageSpeedInsightsの指摘箇所にくわえて、その他にも修正点を検出し、改善策を提案してくれる点が非常に優れていると思います。
また、私が、このPageSpeedInsightsのChrome拡張機能を使ってみて、特に便利だなと感じたところは、HTMLやcss、JavaScriptなどのリソースの圧縮、また画像のロスレス圧縮などをこのChrome拡張機能だけでできてしまうところです。
例えば、cssの圧縮の場合、当サイト「リソース（CSS、JavaScript）を圧縮しページスピードを改善」にも掲載しましたが、「YUI Compressor」や「Packer」などの外部圧縮ツールを使用していましたが、このPageSpeedInsightsのChrome拡張機能で圧縮も行ってくれるようです。
例えば、左に表示されている修正個所の概要の「cssを縮小する」をクリックすると、指摘されているcssファイルが表示されます。
その表示されているcssファイルの右端の「最適化されたコンテンツを表示」をクリックすると、以下のように最適化された内容を表示するURLが表示されます。
このURLをクリックすると、以下のように最適化されたcssが表示されます。
ただ、ご覧のとおり、コメントやインデントなどは取り除かれているようですが、まだ改行や空白箇所などは除外されていないので、完全とは言い切れないかもしれません。
また、JavaScriptについては、日本語で記述した箇所は文字化けしてしまったりなど使えない場合もあります。
また、画像の最適化についても、外部のツールを使えばもっとロスレス圧縮比率を上げられる可能性もありますが、それでもこのPageSpeedInsightsのChrome拡張機能で最適化したソースや画像でページを更新し、再度、このツールで分析を行った結果、とりあえず修正個所はクリアしました。
以上のように、場合によってはやはり外部のツールを使用しなければならないケースもありますが、ほとんどがこのPageSpeedInsightsのChrome拡張機能で最適化できますので、とても便利かと思います。