FC2ブログ

FireBugのPagespeedでHTMLの最適化


FireBug アドオンPagespeedでHTMLの最適化


アクセスUPには欠かせないサイトのページ表示のスピード
表示されるのが遅いといらいらして、外のページに行っちゃうかも。
そんな表示スピードの改善のためのツールがPagespeed


HTMLの検証や、javascriptのデバッグなど、用途の多いFireBugというツール
ブラウザのFirefoxのプラグインで、簡易版はChromeにもあります。

https://addons.mozilla.org/en-US/firefox/addon/1843/
FireFox用ダウンロード

https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench?hl=ja
Google Chrome用FirebugLite


ダウンロードして、FireFoxを開くと
Firebug.jpg
左下にこのようなマークが出ます。
この虫をクリックすると、Firebug画面が見られます。
(Chrome の場合はツールバーの左上)


コンソールでHTMLを見れたり、スクリプト画面でjavascriptなどを確認できます。

これにGoogleのアドオンPagespeedを入れると、
サイト表示の高速化ができます。



この中にあるPageSpeedでHTMLの表示スピードを最適化できます。
http://code.google.com/intl/ja/speed/page-speed/

PageSpeedを入れると、FireBugのツールバーに足されます。
pagespeed.jpg

このPageSpeedを開くと、このような画面が開きます。

pagespeed2.jpg


PagespeedのAnalyze Perfomanceボタンを押すと計測開始

HTMLリクエストの発生数を少なく、画像の最適化や、
HTML,CSSのMinify、CSS SPLITEの使用を勧められます。

ここでの注意。
CSSMinifyは改行やスペースがなくなるぐらいなので、
多少見づらくなる位ですので、やってしまいましょう。


CssMinifyの横の+ボタンをクリック
そうすると、CSSファイル一覧が出て、
横にsee optimizeとsave asが出ます。
save asで自分の任意のフォルダにセーブして、
サーバにアップロードしましょう。

問題はHTMLのMinify
FIREBUGは、バグの検証や、HTMLエラーなどのチェックができて、
エラーが無くなると、HTMLがW3Cを通った証明を発行してくれますが、
HTMLのMinifyをすると必要なダブルクォーテーションなどを抜かれてしまい、
W3Cに通らなくなります・・・

あと画像のMINIFYは非常に優秀ですが、
CSS SPLITEで画像を使用している場合、
FIREWOEKSの位置情報を消されてしまうので、
あとで、配置のposition座標を変える場合、
一からやり直しになります。

ほかには外部javascriptをなるべく数少なくするように
だとかjavascriptファイルの最小化

また、使っていないCSSセレクタの一覧
などが出ます。








スポンサーサイト



コメントの投稿

管理者にだけ表示を許可する

検索フォーム
カテゴリ
最新記事
アンケート
月別アーカイブ
お名前.com
リンク
RSSリンクの表示
google
MicroAD
ninja
忍者アド
広がるブログ
blomotion
サンプル・イベント・モニターならBloMotion
プレスブログ
[プレスブログ]価値あるブログに換金可能なポイントを差し上げます。
wadax
ブログ村
フリーエリア
人気ブログランキングへ
ブログランキングドットネット
リンクリックブログランキング
フリーエリア
FC2ブログランキング

FC2Blog Ranking

AMAZON
カラーミーショップ
ブログ広告
ブログ広告ならブログ広告.com
ぐるなび
中古DVD
QRコード
QR
SEO