スポンサーサイト

ブログ移転しました

新URL→ http://4th-life.com
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブログ移転しました

新URL→ http://4th-life.com
このエントリーをはてなブックマークに追加 この記事に拍手する

Tag:スポンサー広告 

YSlow

ブログ移転しました

新URL→ http://4th-life.com
Firefoxのアドオン

今回はYSlowの使い方について。

YSlowはサイトの表示パフォーマンスを測定してくれます。
つまりはそのサイトを開く速度が遅いのか早いのか測定できるのです。

それだけではなく、もし表示速度が遅かったとすれば、
何が原因で遅いのか教えてくれるので、
パフォーマンス向上に役立ちます。

YSlowはFirebugをインストールしていないと動作しませんので、
先にFirebugをインストールしてください。


yslow-1.jpg

①・・・
インストールすると画面右下にYSlowと表示されるので、
クリックすればこの画面が立ち上がります。
もしくはFirebug立ち上げてFirebugのメニューバーから
YSlowをクリックすると出てきます。

yslow-2.jpg


②・・・
次にRun Testをクリックします。

すると、

yslow-3.jpg


③・・・
測定結果がこれです。
A~Fの6段階評価で、
総合評価と個別評価されています。
Aが一番早いので、
総合Cなので普通ですかね。
いや、改善点いっぱいありますけど・・・。

視覚的にどこが遅いか見たい時は、
総合評価の上あたりにあるStatisticsをクリックすると、
グラフで表してくれます。

yslow-4.jpg


総合評価と個別評価の画面に戻ります。

詳しい知識が必要な項目もありますので、
改善できるとこいじるだけでもだいぶ速度は違ってきます。

※以下は個別評価項目を抜粋して説明

Makefewer HTTP requests
・・・サイトを表示する際に取得する画像やCSS・Javascriptなどのファイルの数が
多いほど表示が遅くなります。
CSS・Javascriptをできるだけまとめたり、
画像の解像度は必要以上に大きくしないなどの対策が考えられます。
画像の場合、CSS Spriteという、
使用する画像をひとつにまとめて、配置はCSSで調整するという方法もあります。

css-sprite.jpg

GoogleやYahooもこの方法を使用してパフォーマンスを向上させています。

詳しい設置方法はまた気が向いたら書きますが、
つまりは、1枚の画像にすることにより、
読み込みにかかる速度を減らせるということです。

PutCSS at the top
・・・CSSはページの上部、つまりHEAD内に配置せよということです。
CSSをページの下の方に配置すると、
CSSなしでまずは一旦構築し、
さらにCSS読み込みしてまた再構築が行われるからです。
これによる無駄を省くというものです。

PutJS at the bottom
・・・動作の重いJavascriptを上の方に配置していると、
なかなかHTMLやCSSを読み込んでくれないので、
Javascriptをページの下の方に配置することにより、
Javascript読み込みを後回しにせよという項目。
しかしまあ、先にJavascript読み込ませたい時もあるので、
お好みで。

Make JS andCSS external
・・・CSSとJavascriptは外部ファイルにせよという項目。
各ページに同じCSSやJavascriptを埋め込むより、
外部ファイルにして読み込んだほうが効率的であるということです。
まあ、作業的にも外部ファイル化した方が楽なので、
既に行っていることでしょうけど。

他にも項目はありますが、
サーバーに関わるものやらややこしい設定もあるので(勉強不足)、
上に挙げた項目ぐらいはチェックしといたほうがいいでしょう。

ブログ移転しました

新URL→ http://4th-life.com
このエントリーをはてなブックマークに追加 この記事に拍手する

Tag:トップ  Trackback:0 comment:0 

Comment

comment form
(編集・削除用):
管理者にだけ表示を許可
プロフィール

名前・inacaster
職業・SOHO(在宅ライター)
ジャンル・WEB関係全般
人種・関西人
年齢・華の1981年生まれ

カテゴリー
スポンサードリンク
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。