Warning: Invalid argument supplied for foreach() in /home/takemitasaki/route58.org/wp-content/plugins/head-cleaner/head-cleaner.php on line 2895

Warning: Invalid argument supplied for foreach() in /home/takemitasaki/route58.org/wp-content/plugins/head-cleaner/head-cleaner.php on line 2895

Warning: Invalid argument supplied for foreach() in /home/takemitasaki/route58.org/wp-content/plugins/head-cleaner/head-cleaner.php on line 2895

Warning: Invalid argument supplied for foreach() in /home/takemitasaki/route58.org/wp-content/plugins/head-cleaner/head-cleaner.php on line 2895
Page Speed | 国道58号線をのんびりと行く

アーカイブ

‘Page Speed’ タグのついている投稿

YSlow:ページ読み込み速度 CSS Expressions は古いIE独自の仕様なので削除

2010 年 5 月 22 日 コメントはありません

YSlow対策:ページ読み込み速度 CSS Expressions修正。というか削除ですね、IE独自のこれは。
Wordpressで構築している別のサイト、YSlow最適化の中でAvoid CSS expressionsというのがB評価になっていました。
なんだろうと思って調べてみると、プラグインのCSSにexpressionというプロパティが入っているらしい。
自分では知らないプロパティだったのでまた調べてみる。
結果、expressionを使うとCSSの中でJavascriptが使えるようになるとのことでした。
が、これはInernet Explorer5.0以上のIE独自のCSS。

抜粋: http://www.inter-office.co.jp/……tents/187/

結果としてCSSのプロパティにJavaScriptの評価結果がセットされますが、IE以外のブラウザでは無視されます。なので、ブラウザ間で一環した表現をするために、IEだけをを特別扱いする必要がるような場合に役に立ちます。
問題はexpression 関数が思っている以上にやたらに評価されてしまうということです。ページが再描画されたりリサイズされたりする時だけではなく、スクロールしたり、マウスを動かしたりする場合にさえ評価されてしまいます。expression 関数にカウンタを書いて、どれくらい頻繁に評価されるのか追いかけてみたところ、ページ上をマウスカーソルを動かし続けたら、ちょっとの間に1万回も評価されていました。

しかもマイクロソフトによるとしかもIE8.0以降はサポートしていないとのこと
抜粋: http://msdn.microsoft.com/ja-j……53083.aspx

なぜ CSS expressions のサポートを終了するのですか?
* 標準への準拠のためです
CSS expressions は Internet Explorer の独自実装であって、他の環境との相互運用性を持ちません。
CSS expressions は通常 Internet Explorer のバグを回避するため、もしくは min-width や max-width のようにブラウザーがサポートしていないCSS 2.1 の機能をエミュレートするといった場合に用いられています。Internet Explorer 8 では、これらのバグ修正だけではなく、未実装の機能をネイティブでサポートするべく努力しました。
* パフォーマンスを向上させるためです。
Steve Souder のような Web パフォーマンスの専門家がフロント エンドのパフォーマンスを改善するために CSS expressions を利用しないこと (英語) を推奨しているように、CSS expressions の実行は非常に高い負荷を必要とします。
* ブラウザーの攻撃対象面を減らすためです。
CSS expressions はスクリプトの実行コンテキストを公開してしまうので、スクリプト インジェクションのような攻撃を受ける可能性があります。

はい、こんなことはしていられません。ということでCSS内部から該当の箇所を削除。
以下のような箇所です。

_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight :document.body.scrollTop+document.body.clientHeight-this.clientHeight);
_left:expression(eval(document.compatMode&&document.compatMode=='CSS1Compat') ? document.documentElement.scrollLeft :document.body.scrollLeft);
}

IE。。。削除した結果、YSlowのCSS Expressionsは以下のようにE評価からA評価になりました。
最適化前


最適化(というか削除)後

最初は総合評価EだったYSlow、今のところBまで来ています。
このブログは未だにE評価か・・・

YSlow:ページ読み込み速度 Expires Headersを.htaccessで

2010 年 5 月 20 日 コメントはありません

タイトルの
『YSlow:ページ読み込み速度 Expires Headers を.htaccessで。』まんまです。

サーバーにDreamhost使っていますが、自分でも簡単に(というかこれが限界でした) Expires Headers を最適化してみました。

この方法は.htaccessに以下のソースを貼り付けるだけで動いています(自分検証)ので簡単にYSlowの評価を上げることが出来ます。
以下の記述では最長の24週間、中間の2日、最短の2時間にしていますがmax-ageの値を変えることで自分の好きな時間に変更できます。

ということで、.htaccessに以下を追加します。

# Expire Header処理
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|gz)$"> # 24weeks
	Header set Cache-Control "max-age=14515200, public"
</FilesMatch>
<FilesMatch "\.(xml|txt)$"> # 2DAYS
	Header set Cache-Control "max-age=172800, public, must-revalidate"
</FilesMatch>
<FilesMatch "\.(html|htm)$"> # 2HOURS
	Header set Cache-Control "max-age=7200, must-revalidate"
</FilesMatch>

これだけですがYSlowだいぶ良くなりました(Add Expires headersの評価はFからAに!)
最適化前


最適化後

あーーーそうなんです。このブログにも適応させないと・・・。

後gzip処理によってcssとJavaScriptが相当圧縮されて軽くなりました!
今度書きます。

俺は一人でも軍隊 最強無敵だ~ ♪

Positions by Seo-Watcher