アイフラッグラボ
iFLAG Labs is a technical information site which iFLAG offers.
iFLAG Labs provides you with the opportunity to experience and evaluate new and emerging innovations, technologies, and service from iFLAG.

rss

mod_pagespeedのTips

Firefox テクノロジー mod_pagespeedのTips
  • 件 (全件)
  • 1

mod_pagespeed事始 その8 - HTTPS対応とModPagespeedCustomFetchHeader

いつもご覧頂き、ありがとうございます。アイフラッグ基盤担当のTTです。一ヶ月近くも更新が止まっていましたが、あまり気にしないでmod_pagespeedの不定期連載の第八回を開始します。
本日も弊社のホームページサービスへの導入事例を基に、役に立つかもしれないちょっとしたことを綴って参ります。


今回は、弊社が運営しておりますアイフラッグデンキのショッピングカート画面を例に説明いたします。
弊社のカート画面ではHTTPS通信が必須で、HTTPで通信しようとするとHTTPSにリダイレクトされます。
次のURLにアクセスして、httpsにリダイレクトされることを確認してください(別画面で開きます)。

http://cart.xaas.jp/m8811894/cart/shoppingCartList/add/domain/iflagdenki.jp

このリダイレクトの実装は、例えばmod_sslを利用している場合にはサーバー変数HTTPSで判定すると思います。次の例のようにサーバー変数HTTPSが存在していなければ、HTTPSにリダイレクトします。

例:
    RewriteCond %{HTTPS} ^$
    RewriteRule /(.*)$ https://%{HTTP_HOST}/$1 [L]

mod_pagespeedが画像ファイルなどを要求するときにはHTTPで要求しますが、この判定でHTTPSにリダイレクトしてしまいます。


ブラウザの処理

http://example.com/index.html ⇒ リダイレクト ⇒ https://example.com/index.html

mod_pagespeedの処理(リダイレクトを抑止したい!)
http://expample.com/sample.css ⇒ リダイレクトhttps://example.com/sample.css

このようなケースで使用するのがパラメータModPagespeedCustomFetchHeaderで、以下のように利用します。
ModPagespeedCustomFetchHeaderの利用例:

    ModPagespeedCustomFetchHeader HTTPS on

この設定により、mod_pagespeedのリクエストのヘッダに「HTTPS: on」が付与されるためリダイレクトを回避することができます。


この他にも、「mod_pagespeedからのリクエストに専用のヘッダを追加してアクセスログを分ける。」といった用途にも利用可能です。全てのmod_pagespeedからの要求にはこのヘッダが付与されるので、その点だけ注意してください。
最後に本家URLを載せておきます。
http://developers.google.com/speed/docs/mod_pagespeed/config_filters#custom-fetch-headers

2013-04-19 14:47:42

コメント(0)   |  トラックバック (0)

mod_pagespeed事始 その7 - 携帯用にconvert_meta_tagsを無効にする

一週間のご無沙汰でした。アイフラッグ基盤担当のTTです。
今回のmod_pagespeedの不定期連載は、携帯電話への対応についてです。


携帯ページでは、XHTMLを利用している場合があります。XHTMLとして定義しているのに、HTMLの文法で記述しているというミスをした経験があるかもしれません。
通常、このような場合はXHMLの文法エラーとしてブラウザで表示できずに気がつきますが、HTTPのレスポンスで「Contet-type: text/html」と返すとブラウザではHTMLとして扱い表示できます。
ただし、このようなケースでmod_pagespeedを有効にすると、XHTMLのパースエラーが発生します。


こちらの間違ったXHTMLを見てください。

ソース表示

<br>タグが閉じられていません。HTMLでは正しいのですが、XHTMLとして記述するなら<br/>ですね。
パースエラーにならないのは、拡張子がhtmlになっているために、「Content-Type: text/html」で返ってきているためです。

ここで、フィルタ「convert_meta_tags」を有効にするとHTTPのレスポンスが「Content-Type: application/xhtml+xml」に変わります。こちらのエラー画面を開くと次のようなエラーが発生するはずです。開発者ツールなどを利用して、HTTPのレスポンスヘッダがXHTMLになっていることも確認してください。
XHTMLパースエラー画面


このフィルタ「convert_meta_tags」はCoreFiltersで有効となるフィルタなので、ユーザコンテンツが存在して互換性を重視する場合には無効にすることをお勧めします。この件は本家のFAQにも記載されていますので、ぜひご一読ください。
http://developers.google.com/speed/docs/mod_pagespeed/faq#meta_tags_and_xhtml

2013-03-25 17:53:43

コメント(0)   |  トラックバック (0)

mod_pagespeed事始 その6 実験 - パラメータによるmod_pagespeedの制御

アイフラッグ基盤担当のTTです。
そろそろネタが無くなって終了しそうなmod_pagespeedの不定期連載記事ですが、お付き合いくださってありがとうございます。

今回はURLパラメータを利用した実験について、説明いたします。今までの説明でも何度か利用していますのでお気づきの方もいらっしゃると思いますが、mod_pagespeedはURLパラメータを変えることで実験できます。この機能は非常に便利で、ModPagespeedを利用していて問題があったときなどに重宝します。


mod_pagespeedの有効/無効化

表示の乱れや、Javascript、CSSの問題などがmod_pagespeedに起因するものか判別したいときに、一時的に無効にしたいことがあります。このときにはURLパラメータにModPagepseed=offを渡すことで一時的に無効にできます。
http://iflaglabs.jp/mod_pagespeed_sample01.html?ModPagespeed=off

大抵の場合はこれで十分ですが、リダイレクトやフレームを利用している場合にはURLパラメータでは対応できないことがあります。その場合には、リクエストヘッダにModPagespeed: offをつけることで無効にできます。
参考までにリクエストヘッダの変更に私は、Firefoxのプラグイン「Modify Headers」を利用しました。

利用するフィルタの指定

これはURLパラメータにModPagespeedFilters=利用するフィルタ,…と記述します。
次の例はrewrite_javascriptrewrite_imagesだけを有効にしています。JavaScriptとイメージが書き換わっていて、CSSが書き換わっていないことを確認指定ください。

http://iflaglabs.jp/mod_pagespeed_sample01.html?ModPagespeedFilters=rewrite_javascript,rewrite_images

特定のフィルタの有効化・無効化

現在の設定から特定のフィルタだけを有効・無効にしたい場合に、上記の指定では大量のフィルタを全て記述しないといけません。この要求には、フィルタ名の前にプラス記号(+)かマイナス記号(-)をつけることで実現できます。
次の例は、第四回で使用したフィルタTRIM_URLSを無効にするものです。
http://iflaglabs.jp/mod_pagespeed_sample02.html?ModPagespeedFilters=-trim_urls


この他にもModPagespeedCssFlattenMaxBytesなどの設定値を変更できたりします。
またベータ版になりますが1.2.24.1からは、ModPagespeedForbidFiltersで有効化することが出来ないフィルタを定義できたりModPagespeedForbidAllDisabledFiltersで無効化したフィルタを有効化できなくすることが出来ます。
が、リンクを記載しますので詳しくは本家の説明を参照してください。
http://developers.google.com/speed/docs/mod_pagespeed/experiment?hl=ja

2013-03-18 19:59:39

コメント(0)   |  トラックバック (0)

mod_pagespeed事始 その5 今回こそCSSスプライト(sprite_images)

アイフラッグ基盤担当のTTです。

今回からは他の執筆者との差別化と使い勝手の検証を兼ねて、ブログページに移って不定期に記事を投稿していきます。

これからも、よろしくお願いいたします。


なんとか今回は、時間を空けずに更新することができました。

前々回に予告したCSSスプライト機能(sprite_imagesフィルタ)についての説明です。

デモを見たのですが、「すごい!よくこんなの考え付くなぁ」と感心しました。

まずは本家のデモをご覧ください。最初は最適化されていないかもしれませんが、その場合はリロードしてください。

http://www.modpagespeed.com/sprite_images.html?ModPagespeed=on&ModPagespeedFilters=rewrite_css,sprite_images

元は3つの画像ファイルをmod_pagespeedが1ファイルに纏めています。


しかしデフォルトでは無効になっているオプションです。

何でデフォルトでは無効なのだろう?と思い、検証したところ私も以下の理由で利用をあきらめました。

  1. CSSスプライトにするための条件が厳しい
  2. 弊社の環境ではインライン化の制限内で収まるケースが多く、有効な場面が少ない
  3. TRIM_URLSが効かない

このフィルタの効果としては、CSSで使われる複数の画像を一度のリクエストで取得してサーバへの要求回数を減らすことです。

この利点は理由1.と2.でほぼなくなり、理由3.によりたとえ効果があっても弊社環境への適用ができなくなりました。

以下に非常に簡単ではありますが、個別の理由について説明します。


CSSスプライトにするための条件

  • CSSに画像サイズ(heightとwidth)が記述されていること
  • PNGとGIFのみ対応(JPEGは後日対応予定)

画像サイズはほぼ指定しておらず、CSSの修正が大量になるためにこの時点であきらめました。参考:ソースの表示

インライン化で収まることが多い

この例では、CSSスプライトを有効にしてもインライン展開で完了しています。

インライン化を無効にするとCSSスプライトを利用します。

TRIM_URLSが効かない

TRIM_URLSを有効にしてもソースを見るとドメインまで指定されています。

現在のバージョンを利用される際は、TRIM_URLSが効かないことを覚えておいてください。

前回の記事でも述べましたが、弊社のホスティング環境ではTRIM_URLSが有効でないと正常に表示できなくなります。

このために、たとえ効果があっても適用はできなくなりました。


最後に、本家の解説は以下になります。本番システムでの利用を考えている方は、制限事項やリスクを熟読されることをお勧めいたします。

https://developers.google.com/speed/docs/mod_pagespeed/filter-image-sprite

2013-03-12 20:48:53

コメント(0)   |  トラックバック (0)

  • 件 (全件)
  • 1