国道58号線をのんびりと行く

こちらの記事もタイトルの
『YSlow：ページ読み込み速度 gzipで高速化』まんまです。

YSlowで、「Compress components with gzip」と出る、アレです。

このブログではサーバーにDreamhost使っていますが、gzipで高速化してみました。
先日書いたExpires Headersの最適化と同じく、.htaccessで制御（自分検証）してYSlowの評価を上げます。
同名のgzipファイルがある場合はgzipを読み込んで、gzipファイルがない場合には通常のファイルを読んでくださいね、というお願い。

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

# GZIP処理
RewriteEngine On
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} \.(css|js|html?|xml)
RewriteCond %{REQUEST_FILENAME} !\.gz
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz
AddEncoding x-gzip .gz

IE6がgzipを読めないのか、圧縮したCSSやJSだけをサーバーに置いておくとIEでの動きが何かおかしいので、gzipと元ファイルの両方をサーバーにアップロードしておきます。
Firefoxなどはgzipを読み込むのでファイルに加筆修正した後はgzip圧縮とアップロードを忘れずに。

40kbのCSSファイルが8kbにまで圧縮され、読み込み速度も余裕で体感できる程速くなりましたよ。

WordPressの本文（記事内）でHTMLやCSS、PHPなどのソースをきれいに表示するプラグインはいくつかあるのですがこのブログで使っているのはSyntax Highlighter for WordPress。

Syntax Highlighter for WordPressのダウンロード先（ http://wppluginsj.sourceforge…….ghlighter/ ）からzipファイルをダウンロードして解凍。
プラグインフォルダにアップロード後、使用開始すればいいだけという、誰にでも簡単にはじめられるプラグインです。

Syntax Highlighter系のプラグインは他にもたくさんあるのですが、テーマとの絡みでしょうか。
このブログにはSyntax Highlighter for WordPressが一番しっくり来ました。

本文内では半角の大カッコ [] で［css］とか［html］とか［php］とかを括ってソースを記述し、最後に［/css］や［/html］、［/php］などで閉じるだけ。

具体的にはこんな感じで記述。

［css］ .hogehoge {background-color : #FFF ;}［/css］

記事本文の［css］などは全角の大カッコ使ってますのでコピペすると動かないので注意して下さい。
［css］などの必要タグはAdd Quick Tagプラグインを導入して、登録しておくと記事の作成が楽になります。

この先は自分のちょっとCSSカスタマイズメモ。
デフォルトに#e3e3e3の外枠を付けてみました。

syntax-highlighter/css/shThemeDefault.css にボーダーを追加します。
shThemeDefault.cssの冒頭を以下に変更。

.syntaxhighlighter
{
	background-color: #fff !important;
}

↓

.syntaxhighlighter
{
	background-color: #fff !important;
	border:1px solid #e3e3e3 !important;
}

以上、これだけでだいぶ見やすくなります。

ちなみにフォントサイズやスタイルを変更するには syntax-highlighter/css/shCore.css を触ります。
このブログではフォントファミリーにMS ゴシックを追加しています。

font-family: "ＭＳ ゴシック", "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;

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評価か・・・

WordPress 管理ページのビジュアルエディタのフォント変更。
自分ではなかなか使わないビジュアルエディタですが、ビジュアルエディタでの雰囲気とサイトの表示が違うこともあって、関係ないところで改行したり、Pタグ入れてしまったりするようです。じゃ、書いてる時点でイメージ出来たらいいのね、ということに。
Wordpressのwp-includesのCSSを変更。

変更箇所は \wp-includes\js\tinymce\themes\advanced\skins\wp_theme\content.css ファイルのbody.mceContentBody。
Wordpress2.9.2だと67行目あたりだけどbody.mceContentBodyで検索するのが早いかも。

body.mceContentBody {
	font: 13px/19px Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
	padding: 0.6em;
	margin: 0;
}

を

body.mceContentBody {
	font: 13px/19px 'メイリオ',Meiryo,'ＭＳ Ｐゴシック',Verdana, Arial, Helvetica, sans-serif;
	padding: 0.6em;
	margin: 0;
}

に変更。MACのリクエストはないのでここでは考慮していませんが、いずれ必要になるんだろうね。

web デザイナーのナナメガキ さんのページが参考になりました。
http://loconet.web2.jp/blog/ar……amily.html

しかしInternet Explorerは早くなくなって欲しいなぁ。

外部リンクにだけ「別ウィンドウで開く」よ、というアイコン を自動的に表示するCSSをやってみる。

a[href^="http"],
a[href^="https"]{background:url(/images/arrow04.gif) no-repeat right center;padding-right:15px;}
a[href^="http://www.route58.org"],
a[href^="http://route58.org"]{padding:inherit;background:transparent;}
* html a.external{ /* IE-expression (attr-selector) */
background:url(/images/arrow04.gif) no-repeat right center;padding-right:15px;}

サンプル http://route58.org
サンプル http://miyoya.com

CSSで背景として出すのではなく、イメージ画像として出す場合のCSSは以下。
素敵なアイコンと以下のCSSソースはCool Web Window さんから頂きました！ありがとうございます！

a[href^="http"]:after,
a[href^="https"]:after {content:url(/images/arrow04.gif);}
a[href^="http://www.route58.org"]:after,
a[href^="http://route58.org"]:after {content:"";}

いろいろなカラーやタイプのアイコンとソースの詳細はCool Web Windowさんのページから。
http://www.coolwebwindow.com/w……000157.php