小さい画像をbase64をかけてhtml内に埋め込み
おいしいアンテナは表示速度が遅いです。
原因の1つが、沢山画像を使っていることだった。
画像自体はキャッシュしているが、更新がないか確認するためのアクセスが足を引っ張っている様子。
なので、そのアクセスを無くすために、小さい画像はhtml内に埋め込むことにした。
今まで画像はこのように書いていたが、
<img src="http://hogehoge.jp/hoge.png">
画像をbase64でエンコードすると、以下のように書けるらしい。
<img src="data:image/png;base64,iVBORw0KGgo....">
この施策で40アクセスくらいは減らすことができた。
計測してみるとだいたい30%早くなってた。
最終的にできたライブラリは以下のような感じになった。
data:image/png;base64,iVBORw0KGgo....
のような文字列が返る。もし、ライブラリの中で失敗したら、渡された画像のURLをそのまま返す感じ。
あと、APC使ってキャッシュしている。
file cache(自作)も使っていて、apacheが再起動すると、file cache から拾いだして apc にコピーするようにした。
メモ
画像を base64 でエンコード
<?php $img = file_get_contents( 'http://hogehoge.jp/hoge.png' ); if ( $img !== false ) { $img = base64_encode( $img ); } ?>
画像の種類を判別
exif_imagetype() という便利な関数があった。
とりあえず、 gif, jpg, png があればいいので、以下のように使ってみた。
<?php ... static protected function getDataType( $img_link ) { switch( exif_imagetype( $img_link ) ) { case IMAGETYPE_GIF : $res = "gif"; break; case IMAGETYPE_JPEG : $res = "jpg"; break; case IMAGETYPE_PNG : $res = "png"; break; // case IMAGETYPE_SWF : $res = ""; break; // case IMAGETYPE_PSD : $res = ""; break; // case IMAGETYPE_BMP : $res = ""; break; // case IMAGETYPE_TIFF_II : $res = ""; break; // case IMAGETYPE_TIFF_MM : $res = ""; break; // case IMAGETYPE_JPC : $res = ""; break; // case IMAGETYPE_JP2 : $res = ""; break; // case IMAGETYPE_JPX : $res = ""; break; // case IMAGETYPE_JB2 : $res = ""; break; // case IMAGETYPE_SWC : $res = ""; break; // case IMAGETYPE_IFF : $res = ""; break; // case IMAGETYPE_WBMP : $res = ""; break; // case IMAGETYPE_XBM : $res = ""; break; default : $res = false; } return $res; } ?>
参考にさせて頂きました。
http://paranoids.sakura.ne.jp/kaworu/2008-04-06-1.php