TopFirefox > 2012年6月
2012年6月17日

Firefoxでサイトパフォーマンスのボトルネックをチェックできるアドオン「PageSpeed」

June 17,2012 12:03 AM
Tag:[, , , ]
Permalink

Firefoxでサイトパフォーマンスのボトルネックをチェックできるアドオン「PageSpeed」を紹介します。PageSpeedはGoogleから提供されています。

PageSpeed

このアドオンを利用すれば、「ブラウザのキャッシュを活用する・圧縮を有効にする・CSSスプライトに画像をまとめる」といったパフォーマンスの最適化のための項目や、その詳細なデータを確認することができます。

最適化のための詳細データ

なお、このアドオンを利用するには、Firebugアドオンを先に入れておく必要があります。

Firebugの使い方は以下も参考にどうぞ。

Firebug の使い方:(X)HTML と CSS の確認・修正方法のまとめ

1.インストール

Make the Web Faster - Google Developersのページにある「PageSpeed Insights for Firefox」をクリック。

Make the Web Faster - Google Developers

「このサイト(developers.google.com)からはFirefoxにソフトウェアをインストールできない設定になっています。」が表示されたら「許可」をクリック。

Make the Web Faster - Google Developers

「今すぐインストール」をクリック。これでインストールが開始します。

Make the Web Faster - Google Developers

「今すぐ再起動」をクリック。これでインストールが完了します。

Make the Web Faster - Google Developers

2.使い方

測定したいページを表示した状態で「F12」をクリック、またはメニューの「Web開発」→「Firebug」→「Firebugを開く」で、Firebugの画面(スクリーンショットの下半分の部分)を起動します。

Firebug

Firebugの上部メニューの右側にある「PageSpeed」をクリック。

Firebug

「Analyze Performance」をクリック。

PageSpeed

分析が開始します。

分析開始

分析結果です。全体のスコア(Page Speed Score)が100点満点換算で上部に表示され、左側には優先度(高:赤丸・中:黄色三角・低:緑チェックマーク)別の対策が表示されます。

分析結果

左側のアイコンまたはテキスト右側の余白部分をクリックすれば、詳細な情報が中央に表示されます。

詳細情報

テキストをクリックすれば、最適化の詳細な解説のページに移動します。

最適化の詳細な解説ページ

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
IT転職は【Green】Web/インターネット業界の求人に強い転職サイト グリーン
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

Categories
Monthly Archives
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 5.12