せっかくだから配信データも見直す

Safariの開発メニューの素晴らしさについて一筆…と思ったついでに、ブラウザに送りつける配信データについても見直してみました。これまではデータをそのまま送りつけていたのですが、サーバ側で圧縮してクライアントに送るようにしようかなって話です。

よって、またしても異常に長い文章になっています…。Safariの開発メニューの使い方含め、その辺に興味のある方だけ先にお進み下さい(笑)。

Safari 3.1から誰でも使える「開発」メニュー

実はSafari 3.1になってから初期設定を開いて「開発」メニューを有効にすることで、いろいろな情報を見たりユーザーエージェントを変更したりできるようになっています(もともとDebugメニューとして今までも使えたのですが、実は隠されてました)。
これはもちろんWindows版でも有効にできます。

実はこのメニューにある項目のそれぞれが使えるヤツらで、JavaScriptのエラーの箇所をチェックしてみたりCSSの内容をみてみたりといった、Firefoxではアドオンの類を追加しないとできないようなことも簡単にできるのです。あ、HTMLのバリデートも自動的にやってますね、そういえば。

で、中でも「ネットワークタイムライン」では配信データの容量というのが確認できます。時には「!」が付いて「このデータは圧縮して送ったらサイズもちっちゃくなるよ」みたいな吹き出しが出たり、この「Webインスペクタ」ウィンドウ全体では、スクリプトにエラーがあると赤いマークでお知らせ&該当箇所の表示とかも可能です。

zlib-000

実際にこのブログが配信してるデータを見るとこんな感じです。これはうちのサーバからだけでなく外部のソースも込みになりますが、単純に足し算すれば「テキスト: 28.36KB」「CSS: 12.29KB」「JavaScript: 43.32KB」の画像以外のデータが送られてるということが、下にある合計値をみるとわかります。

塵も積もればなんとか、なのでデータの圧縮を試みる

WordPressはPHPなので、設定ファイル「php.ini」の「zlib.output_compression」を「On」にすれば、zlibで透過的に圧縮されてコンテンツが送り出されます。しかし、これだけではCSSやJavaScriptのファイルとかは当然対象外です。WordPressだといってもこれらは外部ファイルですし、そのまま普通に配信されます。実際には、コンテンツのテキストよりもそっちの方がでかいってこともざらにあるでしょう。

zlib-001

ここで例えばPHP側の圧縮を有効にしてみるとこんな感じになります。これだけでも確かにDocumentのデータは半分以下になってますが、それ以外は何も変わりません。

これじゃ効果も薄いかなってことで、今回はApache側でも画像以外のデータを全部圧縮して送りつけてやることにしました。まず、Apache(うちは2なので)のモジュール「deflate」を有効にします。a2enmodコマンドを使ってdeflateが使えるように以下のような感じで入力して、Apacheさんを強制的にリロードします。
(※a2enmodは特定のモジュールを有効にします。無効にする時はa2dismod)

# a2enmod Which module would you like to enable? Your choices are: (ここにだらだらと使えるモジュールが出てくる) Module name? deflate ←deflateって入力してリターン Module deflate installed; run (ここにコマンドが出てくる) to enable. # /etc/init.d/apache2 force-reload ←こんな感じでリロード

んでもって、apache2.confとかに以下の記述を追加します。 今回はApache2のマニュアルにある記述をそっくりそのまま拝借しました(笑)。

<IfModule mod_deflate.c> SetOutputFilter DEFLATE BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary </IfModule>

マニュアルにあるコメント行とかなくすとこんな感じ。
で、保存して再起動すると圧縮が有効になります。その結果が下の図です。
ちなみにApache2でdeflateを上のようにして有効にすると、PHP側の圧縮は有効にしなくても圧縮されてます。ダブルパンチだと二重で潰れてるようですね。

zlib-002

という風に内部のデータだけでも圧縮してあげることで「テキスト: 12.71KB」「CSS: 3.76KB」「JavaScript: 36.17KB」まで減りました。「最初からちゃんとやれよ、お前」的な話ではあるのですがね…。久しぶりにApacheの設定見ましたよ(笑)。
まぁ、こんな風にSafariの開発メニューは使えるよってことが主題ですから(謎)。

たまには自分のサイトも見直してみましょう

圧縮するしないはともかくとして、こうやって一度ぐらいは自分のサイトや作っているサイトの様子でも見てみると良いですよ。本人は気付いてないだけでJavaScriptが何百KBとかあるかもしれませんからね…(ホントにそれって必要?みたいな)。携帯のフルブラウザで見る時は、そんなサイトでげんなりしています(笑)。

Web屋さんのブログでもHTMLのバリデートにバシバシひっかかってますね…、フフフ。

Apacheセキュリティ
Apacheセキュリティ
posted with amazlet at 08.05.01
アイヴァン リスティク
オライリージャパン
売り上げランキング: 66160
おすすめ度の平均: 5.0
5 まずこれを買おう

Tags: , , , , , , , ,

   

Comments are closed.


Performance Optimization WordPress Plugins by W3 EDGE