【高速化】CSSをPHP化、画像をBASE64化してリクエスト数を減らしつつキャッシュ利用

概要

・PHPファイルをCSSとして読み込み
・CSS内部で画像をBASE64エンコードして変数化
・変数化した画像をCSSで描写
・拡張子がPHPファイルとなったCSSをキャッシュ化・圧縮転送

最初はHTMLに埋め込みしようと思ったけど

メリット：
・リクエスト数が減る

デメリット：
・通信量は期待するほど変わらない
※BASE64エンコードで35%増、圧縮で30%削減、最終的にトントン（らしい）
・キャッシュされない

画像がキャッシュされないのはよろしくない。

解決策

キャッシュされないデメリットは
CSSに画像を書き込むことで対処。
CSSはキャッシュされるようにしておけば安心。

実例

index.php

<!-- PHPファイルをCSSとして読み込む -->
<link rel="stylesheet" type="text/css" href="css.php" /> 

~~

<!-- 画像表示領域 -->
<figure id="profile">
</figure>

css.php

/* リクエストヘッダー */
<?php header('Content-Type: text/css; charset=utf-8'); ?>
@charset "UTF-8";

/* BASE64化 */
<?php $img_profile_png = base64_encode(file_get_contents('profile.png')); ?>

/* 画像出力 */
#profile_img{
    background-image: url('data:image/png;base64,<?= $img_profile_png?>');
}

.htaccess

# 拡張子がPHPでもキャッシュさせる（個別表記）
<Files ~ ".(php)$">
    Header set Cache-Control "max-age=2592000, public"
</Files>

# CSSファイルの圧縮（個別表記）
<ifmodule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/css 
 </ifmodule>