mod_pagespeed事始 その1　（2013-01-07）

はじめまして。アイフラッグのシステム基盤担当のTTです。

アイフラッグデンキ店長から「たまには技術的な話もブログに載せたい」、と無茶振りをされたので、昨年11月にGoogleから正式リリースされた mod_pagespeed について、アイフラッグデンキのサイトに適用して得たノウハウを不定期で載せてきます。

これらの記事ではバージョン「1.1.23.2-stable」に基づいて記述いたします。

実は、このページもmod_pagespeedを有効にしています。

次の画像は元のサイズは380×380ですが、表示サイズは100×100です。

mod_pagespeedを利用すると、画像自体を自動的に100×100に縮小してクライアントに転送します。

もしも上の画像サイズが縮小されていない場合は、リロードして頂ければ縮小された画像になります。

次のリンクは、元の画像です。

https://iflaglabs.jp/images/material/WHR-G301N_3.jpg

もとの画像のサイズは16.8KBなのに対して、縮小後の画像サイズは3KBになっています。

画像の縮小以外にも、JavaScript、CSS、画像のインライン展開やHTML、JavaScript、CSSの空白の除去など機能は多岐にわたります。

このあたりは本家の解説を見ていただくか、別に解説されている方もいらっしゃるのでそちらを参照してください。

次回は、画像を縮小する条件について記述しようと思います（気分次第で変えるかも）。

以上

mod_pagespeed事始 その２　resize_imagesが有効になる条件（2013-01-09）

こんにちは。アイフラッグのシステム基盤担当のTTです。

mod_pagespeedのノウハウ解説の二回目です。今回は、画像サイズを縮小する条件について説明します。

その前に、mod_pagespeed導入時にちょっと嵌ったことがありましたので記述します。

mod_pagespeed をrpmから導入した場合に、デフォルトの pagespeed.conf をそのまま使用すると mod_pagespeed_message が全世 界に公開されています。

   
        Allow from localhost
        Allow from 127.0.0.1
        SetHandler mod_pagespeed_message
   
   
        Allow from localhost
        Allow from 127.0.0.1
        SetHandler mod_pagespeed_referer_statistics
   
 

以下のように、Order allow,denyを追加してください。

   
        Order allow,deny
        Allow from localhost
        Allow from 127.0.0.1
        SetHandler mod_pagespeed_message
   

   
        Order allow,deny
        Allow from localhost
        Allow from 127.0.0.1
        SetHandler mod_pagespeed_referer_statistics
   
 

さて、前回も使用した画像が再登場します。

次も同じ画像です。

どちらも縮小されていると思いますがいかがでしょうか？ソースを見ると以下のようになっているはずです。

<img alt="WHR-G301N SoldOut" src="https://iflaglabs.jp/images/material/100x100xWHR-G301N_3.jpg.pagespeed.ic.Hh9NzSnr4A.jpg" style="width: 100px; height: 100px">

<img alt="WHR-G301N SoldOut" height="100" src="https://iflaglabs.jp/images/material/100xNxWHR-G301N_3.jpg.pagespeed.ic.Hh9NzSnr4A.jpg" width="100">


mod_pagespeedが画像を縮小する条件は、imgタグに height、widthを記述するか、style="height:100px;width:100px;"と記述することです。

cssファイルとクラスを利用してサイズを指定すると縮小しません。以 下は実例です。

https://iflaglabs.jp/mod_pagespeed_sample01.html

イメージサイズの縮小による効果を期待されて、mod_pagespeedを導入する場合には上記の点に気をつけてください。

突発的に始まった企画ですが、如何でしょうか？

次回はmod_pagespeedのキャッシュディレクトリについて解説しようと思います。

以上

mod_pagespeed事始 その３　キャッシュディレクトリについて（2013-01-11）

こんにちは。アイフラッグのシステム基盤担当のTTです。

mod_pagespeedのノウハウ解説の第三回です。今回の内容は、お恥ずかしい限りですが失敗談になります。

テスト環境でmod_pagespeedを導入して動作検証した後、本番環境の一部サイトに導入したところApacheサーバの負荷が急増しました。

障害には至りませんでしたが、この時は冷や汗をかきました。

既にお気づきの方もいらっしゃるかもしれませんが、原因はmod_pagespeedのキャッシュディレクトリへの書き込みでした。

対応策として mod_pagespeed のキャッシュディレクトリ（デフォルトでは/var/cache/mod_pagespeed/）をRAMディスク（Linuxではtmpfs）にすることにしました。

大規模サイトに導入する際には、キャッシュディレクトリのRAMディスク化かmemcachedを検討されたほうがよいと思います。

今後memcachedについては検証する予定です。

次回は、CSSスプライト（sprite_images）についてです。

以上

mod_pagespeed事始 その４ ホスティングとtrim_urlsの利用（2013-03-06）

ご無沙汰しております。アイフラッグのシステム基盤担当のTTです。

2ヶ月近くも放置してしまいましたが、mod_pagespeedの記事を再開いたします。

不定期更新になると思いますが、今後もよろしくお願いします。

CSSスプライト機能（sprite_images）について説明します。と前回の最後に予告しましたが、先にURLの省略（trim_urls）について解説いたします。

このフィルタはデフォルトはオフになっており、通常は利用する必要はありませんが、多数ドメインのホスティングを行っている場合には必要になります。

まずは実例を見てみます。ソースではCSSへのリンクを次のように記述しています。

まずは、trim_urlsが無効なページです（デフォルトの動作）。ソース表示はこちらです(ChromeやFirefoxで見られます）。

次のように、リンクにURLが追加されていることがわかります。

<link rel="stylesheet" type="text/css" href="https://iflaglabs.jp/I.mod_pagespeed_sample02.css.pagespeed.cf.5cHPI8dqlr.css"/>

次に、trim_urlを有効にしたページです。ソース表示はこちらでどうぞ。

次のように、リンクは相対パスになっているはずです。

<link rel="stylesheet" type="text/css" href="I.mod_pagespeed_sample02.css.pagespeed.cf.5cHPI8dqlr.css"/>

このような状況で trim_urls を有効にすると内部ドメイン名でリンクされてしまいます。

HTMLのbaseタグを利用するか、trim_urlsを有効にする必要があります。今回の例ではbaseタグを利用しています。

参考までにbaseタグをつけないで、trim_urlsを有効にすると例えば以下のようになります。

<link rel="stylesheet" type="text/css" href="http://internal.example.com:8080/I.mod_pagespeed_sample02.css.pagespeed.cf.5cHPI8dqlr.css"/>

次回こそは sprite_images について記述したいと思います。