サイトの表示速度の改善をアドバイスしてくれるGoogleのPageSpeed Chrome版の使い方

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

サイトの表示速度のパフォーマンスを上げるために
色々とアドバイスをしてくれるのがGoogle謹製のPageSpeed

このツールは以前ウェブマスターツールで公開されていましたが
現在は、ChromeとFirefoxでの拡張機能として利用できます

またApacheに組み込むタイプのモジュールでは
サーバーサイドで自動で最適化してくれるなどの機能がありますが
レンタルサーバー利用者等には関係ないものです

GoogleのPageSpeed Chrome版の使い方

目次

  1. ChromeにPageSpeedをインストールする
  2. PageSpeedでサイトを分析する
  3. 分析結果を活用する

 

1 ChromeにPageSpeedをインストールする

下のリンクからChromeにPageSpeedをインストールします
Chrome版 PageSpeed

インストールは

Chrome インストール

 

画面にある青いボタンをクリックしてインストール開始です

 

2 PageSpeedでサイトを分析する

インストールが完了すると、ツールバーにアイコンで出てきますがこれ不要です
非表示にでもしておきます

実際にPageSpeedを使う場合は
キーボードのF12キーを押します

そうすると、Chromeのデベロッパーツールが表示されます
そこにPageSpeedの項目が追加されているのでそのタブページに移ります

WS000155

 

PageSpeedのタブで、ページの分析を開始します

WS000156

画像で青で囲った、上部の「分析」か下部の「分析を開始」をクリックでページの分析が開始しされます

 

ページの分析が完了すると結果が出ます

WS000157

表示されるものには優先度があり
高い優先度
中ぐらいの優先度
低い優先度
試験的なルール

4項目あります、それぞれの項目に表示された具体的な改善案をクリックすると
それぞれの詳細が出ます

 

3 分析結果を活用する

分析した結果を基にWebサイトを最適化するために改善して行きます

それぞれの項目をクリックすると最適化するためのヒントと
ソースを提供してくれるものもあります

例えば画像などであれば、圧縮出来るものがあれば圧縮したものを提示してくれます

WS000152

最適化されたコンテンツをクリックします

最適化されたコンテンツのURLが出てきます

WS000154

このリンク先のものを保存すれば最適化したファイルを手に入れることが出来ます

画像以外にもCSSやjsなどのファイルもの圧縮したものを吐き出してくれます。CSSやjs等基本的に再編集することがなければ圧縮したファイルを使ったほうが、サイズダウン出来てきます

手元にはコメント入のファイルを残しておけば、編集時にはこちらのに差し替えて終われば
再びPageSpeedから圧縮したものを保存るという使い方も出来ます

一番効果の高い改善案はサイトを圧縮するもので
Gzipを使うとサイトを圧縮することが出来ます

こちらで .htaccessを使ってサイトをgzipに圧縮し、それを確認する方法
紹介したものをよかったら参考にしてみてください

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)